安裝

npm install koa
npm install koa-router
npm install koa-bodyparser
npm install nunjucks

1. hello world

let Koa = require('koa');
let app = new Koa();
app.use(async (ctx,next)=>{
  ctx.response.body = `<h1>hello world</h1>`
  await next();
})
app.listen(9000)
console.log('begin')

app.use([路徑]，callback)
ctx.body是ctx.response..body的簡(jiǎn)寫
await next()才能繼續(xù)執(zhí)行下面的請(qǐng)求

2. koa-router

let Koa = require('koa')
let router = require('koa-router')()
let bodyParser = require('koa-bodyparser')
/*
koa-bodyparser 的作用就是在post請(qǐng)求時(shí)，能如下使用
let name = ctx.request.body.name
*/

let app = new Koa();

app.use(bodyParser())

router.get('/',async (ctx)=>{
  ctx.body = '<h1>index</h1>'
})
router.get('/about',async (ctx)=>{
  ctx.body = '<h1>about</h1>'
})
app.use(router.routes())

app.listen(8989)

使用app.use也可以實(shí)現(xiàn)不同路徑跳轉(zhuǎn)不同界面，但是是要通過(guò)從上到下依次判斷，還要每個(gè)里面都要await next()

3. koa-bodyparser

由于middleware的順序很重要，這個(gè)koa-bodyparser必須在router之前被注冊(cè)到app對(duì)象上。

4. 整合案例

到現(xiàn)在，所有內(nèi)容都寫在app.js中，現(xiàn)在要將他們拆分出來(lái)

目錄結(jié)構(gòu)
|一級(jí)目錄|二級(jí)
|--|--|--|--|
|controller|hello.js
index.js
...|
|app.js||
|controller.js||

app.js

let Koa = require('koa')
let bodyParser = require('koa-bodyparser')
let controller = require('./controller')

let app = new Koa()

app.use(bodyParser())
app.use(controller())

app.listen(3000)

controller.js

let fs = require('fs')
let router = require('koa-router')()

function addMapping(mapping) {
  for (let url in mapping){
    if(url.startsWith('GET')){
      let path = url.substring(4)
      router.get(path,mapping[url])
    }else if(url.startsWith('GET')){
      let path = url.substring(5)
      router.post(path,mapping[url])
    }
  }
}

function addController(dir) {
  fs.readdirSync(__dirname + '/' + dir).filter(f=>{
    return f.endsWith('.js')
  }).forEach(f=>{
    let mapping = require(__dirname + '/' + dir + '/' + f)
    addMapping(mapping)
  })
}

module.exports = function (dir) {
  let controller_dir = dir || 'controllers';
  addController(controller_dir)
  return router.routes()
}

hello.js

let fn_hello = async ctx => {
  console.log(ctx)
  let name = ctx.params.name
  ctx.body = `<h1>hello ${name},long time no see</h1>`
}
module.exports = {
  'GET /hello/:name': fn_hello
}

這樣，app.js controller.js 就不需要改動(dòng)了，需要增加功能在controller文件里面添加js就可以了

addMapping 完整版

function addMapping(router, mapping) {
    for (var url in mapping) {
        if (url.startsWith('GET ')) {
            var path = url.substring(4);
            router.get(path, mapping[url]);
            console.log(`register URL mapping: GET ${path}`);
        } else if (url.startsWith('POST ')) {
            var path = url.substring(5);
            router.post(path, mapping[url]);
            console.log(`register URL mapping: POST ${path}`);
        } else if (url.startsWith('PUT ')) {
            var path = url.substring(4);
            router.put(path, mapping[url]);
            console.log(`register URL mapping: PUT ${path}`);
        } else if (url.startsWith('DELETE ')) {
            var path = url.substring(7);
            router.del(path, mapping[url]);
            console.log(`register URL mapping: DELETE ${path}`);
        } else {
            console.log(`invalid URL: ${url}`);
        }
    }
}

4. 模版引擎nunjucks

npm install nunjucks

4.1 渲染字符串

let nunjucks = require('nunjucks')
nunjucks.configure({autoescape:true})//暫時(shí)不知道autoescape拿來(lái)干啥用
let res = nunjucks.renderString('{{username}}',{username:'張三'})
console.log(res)

4.2 渲染模版

let nunjucks = require('nunjucks')
let path = require('path')
nunjucks.configure(path.resolve(__dirname,'views'),{autoescape:true})
let res = nunjucks.render('user.html',{name:'張三'})
console.log(res)

需要引入path，讀取views文件夾下的user.html

4.3 過(guò)濾器

nunjuck.renderString('{{username|join("-")|replace('boy','Man')}}',{username:['boy','sayNo']})

4.4 if

let res = `
{% if score>80 %}
a
{% elseif score>60 %}
b
{% else %}
c
{% endif %}`
nunjucks.renderString(res,{score:80})

4.5 for

{% for item in lists %}
{{item}}*{{loop.index}}
{% endfor %}

和vue的for一樣使用，這個(gè)多了個(gè)loop對(duì)象

• loop.index: 當(dāng)前循環(huán)數(shù) (1 indexed)
• loop.index0: 當(dāng)前循環(huán)數(shù) (0 indexed)
• loop.revindex: 當(dāng)前循環(huán)數(shù)，從后往前 (1 indexed)
• loop.revindex0: 當(dāng)前循環(huán)數(shù)，從后往前 (0 based)
• loop.first: 是否第一個(gè)
• loop.last: 是否最后一個(gè)
• loop.length: 總數(shù)

4.6模版繼承

layout.html

<div class="header">header</div>
<div class="content">
  {% block my %}
  我是默認(rèn)內(nèi)容
  {% endblock %}
</div>
<div class="footer">footer</div>

user.html

{% extends "layout.html" %}
{% block my %}
我是用戶管理內(nèi)容
{% endblock %}

app.js里面渲染user.html就會(huì)有l(wèi)ayout.html的部分。

4.7 包含

include關(guān)鍵字可以引入其他的模版，可以在多模版之間共享一些小模版，如果某個(gè)模版已使用了繼承那么include將會(huì)非常有用。

item.html

<li>名次：{{loop.index}}:{{user.id}}:{{user.name}}</li>

user.html

{% extends "layout.html"%}
{% block my %}
<ul style='border:1px solid red'>
  {% for user in users %}
  {% include "item.html" %}
  {% endfor%}
</ul>
{% endblock %}