从零开始的Koa实战（2）路由

路由将 URL 解析到对应的处理程序。

经过上一节的实战，我们已经有了下面的目录结构：

koa-blog
├── package.json
└── app.js

我们将使用 Koa 的中间件 koa-router 来处理请求，把请求解析到对应的控制器（controller）上，实现访问不同地址获得不同的结果。在这之前，我们先了解使用原生 Koa 实现路由的方式。

Koa原生路由实现

查看url信息

首先，通过 ctx.request.url 获取到当前请求的地址：

// app.js
const Koa = require('koa');
const app = new Koa();

// 响应
app.use(ctx => {
    const { url } = ctx.request;
    ctx.response.body = url;
});

app.listen(3000);

启动服务之后我们在浏览器访问 http://localhost:3000 的任何一个地址，可在页面中看到返回的 url 信息。

了解内容协商

Koa使用 accepts 作为内容协商（content negotiation），accept 能告诉服务器浏览器接受什么样的数据类型，默认的返回类型是 text/plain ，若要返回其他类型的内容则用 ctx.request.accepts 在请求头部附带信息，然后用 ctx.response.type 指定返回类型，示例：

const main = ctx => {
  if (ctx.request.accepts('xml')) {
    ctx.response.type = 'xml';
    ctx.response.body = '<data>Hello World</data>';
  } else if (ctx.request.accepts('json')) {
    ctx.response.type = 'json';
    ctx.response.body = { data: 'Hello World' };
  } else if (ctx.request.accepts('html')) {
    ctx.response.type = 'html';
    ctx.response.body = '<p>Hello World</p>';
  } else {
    ctx.response.type = 'text';
    ctx.response.body = 'Hello World';
  }
};

可以使用 acceptsEncodings 设置接收返回的编码，acceptsCharsets 设置接收返回的字符集，acceptsLanguages 设置接收返回的语言。

控制页面访问

接下来我们通过对请求地址进行判断，并取到与之相对应的HTML页面返回到浏览器显示。因此，这里将建立几个HTML文件，把它们放在 app/view/ 目录里面。

首先，新建 HTML 文件如下：

<!--app/view/index.html-->
<h1>Index Page</h1>
<a href="home">home</a>

<!--app/view/home.html-->
<h1>Home Page</h1>
<a href="index">index</a>

<!--app/view/404.html-->
<h1>404 访问的页面不存在</h1>
<a href="home">home</a>

接着使用 Node.js 的文件系统实现HTML的读取，具体代码如下：

/**
 * 从app/view目录读取HTML文件
 * @param {string} page 路由指向的页面
 * @returns {Promise<any>}
 */
function readPage( page ) {
    return new Promise(( resolve, reject ) => {
        const viewUrl = `./app/view/${page}`;
        fs.readFile(viewUrl, 'utf8', ( err, data ) => {
            if ( err ) {
                reject( err )
            } else {
                resolve( data )
            }
        })
    })
}

我们读取了创建在 app/view/ 目录的 HTML 之后，通过判断请求的 url ，选择对应的页面进行返回到浏览器显示，完整代码：

// app.js
const Koa = require('koa');
const fs = require('fs'); // 引入fs

const app = new Koa();

/**
 * 从app/view目录读取HTML文件
 * @param {string} page 路由指向的页面
 * @returns {Promise<any>}
 */
function readPage( page ) {
    return new Promise(( resolve, reject ) => {
        const viewUrl = `./app/view/${page}`;
        fs.readFile(viewUrl, 'utf8', ( err, data ) => {
            if ( err ) {
                reject( err )
            } else {
                resolve( data )
            }
        })
    })
}

// 路由
app.use(async ctx => {
    const {url} = ctx.request;
    let page;
    switch ( url ) {
        case '/':
            page = 'index.html';
            break;
        case '/index':
            page = 'index.html';
            break;
        case '/home':
            page = 'home.html';
            break;
        default:
            page = '404.html';
            break
    }
    ctx.response.type = 'html'; // 这里设置返回的类型是html
    ctx.response.body = await readPage(page);
});

app.listen(3000, () => {
    console.log('App started on http://localhost:3000')
});

然后我们启动服务，在浏览器访问 http://localhost:3000/index ，我们可以看到页面已经显示出来，点击里面的连接，就能够切换不同的页面。

使用koa-router

从上面的实战可以看到，要针对不同的访问返回不同的内容，我们需要先获取请求的 url，以及请求的类型，再进行相应的处理，最后返回结果，考虑到使用原生路由处理请求会很繁琐，我们使用 koa-router 中间件来管理项目路由。

