使用路由

• /Koa實戰/routes/index.js

const Router = require('koa-router'); const router = new Router();router.get('/', ctx => {ctx.body = 'index'; });module.exports = router

• /Koa實戰/routes/users.js

const Router = require('koa-router'); const router = new Router({prefix: ’/users‘});router.get('/', ctx => {ctx.body = 'user'; });module.exports = router

• 使用: /Koa實戰/index.js

const index = require("./routes/index"); const users = require("./routes/users"); app.use(index.routes()); app.use(users.routes());

• 說明:

new Router(prefix, '/users'): 是給請求的路徑加一個請求前綴,即url請求 ‘/users’,在本地只需使用 app.get('/')即可

使用時,先導入,然后使用’koa-router’的固定語法app.use(xxx.routes())來將自己的模塊變為中間件

使用模板引擎

• npm i koa-hbs@next -S
• /Koa實戰/routes/index.js

const hbs = require("koa-hbs"); app.use(hbs.middleware({viewPath: __dirname + '/views', // 視圖根目錄defaultLayout: 'layout', // 默認布局頁面partialsPath: __dirname + '/views/partials',disableCache: true // 開始階段不緩存 }));

• 參數說明:

viewPath: __dirname + '/views': 定義了視圖的根目錄為 ‘/views’

defaultLayout: 'layout': 會將 /views/layout.hbs 作為默認布局

router.get('/', async ctx=>{await ctx.render('index')}): 表示,用/views/index.hbs 代替 /views/layout.hbs 中的 ‘{{body}}’

監聽users路由,并使用koa-hbs渲染

• 以下代碼可以實現,node后端監聽 ‘localhost:3000/users’

const Router = require('koa-router'); const router = new Router({ prefix: '/users' });router.get('/', async ctx=>{await ctx.render("users",{title: "用戶列表",subTitle: "handlers語法",isShow: true,username: "Jerry",users:[{ username: "tom", age: 20 }, { username: "jerry", age: 21 }]}) })module.exports = router;

• 說明:

await ctx.render("users", params): 使用users.hbs代替 layout中的{{body}}部分

能夠使用await ctx.render的原因是,做了如下配置:

const hbs = require("koa-hbs"); app.use(hbs.middleware({viewPath: __dirname + '/views',defaultLayout: 'layout',partialsPath: __dirname + 'views/partials',disableCache: true }))

總結

以上是生活随笔為你收集整理的koa --- 监听路由,并使用模板引擎渲染显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。