從入門到不放棄系列之Koa2

時間 2019-11-13

標籤入門放棄系列 koa2 koa 简体版

原文原文鏈接

一.Koa2入門css

　　原本是想Express入門的，可是既然都是要學，幹嗎不學最新的呢？
　　其實我想說，我原本只是想學個小程序開發，如今已經陸陸續續開了好多坑了。。
　　本文參考廖雪峯教程html

二.Async
　　最新的Koa2已經使用async來做爲中間件(middleware)了，具體用法這裏不贅述，能夠參考阮一峯老師的Es6教程
　　以前使用的Generator函數node

　　使用async時，要求node的版本大於等於7.6.0
　　所以若是發現錯誤，可使用nvm（window系統），n（mac系統）來切換node版本git

　　mac系統的n已經用的不少了，這裏放出window系統下的nvm的一些介紹：下載、nvm使用說明es6

三.實例
1. 使用npm init命令初始化package.jsongithub

2. 使用npm install --save-dev koa koa-bodyparser koa-router安裝koa2
其中koa和koa-router毋庸置疑字面含義已經很清楚了，koa-bodyparser是由於不管是原生的node仍是koa都沒法直接解析request的body，所以須要引用這個插件npm

3. 在根目錄建立文件夾：controllers,在該文件夾中保存全部的路由文件json

4. 在controllers文件夾中新增一個名爲index.js的文件，內容以下：小程序

var fn_index = async (ctx, next) => { 
    // let appID = 'wx5db51f3c5c381ed2', 
    // appsecret = '4c797335101c71a01c1713b3f83fd26d', 
    // Token = 'xiaoyebaomemeda'; 
    console.log(ctx.querystring); 
    ctx.response.body = `<h1>Index </h1><h3>koa1</h3><h4>${ctx.querystring}</h4>`; 
}; 

var fn_hello = async (ctx, next) => { 
    var name = ctx.params.name; 
    ctx.response.type = 'text/html'; 
    ctx.response.body = `<h3>Hello ${name}</h3>`; 
}; 

module.exports = { 
    'Get /': fn_index, 
    'Get /hello/:name': fn_hello 
};

能夠看出，這個文件輸出的對象中包含兩個」路由「，分別是"Get /"和"Get /hello/:name"
　　"Get"表示method是"get","/"是url路徑
　　關於ctx的介紹詳見官網
５. 在controllers文件夾再新建一個名爲user.js的文件,內容以下：segmentfault

var fn_get_register = async (ctx, next) => { 
    var html = ` 
    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>register</title> 
    </head> 
    <body> 
    <form action="/register" method="post"> 
    姓名：<input type="text" name='name' value=''> 
    年齡：<input type="" name="age"> 
    <button type="submit">submit</button> 
    </form> 
    </body> 
    </html> 
    `; 
    ctx.response.type = 'text/html'; 
    ctx.response.body = html; 
}; 

var fn_post_register = async (ctx, next) => { 
    console.log(`name:${ctx.request.body.name} 
        age: ${ctx.request.body.age}`); 
    ctx.response.body = `<span>submited!</span> 
    name:${ctx.request.body.name} 
    age:${ctx.request.body.age}`; 
}; 

module.exports = { 
    'Get /register': fn_get_register, 
    'Post /register': fn_post_register 
};

　　此次分別建立了"Get"和"Post"方法的路由

6.在根目錄建立controller.js,用來讀取controller文件夾中的全部路由文件，反射出路由,內容以下：

// 返回path路徑下的全部js文件 
var readFile = function (path) { 
    var fs = require('fs'); 
    var files = fs.readdirSync('./'+path); 
    var jsFiles = files.filter((f) => { 
        return f.endsWith('.js'); 
    }); 
    return jsFiles; 
}; 

// 根據.js文件反射路由 
var SetRouter = function (path) { 
    // 聲明路由 
    var router = require('koa-router')();
    var jsFiles = readFile(path); 
    for (var js of jsFiles) {
        let mapping = require(__dirname + '/' + path + '/' + js); //分別引入每一個js文件 
        for (var url in mapping) { 
            // 遍歷每一個controller文件中的路由
            if(url.startsWith('Get')) { 
                // method: get 
                router.get(url.replace('Get ',''), mapping[url]); 
            } else if (url.startsWith('Post'),mapping[url]) { 
                // method: post 
                router.post(url.replace('Post ',''), mapping[url]); 
            } else { 
                // 非路由的 
                console.log('this is not router file'); 
            } 
        } 
    } 
    return router.routes(); 
}; 

module.exports = function (path) { 
    return SetRouter( path || 'controllers'); 
};

7.在根目錄新建app.js,內容以下：

var Koa = require('koa'); 
var app = new Koa(); 
var router = require('./controller.js')(); 
var sha1 = require('sha1'); 
var bodyParser = require('koa-bodyparser'); 

app.use(async (ctx,next) => { 
    console.log(new Date()); 
    await next (); 
}); 

app.use(bodyParser()); 
app.use(router); 

app.listen(3000); 
console.log('listening port 3000');