这里有比较详细的 koa-router 中间件使用指南： Koa中间件使用之koa-router 。

安装和使用

执行命令安装 koa-router：

$ npm install koa-router --save

接着修改之前的路由代码，使用 koa-router：

// app.js
const Koa = require('koa');
const fs = require('fs'); // 引入fs
const Router = require('koa-router'); // 引入koa-router

const app = new Koa();
const router = new Router();

/**
 * 从app/view目录读取HTML文件
 * @param {string} page 路由指向的页面
 * @returns {Promise<any>}
 */
function readPage( page ) {
    return new Promise(( resolve, reject ) => {
        const viewUrl = `./app/view/${page}`;
        fs.readFile(viewUrl, 'utf8', ( err, data ) => {
            if ( err ) {
                reject( err )
            } else {
                resolve( data )
            }
        })
    })
}

// 原生路由
// app.use(async ctx => {
//     const {url} = ctx.request;
//     let page;
//     switch ( url ) {
//         case '/':
//             page = 'index.html';
//             break;
//         case '/index':
//             page = 'index.html';
//             break;
//         case '/home':
//             page = 'home.html';
//             break;
//         default:
//             page = '404.html';
//             break
//     }
//     ctx.response.type = 'html'; // 这里设置返回的类型是html
//     ctx.response.body = await readPage(page);
// });


// koa-router
const index = async (ctx, next) => {
    ctx.response.type = 'html';
    ctx.response.body = await readPage('./index.html');
};
const home = async (ctx, next) => {
    ctx.response.type = 'html';
    ctx.response.body = await readPage('./home.html');
};

router.get('/', index);
router.get('/index', index);
router.get('/home', home);

// 使用中间件 处理404
app.use(async (ctx, next) => {
    await next(); // 调用next执行下一个中间件
    if(ctx.status === 404) {
        ctx.response.type = 'html';
        ctx.response.body = await readPage('./404.html');
    }
});

// 使用koa-router中间件
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
    console.log('App started on http://localhost:3000')
});

在以上代码中，我们使用 ctx.response.type 来设置响应的类型，响应内容为 HTML 标签，并且通过添加路由中间件，执行 npm start 启动服务即可预览。

单独管理路由

从上面的实战可以看到，我们在 app.js 的代码显得非常臃肿，考虑到以后项目会复杂很多，那样我们的代码将变得难以维护，因此下面来把路由独立出来，放在单独的文件夹管理：

// app/router/index.js

const fs = require('fs'); // 引入fs

const Router = require('koa-router');
const router = new Router();

/**
 * 从app/view目录读取HTML文件
 * @param {string} page 路由指向的页面
 * @returns {Promise<any>}
 */
function readPage( page ) {
    return new Promise(( resolve, reject ) => {
        const viewUrl = `./app/view/${page}`;
        fs.readFile(viewUrl, 'utf8', ( err, data ) => {
            if ( err ) {
                reject( err )
            } else {
                resolve( data )
            }
        })
    })
}

// koa-router
const index = async (ctx, next) => {
    ctx.response.type = 'html';
    ctx.response.body = await readPage('./index.html');
};
const home = async (ctx, next) => {
    ctx.response.type = 'html';
    ctx.response.body = await readPage('./home.html');
};

router.get('/', index);
router.get('/index', index);
router.get('/home', home);

module.exports = router;

// app.js
const Koa = require('koa');
const app = new Koa();

// 引入路由文件
const router = require('./app/router');

// 使用中间件 处理404
app.use(async (ctx, next) => {
    await next(); // 调用next执行下一个中间件
    if(ctx.status === 404) {
        ctx.response.type = 'html';
        ctx.response.body = '404'; // 移除了读取页面的方法
    }
});

// 使用koa-router中间件
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
    console.log('App started on http://localhost:3000')
});

通过上面的代码，我们已经实现路由独拿在一个目录维护，以后我们都将在 app/router/ 里面进行路由的创建，重新启动服务，访问 http://localhost:3000/ 看看是否生效。

使用模板引擎

为了便于读取模板和渲染页面，我们将使用中间件 koa-nunjucks-2 来作为模板引擎。

首先安装 koa-nunjucks-2 :

$ npm i koa-nunjucks-2 --save

在使用路由中间件之前应用 koa-nunjucks-2：

// app.js
const Koa = require('koa');
const app = new Koa();

// 引入模板引擎
const koaNunjucks = require('koa-nunjucks-2');
const path = require('path');

// 引入路由文件
const router = require('./app/router');

