写在前面
看完了廖大神的 JavaScript 教程，特记录一下从0搭建一个完整的 koa2 工程，主要包含：
- 处理静态资源
- 模版渲染处理
- 数据库 ORM 处理
- REST API 处理
- 动态解析 controllers
目录
- 创建 koa-basic 工程
- 计算响应耗时的中间件
- 静态资源处理的中间件
- 安装 koa-bodyparser 中间件
- 模版渲染中间件
- ...接下一篇
创建 koa-basic 工程
- 新建文件夹 koa-basic 并使用 vscode 打开
- 在命令行下使用 npm init 初始化工程
- 使用 npm i koa -S 安装 koa 依赖包（ i 等价于 install，-S 为自动添加到 dependencies ）
- 小小的修改一下 package.json 文件
{
...
"scripts": {
"start": "node app.js",//在命令行输入 npm start 即可运行 app.js
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}
- 新建 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...');
- 使用 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
}));
...
网友评论