Home > Article > Web Front-end > Node.js uses Koa to build a basic project example tutorial
Many people pay more attention to new technologies such as NodeJs and express framework or Koa framework. Koa is an ultra-lightweight server-side framework created by the original team of Express. Compared with Express, it has a higher degree of freedom and can introduce middleware by itself. More importantly, it uses ES6 + async, thus avoiding callback hell. However, it is also because of the code upgrade that Koa2 requires a node.js environment of v7.60 or above.
Manually create a project directory, and then quickly generate a package.json file
npm init -y
Install koa //Current version 2.4.1
npm install koa -S
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);
Finally add the startup instructions in package.json
A most basic koa application is completed like this
You can 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
koa2 project_name
Then npm install to install the dependencies under the project, npm start to start the project
If you are new to koa, it is recommended to read this blog before using Scaffolding tool, so that you can better understand the role of each dependent package
There is a ctx in app.js above, which is a Context object provided by Koa, encapsulating request and response
Each HTTP Request will create a Context object
We can get the path requested by the user through Context.request.path, and then give it through Context.response.body Users send content
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 as Context.type, Context.response.body is abbreviated as Context.type
Create a directory views under the project to store html files, and put it in the Create an index.html in the 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);
and then access http://localhost:3000/index in the browser to see the index.html page, and access other addresses. It is not found
It seems very clumsy to handle the url in this way, so we need to introduce the routing middleware koa-router
npm install koa-router -S
It should be noted that when importing koa-router, you need to add it at the end A bracket:
const router = require('koa-router')();
is equivalent to:
const koaRouter = require('koa-router'); const router = koaRouter();
Create a routes directory 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
You can also use the prefix method here to add a baseUrl to 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);
The above allowedMethods are used to verify the request method. If you use post request to access the get interface, it will directly return failure
In addition, you can also add variables in the url, and then pass Context.params .name access
router.get('/about/:name', async (ctx, next) => { ctx.body = `I am ${ctx.params.name}!`; });
In the above index.html, if you need to introduce static resources such as css, you need to use koa-static
npm install koa-static -S
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);
In fact, this The three lines of code can also be optimized
app.use(require('koa-static')(__dirname + '/public'));
and then the corresponding files can be introduced into index.html
The above route uses the fs module to directly read the html file
When developing, it is recommended to use koa-views middleware to render the page
npm install koa-views -S
Set the views directory in app.js For the template directory
const views = require('koa-views') app.use(views(__dirname + '/views'));
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
The above is the method of directly rendering the html file. If you want to introduce the template engine, you can add the extension field to set Defined template type
app.use(views(__dirname + '/views', { extension: 'pug' // 以 pug 模版为例 }))
If Express is regarded as webstorm, then Koa is sublime
When Express became popular, its complicated dependencies were developed by many Criticized by developers
So the Express team disassembled Express down to the most basic skeleton and let developers assemble it by themselves. 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
Otherwise, why not use Express directly
Related recommendations:
Koa service current limiting method example
Analysis of koa middleware mechanism issues in node
Node.js+Koa Example Tutorial for Developing WeChat Official Accounts
The above is the detailed content of Node.js uses Koa to build a basic project example tutorial. For more information, please follow other related articles on the PHP Chinese website!