路由(Router)
Router 主要用來描述請求 URL 和具體承擔執行動作的 Controller 的對應關係, 框架約定了 app/router.js 文件用於統一所有路由規則。
通過統一的配置,我們可以避免路由規則邏輯散落在多個地方,從而出現未知的衝突,集中在一起我們可以更方便的來查看全局的路由規則。
如何定義 Router
app/router.js 裏面定義 URL 路由規則
// app/router.js
module.exports = app => {
const { router, controller } = app;
router.get('/user/:id', controller.user.info);
};
app/controller 目錄下面實現 Controller
// app/controller/user.js
class UserController extends Controller {
async info() {
const { ctx } = this;
ctx.body = {
name: `hello ${ctx.params.id}`,
};
}
}
這樣就完成了一個最簡單的 Router 定義,當用戶執行 GET /user/123,user.js 這個裏面的 info 方法就會執行。
Router 詳細定義說明
下面是路由的完整定義,參數可以根據場景的不同,自由選擇:
router.verb(‘path-match’, app.controller.action);
router.verb(‘router-name’, ‘path-match’, app.controller.action);
router.verb(‘path-match’, middleware1, …, middlewareN, app.controller.action);
router.verb(‘router-name’, ‘path-match’, middleware1, …, middlewareN, app.controller.action);
路由完整定義主要包括5個主要部分:
verb - 用戶觸發動作,支持 get,post 等所有 HTTP 方法,後面會通過示例詳細說明。
router.head - HEAD
router.options - OPTIONS
router.get - GET
router.put - PUT
router.post - POST
router.patch - PATCH
router.delete - DELETE
router.del - 由於 delete 是一個保留字,所以提供了一個 delete 方法的別名。
router.redirect - 可以對 URL 進行重定向處理,比如我們最經常使用的可以把用戶訪問的根目錄路由到某個主頁。
router-name 給路由設定一個別名,可以通過 Helper 提供的輔助函數 pathFor 和 urlFor 來生成 URL。(可選)
path-match - 路由 URL 路徑。
middleware1 - 在 Router 裏面可以配置多個 Middleware。(可選)
controller - 指定路由映射到的具體的 controller 上,controller 可以有兩種寫法:
app.controller.user.fetch - 直接指定一個具體的 controller
‘user.fetch’ - 可以簡寫爲字符串形式
注意事項
在 Router 定義中, 可以支持多個 Middleware 串聯執行
Controller 必須定義在 app/controller 目錄中。
一個文件裏面也可以包含多個 Controller 定義,在定義路由的時候,可以通過 {functionName} 的方式指定對應的 Controller。
Controller 支持子目錄,在定義路由的時候,可以通過 {fileName}.${functionName} 的方式制定對應的 Controller。
下面是一些路由定義的方式:
// app/router.js
module.exports = app => {
const { router, controller } = app;
router.get('/home', controller.home);
router.get('/user/:id', controller.user.page);
router.post('/admin', isAdmin, controller.admin);
router.post('/user', isLoginUser, hasAdminPermission, controller.user.create);
router.post('/api/v1/comments', controller.v1.comments.create); // app/controller/v1/comments.js
};
RESTful 風格的 URL 定義
如果想通過 RESTful 的方式來定義路由, 我們提供了 app.router.resources(‘routerName’, ‘pathMatch’, controller) 快速在一個路徑上生成 CRUD 路由結構。
// app/router.js
module.exports = app => {
const { router, controller } = app;
router.resources('posts', '/api/posts', controller.posts);
router.resources('users', '/api/v1/users', controller.v1.users); // app/controller/v1/users.js
};
上面代碼就在 /posts 路徑上部署了一組 CRUD 路徑結構,對應的 Controller 爲 app/controller/posts.js 接下來, 你只需要在 posts.js 裏面實現對應的函數就可以了。
Method Path Route Name Controller.Action
GET /posts posts app.controllers.posts.index
GET /posts/new new_post app.controllers.posts.new
GET /posts/:id post app.controllers.posts.show
GET /posts/:id/edit edit_post app.controllers.posts.edit
POST /posts posts app.controllers.posts.create
PUT /posts/:id post app.controllers.posts.update
DELETE /posts/:id post app.controllers.posts.destroy
// app/controller/posts.js
exports.index = async () => {};
exports.new = async () => {};
exports.create = async () => {};
exports.show = async () => {};
exports.edit = async () => {};
exports.update = async () => {};
exports.destroy = async () => {};
如果我們不需要其中的某幾個方法,可以不用在 posts.js 裏面實現,這樣對應 URL 路徑也不會註冊到 Router。
router 實戰
下面通過更多實際的例子,來說明 router 的用法。
參數獲取
Query String 方式
// app/router.js
module.exports = app => {
app.router.get('/search', app.controller.search.index);
};
// app/controller/search.js
exports.index = async ctx => {
ctx.body = `search: ${ctx.query.name}`;
};
// curl http://127.0.0.1:7001/search?name=egg
參數命名方式
// app/router.js
module.exports = app => {
app.router.get('/user/:id/:name', app.controller.user.info);
};
// app/controller/user.js
exports.info = async ctx => {
ctx.body = `user: ${ctx.params.id}, ${ctx.params.name}`;
};
// curl http://127.0.0.1:7001/user/123/xiaoming
複雜參數的獲取
路由裏面也支持定義正則,可以更加靈活的獲取參數:
// app/router.js
module.exports = app => {
app.router.get(/^\/package\/([\w-.]+\/[\w-.]+)$/, app.controller.package.detail);
};
// app/controller/package.js
exports.detail = async ctx => {
// 如果請求 URL 被正則匹配, 可以按照捕獲分組的順序,從 ctx.params 中獲取。
// 按照下面的用戶請求,`ctx.params[0]` 的 內容就是 `egg/1.0.0`
ctx.body = `package:${ctx.params[0]}`;
};
// curl http://127.0.0.1:7001/package/egg/1.0.0
表單內容的獲取
// app/router.js
module.exports = app => {
app.router.post('/form', app.controller.form.post);
};
// app/controller/form.js
exports.post = async ctx => {
ctx.body = `body: ${JSON.stringify(ctx.request.body)}`;
};
// 模擬發起 post 請求。
// curl -X POST http://127.0.0.1:7001/form --data ‘{“name”:“controller”}’ --header ‘Content-Type:application/json’
附:
這裏直接發起 POST 請求會報錯:‘secret is missing’。錯誤信息來自 koa-csrf/index.js#L69 。
原因:框架內部針對表單 POST 請求均會驗證 CSRF 的值,因此我們在表單提交時,請帶上 CSRF key 進行提交,可參考安全威脅csrf的防範
注意:上面的校驗是因爲框架中內置了安全插件
egg-security,提供了一些默認的安全實踐,並且框架的安全插件是默認開啓的,如果需要關閉其中一些安全防範,直接設置該項的
enable 屬性爲 false 即可。
「除非清楚的確認後果,否則不建議擅自關閉安全插件提供的功能。」
這裏在寫例子的話可臨時在 config/config.default.js 中設置
exports.security = {
csrf: false
};
表單校驗
// app/router.js
module.exports = app => {
app.router.post('/user', app.controller.user);
};
// app/controller/user.js
const createRule = {
username: {
type: 'email',
},
password: {
type: 'password',
compare: 're-password',
},
};
exports.create = async ctx => {
// 如果校驗報錯,會拋出異常
ctx.validate(createRule);
ctx.body = ctx.request.body;
};
// curl -X POST http://127.0.0.1:7001/user --data ‘[email protected]&password=111111&re-password=111111’
重定向
內部重定向
// app/router.js
module.exports = app => {
app.router.get('index', '/home/index', app.controller.home.index);
app.router.redirect('/', '/home/index', 302);
};
// app/controller/home.js
exports.index = async ctx => {
ctx.body = 'hello controller';
};
// curl -L http://localhost:7001
外部重定向
// app/router.js
module.exports = app => {
app.router.get('/search', app.controller.search.index);
};
// app/controller/search.js
exports.index = async ctx => {
const type = ctx.query.type;
const q = ctx.query.q || 'nodejs';
if (type === 'bing') {
ctx.redirect(`http://cn.bing.com/search?q=${q}`);
} else {
ctx.redirect(`https://www.google.co.kr/search?q=${q}`);
}
};
// curl http://localhost:7001/search?type=bing&q=node.js
// curl http://localhost:7001/search?q=node.js
中間件的使用
如果我們想把用戶某一類請求的參數都大寫,可以通過中間件來實現。 這裏我們只是簡單說明下如何使用中間件,更多請查看 中間件。
// app/controller/search.js
exports.index = async ctx => {
ctx.body = `search: ${ctx.query.name}`;
};
// app/middleware/uppercase.js
module.exports = () => {
return async function uppercase(ctx, next) {
ctx.query.name = ctx.query.name && ctx.query.name.toUpperCase();
await next();
};
};
// app/router.js
module.exports = app => {
app.router.get('s', '/search', app.middleware.uppercase(), app.controller.search)
};
// curl http://localhost:7001/search?name=egg
太多路由映射?
如上所述,我們並不建議把路由規則邏輯散落在多個地方,會給排查問題帶來困擾。
若確實有需求,可以如下拆分:
// app/router.js
module.exports = app => {
require('./router/news')(app);
require('./router/admin')(app);
};
// app/router/news.js
module.exports = app => {
app.router.get('/news/list', app.controller.news.list);
app.router.get('/news/detail', app.controller.news.detail);
};
// app/router/admin.js
module.exports = app => {
app.router.get('/admin/user', app.controller.admin.user);
app.router.get('/admin/log', app.controller.admin.log);
};