Introduction to koa (II) building the koa program

1 Project structures,

1.1 initial directory

install mkdir koa-demo && cd koa-demo && npm init -y && npm i koa --save && code .

stay package.json Configuration in file ：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node index.js"
}

1.2 New root index.js file

const Koa = require('koa')
const app = new Koa()

//  middleware 
app.use((ctx) => {
  // ctx.body  amount to  http.createServer((req, res) => { res.end(' Hello , Uncertainty of measurement ') })
  ctx.body = ' Hello , Uncertainty of measurement '
})

app.listen(3000, () => {
  console.log(' monitor 3000 port ')
})

ctx.body Is the data returned to the front end , Previous development was MVC Pattern , The back end is directly rendered , Back to the front end , You can write like this ctx.body = '<h1> Hello , Uncertainty of measurement </h1>', In this way, the page can render labels directly ; But the current projects are separated from the front end and the back end , The back end directly returns JSON data , Get the front end and render it , therefore Koa The data returned is like this ctx.body = [{name: 'uncertainty'}, {name: ' Uncertainty of measurement '}], I hope my expression makes you understand .

perform npm start

Open the browser , Input http://localhost:3000/

Of course, you can now use the browser to view , the reason being that get request , But it is recommended that you install postman, It can be easily tested later post Request or upload file function .postman Download address .

1.3 Use postman request http://localhost:3000/

But every time you change the code here, you need to restart the service , Not very convenient , Here we install nodemon Auxiliary tool , It will refresh automatically after changes , It can be installed globally or under the current project , I will install it globally npm i nodemon -g.

Modify the startup command to "start": "nodemon index.js" （nodemon Will help us monitor js, mjs, json Changes in documents , Start the program automatically ）

2 Implement a simple Koa

Everybody knows ,Koa It's right node Encapsulation , Let's start with a simple service implementation ：

• New file application.js Use Koa When is new Example , So you need to implement a class ,listen Method listening port ,use Method to mount the middleware , as follows ：let http = require('http') class Application{ constructor() { this.callbackFunc } // Turn on http srever Pass in callback listen(...args) { let server = http.createServer(this.callback()) server.listen(...args) } /** * Mount callback function * @param {*} fn Callback handler */ use(fn) { this.callbackFunc = fn } /** * obtain http server The required callback function */ callback() { return (req, res) => { this.callbackFunc(req, res) } } } module.exports = Application
• newly build example.js file Put the application.js The file import let simpleKoa = require('./application') let app = new simpleKoa() app.use((req, res) => { res.writeHead(200) res.end('hello, uncertainty') }) // This monitoring 8000 app.listen(8000, () => console.log(' monitor 8000 port '))
• Carry out orders nodemon example.js

3 middleware

Koa Is a middleware framework , There is no middleware bundled with it ( The core code is simple ). It does not support many functions , All functions can be realized through middleware expansion . By adding different middleware , Implement different requirements , To build a Koa application .Koa The middleware is the function , Now it's basically async function .

• app.use() Is used to register middleware and must be a generator function （ There are judgments in the source code , Later versions will be removed ,2.0 For downward compatibility ）use(fn) { if (typeof fn !== 'function') throw new TypeError('middleware must be a function!'); if (isGeneratorFunction(fn)) { deprecate('Support for generators will be removed in v3. ' + 'See the documentation for examples of how to convert old middleware ' + 'https://github.com/koajs/koa/blob/master/docs/migration.md'); fn = convert(fn); } debug('use %s', fn._name || fn.name || '-'); this.middleware.push(fn); return this; }

Generator function ：generator yes ES6 A new special function , adopt function* Statement , Function body through yield To indicate the pause point of the function , This function returns an iterator , And the function executes to yield Pause before the statement , Then call the iterator that is returned next() Method to execute yield sentence

We can also use generator functions as middleware （ Not recommended ）：

const Koa = require('koa')
const app = new Koa()

app.use(function *(next){
  console.log(1)
  yield next;
  console.log(3)
  this.body = ' Hello , I'm not sure '
})
app.use(function *(next){
  console.log(2)
  yield next
})

app.listen(3000, () => {
  console.log(' monitor 3000 port ')
})

• Koa The middleware is cascaded in a more traditional way , Abandon the past node Complex code logic caused by frequent callback functions
• Koa Many intermediate bond functions will form a processing chain , Each intermediate key function can do something of its own , And then use next() To call the next intermediate key function
• The intermediate key must be a function , It can be an asynchronous function ： adopt es7 Medium async and await To deal with it
• use Two objects are encapsulated inside ：ctx, next

1. ctx yes context Is generally called context , It mainly includes request and response.body yes http The response body in the protocol ,header Refers to the response header , If you want to throw exceptions, you can directly use ctx.throw(500, ' Abnormal interface '),ctx.status Set status code ,ctx.url Get request URL etc. .
2. next Play the role of serial middleware , By calling next function , Give execution to the next middleware . The last middleware does not use this function .

4 Write your own middleware

4.1 log middleware

The log module is also an indispensable part of online , The perfect log system can help us quickly troubleshoot the problems on the outgoing line . adopt Koa middleware , We can implement our own log module ( Of course, you can directly use the existing libraries in the community ):

• newly build logger.jsconst fs = require('fs') module.exports = (options) => async (ctx, next) => { const startTime = Date.now() const requestTime = new Date() await next() const ms = Date.now() - startTime let logout = `${ctx.request.ip} -- ${requestTime} -- ${ctx.method} -- ${ctx.url} -- ${ms}ms` // Output log file fs.appendFileSync('./log.txt', logout + '\n') }const Koa = require('Koa') const app = new Koa() const logger = require('./logger') app.use(logger()) app.listen(3000, () => { console.log(`Server port is 3000.`) })
• Import file logger.js file

4.2 token verification

Separate front and rear development , We often use JWT To authenticate , among token Generally placed on HTTP In the request Header Authorization Field ( Later on ), The back end of each request must be verified , It is impossible to write judgments for every interface ,Koa By writing middleware to achieve token verification .

• establish token.jsmodule.exports = (options) => async (ctx, next) { try { // obtain token const token = ctx.header.authorization if (token) { try { // verify Function validation token, And get user related information await verify(token) } catch (err) { console.log(err) } } // Go to the next middleware await next() } catch (err) { console.log(err) } }const Koa = require('Koa') const app = new Koa() const token = require('./token') app.use(token()) app.listen(3000, () => { console.log(`Server port is 3000.`) }) If you like, you can follow the official account ： Touch the front end ,2021 Study and make progress together .
• Import file token.js file