Use Koa to build projects through Node.js-JS Tutorial-php.cn

Nowadays, many front-end engineers pay more attention to new technologies such as NodeJs and express framework or Koa framework. It's rare that I have a lot of free time recently, so I took advantage of this free time before the Lunar New Year has officially arrived to get involved in it and get a glimpse of its secrets.

Koa is an ultra-lightweight server-side framework created by the original team of Express

Compared with Express, in addition to having a higher degree of freedom and being able to introduce middleware by yourself, more importantly ES6 async is used to avoid callback hell

But it is also due to code upgrades, so Koa2 requires a node.js environment of v7.60 or above

1. Create a project

Manually create a project directory, and then quickly generate a package.json file

npm init -y

Copy after login

Install koa //The current version is 2.4.1

npm install koa -S

Copy after login

Then create an app.js

// app.js const Koa = require('koa'); const app = new Koa(); app.use(async ctx => { ctx.body = 'Wise Wrong'; }); app.listen(3000);

Copy after login

Finally, add the startup command in package.json

A most basic koa application is completed

Okay Execute npm start and visit http://localhost:3000/ in the browser to view the effect

If you feel that manually creating the project is too cumbersome, you can use the scaffolding koa-generato to generate the project

npm install koa-generator -g

Copy after login

koa2 project_name

Copy after login

Then Under the project, npm install installs the dependencies, and npm start starts the project

If you are new to koa, it is recommended to read this blog first, and then use the scaffolding tool, so that you can better understand the role of each dependent package

2. Configure routing

There is a ctx in app.js above, which is a Context object provided by Koa, encapsulating request and response

Every HTTP Request will create a Context object

We can get the path requested by the user through Context.request.path, and then send content to the user through Context.response.body

Koa’s default return type is text/plain. If you want to return an html file (or a module file), you need to modify Context.response.type

In addition, Context.response can be abbreviated, for example, Context.response.type is abbreviated to Context.type, Context.response .body is abbreviated as Context.type

Create a directory views under the project to store html files, and create an index.html in this directory, then modify app.js

// app.js// 原生路由 const Koa = require('koa'); const fs = require('fs'); const app = new Koa(); app.use(async (ctx, next) => { if (ctx.request.path === '/index') { ctx.type = 'text/html'; ctx.body = fs.createReadStream('./views/index.html'); } else { await next(); } }); app.listen(3000);

Copy after login

and then When you access http://localhost:3000/index in the browser, you can see the index.html page, but when you access other addresses, it is not found

. It seems very clumsy to handle the URL in this way, so we need to introduce routing intermediate koa-router

npm install koa-router -S

Copy after login

It should be noted that when importing koa-router, you need to add a bracket at the end:

const router = require('koa-router')();

Copy after login

is equivalent to:

const koaRouter = require('koa-router'); const router = koaRouter();

Copy after login

Create a routes directory, used to store routing files and create index.js

// routes/index.js const fs = require('fs'); const router = require('koa-router')() router.get('/index', async (ctx, next) => { ctx.type = 'text/html'; ctx.body = fs.createReadStream('./views/index.html'); }); module.exports = router

Copy after login

You can also use the prefix method here to add a baseUrl# for all interfaces in the file.

##// router.prefix('/about')

Modify app.js

// app.js const Koa = require('koa'); const app = new Koa(); const index = require('./routes/index') app.use(index.routes(), index.allowedMethods()) app.listen(3000);

Copy after login

The allowedMethods above are used to verify the request method. If you use post request to access get interface, it will directly return failure

In addition, you can also add variables in the url, and then access it through Context.params.name

router.get('/about/:name', async (ctx, next) => { ctx.body = `I am ${ctx.params.name}!`; });

Copy after login

3. Static resources

Above In index.html, if you need to introduce static resources such as css, you need to use koa-static

npm install koa-static -S

Copy after login

Create a directory public to store static resources

Then add the following code in app.js

const static = require('koa-static'); // 将 public 目录设置为静态资源目录 const main = static(__dirname + '/public'); app.use(main);

Copy after login

In fact, these three lines of code can also be optimized

app.use(require('koa-static')(__dirname + '/public'));

Copy after login

Then the corresponding files can be introduced in index.html

4. Template engine

The above route uses the fs module to directly read the html file

It is more recommended to use koa-views during development Middleware to render the page

npm install koa-views -S

Copy after login

Set the views directory as the template directory in app.js

const views = require('koa-views') app.use(views(__dirname + '/views'));

Copy after login

Then in the routing file, you can use the render method

// routes/index.js const router = require('koa-router')() router.get('/index', async (ctx, next) => { await ctx.render('index'); }); module.exports = router

Copy after login

The above is the method of directly rendering html files. If you want to introduce a template engine, you can add the extension field to set the template type

app.use(views(__dirname + '/views', { extension: 'pug' // 以 pug 模版为例 }))

Copy after login

5. Conclusion

If Express is regarded as webstorm, then Koa It’s sublime

When Express became popular, its complicated dependencies were criticized by many developers

So the Express team dismantled Express down to its most basic skeleton, allowing developers to Assembly, this is Koa

As mentioned in the article, starting from scratch is too cumbersome. You can use the scaffolding koa-generato to develop quickly

But I recommend that after getting familiar with Koa, build a scaffolding suitable for your own project

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Comparison of the use of express and koa (detailed tutorial)

The first use of stylus installation method in vue (detailed tutorial Tutorial)

Development of goods components in Vue framework

The above is the detailed content of Use Koa to build projects through Node.js. For more information, please follow other related articles on the PHP Chinese website!