koa --- > 监听路由,并使用模板引擎渲染显示

使用路由

• /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());

• 说明:

1. new Router(prefix, '/users'): 是给请求的路径加一个请求前缀,即url请求 ‘/users’,在本地只需使用 app.get('/')即可
2. 使用时,先导入,然后使用’koa-router’的固定语法app.use(xxx.routes())来将自己的模块变为中间件

使用模板引擎

• npm i [email protected] -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    // 开始阶段不缓存
}));

• 参数说明:

1. viewPath: __dirname + '/views': 定义了视图的根目录为 ‘/views’
2. defaultLayout: 'layout': 会将 /views/layout.hbs 作为默认布局
3. 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;

• 说明:

1. await ctx.render("users", params): 使用users.hbs代替 layout中的{{body}}部分
2. 能够使用await ctx.render的原因是,做了如下配置:

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