// 使用模板引擎
app.use(koaNunjucks({
    ext: 'html',
    path: path.join(__dirname, 'app/view'),
    nunjucksConfig: { // 这里是nunjucks的配置
        /*
         *   autoescape (默认值: true) 控制输出是否被转义，查看 Autoescaping
         *   throwOnUndefined (default: false) 当输出为 null 或 undefined 会抛出异常
         *   trimBlocks (default: false) 自动去除 block/tag 后面的换行符
         *   lstripBlocks (default: false) 自动去除 block/tag 签名的空格
         *   watch (默认值: false) 当模板变化时重新加载。使用前请确保已安装可选依赖 chokidar。
         *   noCache (default: false) 不使用缓存，每次都重新编译
         *   web 浏览器模块的配置项
         *      useCache (default: false) 是否使用缓存，否则会重新请求下载模板
         *      async (default: false) 是否使用 ajax 异步下载模板
         *   express 传入 express 实例初始化模板设置
         *   tags: (默认值: see nunjucks syntax) 定义模板语法，查看 Customizing Syntax
         */
        trimBlocks: true
    }
}));

// 使用中间件 处理404
app.use(async (ctx, next) => {
    await next(); // 调用next执行下一个中间件
    if(ctx.status === 404) {
        await ctx.render('404');
    }
});

// 使用koa-router中间件
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
    console.log('App started on http://localhost:3000')
});

// app/router/index.js

const Router = require('koa-router');
const router = new Router();

// koa-router
const index = async (ctx, next) => {
    await ctx.render('index', {title: 'Index', link: 'home'});
};
const home = async (ctx, next) => {
    await ctx.render('index', {title: 'Home', link: 'index'});
};

router.get('/', index);
router.get('/index', index);
router.get('/home', home);

module.exports = router;

我们的路由统一使用了 app/view/index.html 作为模板文件，因此删除没有用到的文件 app/view/home.html ，在 app/view/index.html 中我们接收了传递的参数：

<!--app/view/index.html-->
<h1>{{title}} Page</h1>
<a href="/{{link}}">home</a>

分模块管理路由

为了细化路由，我们将根据业务分开管理路由：

// app/router/home.js

const router = require('koa-router')();

router.get('/', async (ctx, next) => {
    await ctx.render('index', {title: 'Home', link: 'index'});
});

module.exports = router;


// app/router/index.js

const Router = require('koa-router');
const router = new Router();
const home = require('./home');

const index = async (ctx, next) => {
    await ctx.render('index', {title: 'Index', link: 'home'});
};

router.get('/', index);
router.get('/index', index);
router.use('/home', home.routes(), home.allowedMethods()); // 设置home的路由

module.exports = router;

我们将首页相关的业务放到了 app/router/home.js 文件中进行管理，并且在 app/router/index.js中引入了，为 home 分配了一个路径 /home，以后就通过这个路由增加首页相关的功能，重启服务，访问 http://localhost:3000/home 即可看到配置的路由。

为路由增加前缀

// config/config.js

const CONFIG = {
    "API_PREFIX": "/api" // 配置了路由前缀
};
module.exports = CONFIG;


// app/router/index.js

const config = require('../../config/config');

const Router = require('koa-router');
const router = new Router();
router.prefix(config.API_PREFIX); // 设置路由前缀
const home = require('./home');

const index = async (ctx, next) => {
    await ctx.render('index', {title: 'Index', link: 'home'});
};

router.get('/', index);
router.get('/index', index);
router.use('/home', home.routes(), home.allowedMethods()); // 设置home的路由

module.exports = router;


// app.js
const Koa = require('koa');
const app = new Koa();
//...
app.listen(3000, () => {
    console.log('App started on http://localhost:3000/api')
});

<!--app/view/404.html-->
<h1>404</h1>
<a href="/api/index">index</a>

<!--app/view/index.html-->
<h1>{{title}} Page</h1>
<a href="/api/{{link}}">home</a>

重新启动服务，访问 http://localhost:3000/api 和 http://localhost:3000/api/home 即可看到新配置的路由。

完成这一节实战之后，整个文件目录如下：

koa-blog
├── package.json
├── app.js
├── app
│   ├── router
│   |   ├── homde.js
│   |   └── index.js
│   └── view
│       ├── 404.html
│       └── index.html
└── config
    └── config.js

下一步，我们来实现log…

本实战代码已经创建了GitHub仓库：https://github.com/YuQian2015/koa-blog ，欢迎关注。

最后编辑于：2020.09.26 15:29:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,723评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,485评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,998评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,323评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,355评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,079评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,389评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,019评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,519评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,971评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,100评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,738评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,293评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,289评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,517评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,547评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,834评论 2赞 345

从零开始的Koa实战（2） 路由