对于express的服务端渲染，部分页面的后台服务业务逻辑是一样的，但是页面展示视图不一样，针对这种情况。如何从路由、视图动态选择等不同的方式来分别处理这种情况，本文就列举相关方式具体说明。
1、新建测试demo
mkdir demo
cd demo
npx express-generator --hbs
yarn
可以正常访问http://localhost:3000/,默认是3000端口
2、直接不同路由处理
// 直接修改routers/index.js
// 同时新建一个views/new.hbs,内容跟view/index.hbs一样
var express = require('express');
var router = express.Router();
const getRouteDealFunc = (view) => {
return (req, res, next) => {
//中间省略相同处理逻辑
res.render(view, { title: view });
}
}
/* GET home page. */
router.get('/', getRouteDealFunc('index'));
router.get('/new', getRouteDealFunc('new'));
module.exports = router;
3、视图动态选择
访问同个相似路径，根据其他不同方式(比如query传参、params参数、head设置请求头等)，来选择不同视图渲染
var express = require('express');
var router = express.Router();
router.get('/(:path)?', (req, res, next) => {
console.log(req.params);
let { path = "index" } = req.params;
//中间省略相同处理逻辑
res.render(path, { title: path });
});
module.exports = router;
4、视图路径设置
为了方便各个视图的管理，需要合理分类各个视图路径。在demo/node_modules/express/lib/view.js查看具体的res.render方法,视图具体是通过路径去查找。
var path;
var roots = [].concat(this.root);
debug('lookup "%s"', name);
for (var i = 0; i < roots.length && !path; i++) {
var root = roots[i];
// resolve the path
var loc = resolve(root, name);
var dir = dirname(loc);
var file = basename(loc);
// resolve the file
path = this.resolve(dir, file);
}
return path;
针对这个情况，我们可以方便给视图分类,把detail.hbs,index.hbs,new.hbs全部放在views/game/文件夹下
var express = require('express');
var router = express.Router();
router.get('/(:path)?', (req, res, next) => {
console.log(req.params);
let { path = "index" } = req.params;
//中间省略相同处理逻辑
res.render(`game/${path}`, { title: path });
});
module.exports = router;
