Koa2从零搭建完整工程①

写在前面

看完了廖大神的 JavaScript 教程，特记录一下从0搭建一个完整的 koa2 工程，主要包含：

• 处理静态资源
• 模版渲染处理
• 数据库 ORM 处理
• REST API 处理
• 动态解析 controllers

目录

1. 创建 koa-basic 工程
2. 计算响应耗时的中间件
3. 静态资源处理的中间件
4. 安装 koa-bodyparser 中间件
5. 模版渲染中间件
6. ...接下一篇

创建 koa-basic 工程

1. 新建文件夹 koa-basic 并使用 vscode 打开
2. 在命令行下使用 npm init 初始化工程
3. 使用 npm i koa -S 安装 koa 依赖包（ i 等价于 install，-S 为自动添加到 dependencies ）
4. 小小的修改一下 package.json 文件

{
  ...
  "scripts": {
    "start": "node app.js",//在命令行输入 npm start 即可运行 app.js
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

5. 新建 app.js 文件

// 导入koa，和koa 1.x不同，在koa2中，我们导入的是一个class，因此用大写的Koa表示:
const Koa = require('koa');

// 创建一个Koa对象表示web app本身:
const app = new Koa();

// 对于任何请求，app将调用该异步函数处理请求：
app.use(async (ctx, next) => {
    // 调用下一个中间件（等待下一个异步函数返回）
    await next();
    // 设置response的Content-Type:
    ctx.response.type = 'text/html';
    // 设置response的内容:
    ctx.response.body = '<h1>Hello, Koa2!</h1>';
});

// 在端口3000监听:
app.listen(3000);
console.log('app started at port 3000...');

6. 使用 npm start 将该 web 程序跑起来，在浏览器中输入http://localhost:3000能正常访问

计算响应耗时的中间件

这是一个最基础，最简单的中间件，所以一个异步函数就可以搞定。

//中间件1:计算响应耗时
app.use(async (ctx, next) => {
    console.log(`Precess ${ctx.request.method} ${ctx.request.url}...`);
    var
        start = Date.now(),
        ms;
    await next();// 调用下一个中间件（等待下一个异步函数返回）
    ms = Date.now() - start;
    ctx.response.set('X-Response-Time', `${ms}ms`);
    console.log(`Response Time: ${ms}ms`);
});

静态资源处理的中间件

先安装mime、mz模块

npm i -S mime
npm i -S mz

新建static文件夹用于存放静态资源
新建static-files.js文件

const path = require('path');
const mime = require('mime');
//mz 提供的 API 和 Node.js 的 fs 模块完全相同，但 fs 模块使用回调，而 mz 封装了 fs 对应的函数，并改为 Promise，这样我们就可以非常简单的用 await 调用 mz 的函数，而不需要任何回调。
const fs = require('mz/fs');

//模块输出为一个函数
module.exports = (pathPrefix, dir) => {
    //指定请求的前缀，默认为 static
    pathPrefix = pathPrefix || '/static/';
    //指定静态文件目录，默认为 static
    dir = dir || __dirname + '/static/';
    //返回异步函数，这是用于 app.use() 的中间件函数
    return async (ctx, next) => {
        //请求路径
        var rpath = ctx.request.path;
        //判断请求路径前缀符合要求，否则执行下一个中间件
        if (rpath.startsWith(pathPrefix)) {
            //转换到文件的本地路径
            var fp = path.join(dir, rpath.substring(pathPrefix.length));
            //判断文件存在，并返回相关内容
            if (await fs.exists(fp)) {
                ctx.response.type = mime.getType(rpath);
                ctx.response.body = await fs.readFile(fp);
            } else {
                ctx.response.status = 404;
            }
        } else {
            await next();
        }
    };
};

在app.js中使用该中间件

//中间件2:处理静态资源，非生产环境下使用
if (!isProduction) {
    //引入 static-files 中间件，直接调用该模块输出的方法
    app.use(require('./static-files')());
}

安装 koa-bodyparser 中间件

先安装该模块

npm i -S koa-bodyparser

在app.js中使用该中间件

...
//在头部引入该模块
const bodyparser = require('koa-bodyparser');
...
//中间件3:解析原始 request 对象 body，绑定到 ctx.request.body
app.use(bodyparser());
...

模版渲染中间件

先安装nunjucks模块

npm i -S nunjucks

新建views文件夹用于存放模版文件
新建templating.js文件

const nunjucks = require('nunjucks');

//配置nunjucks
function createEnv(path, opts) {
    var
        autoescape = opts.autoescape === undefined ? true : opts.autoescape,
        noCache = opts.noCache || false,
        watch = opts.watch || false,
        throwOnUndefined = opts.throwOnUndefined || false,
        env = new nunjucks.Environment(
            new nunjucks.FileSystemLoader(path, {
                noCache: noCache,
                watch: watch
            })
            , {
                autoescape: autoescape,
                throwOnUndefined: throwOnUndefined
            }
        );

    if (opts.filters) {
        for (var f of opts.filters) {
            env.addFilter(f, opts.filters[f]);
        }
    }
    return env;
}

//模块输出为一个函数 path为可选参数
module.exports = function (path, opts) {
    //可选参数处理
    if (arguments.length === 1) {
        opts = path;//赋值给 opts
        path = null;
    }
    //模版文件目录，默认为 views
    path = path || 'views';
    var env = createEnv(path, opts);
    //用于 app.use() 的中间件函数
    return async (ctx, next) => {
        //给 ctx 绑定 render 方法
        ctx.render = (view, model) => {
            ctx.response.type = 'text/html';
            //Object.assign()会把除第一个参数外的其他参数的所有属性复制到第一个参数中。第二个参数是ctx.state || {}，这个目的是为了能把一些公共的变量放入ctx.state并传给View。
            ctx.response.body = env.render(view, Object.assign({}, ctx.state || {}, model || {}));
        };
        await next();
    };
};

在app.js中使用该中间件

...
//在头部引入该模块
const templating = require('./templating');
...
//中间件4:模版文件渲染
app.use(templating({
    noCache: !isProduction,
    watch: !isProduction
}));
...

接下一篇