灏天阁

Node/Koa2[23]: 404页和错误页

· Yin灏

目录结构

└─src
    ├─api.js
    ├─routes
    │  └─view
    │      └─error.js
    └─views
        ├─404.ejs
        └─error.ejs

404.ejs 模板

src/views/404.ejs

<%- include('layout/header', { title: '微博 - 404', isNav: true }) %>
<!-- ... -->
<%- include('layout/footer') %>

error.ejs 模板

src/views/error.ejs

<%- include('layout/header', { title: '微博 - 错误页', isNav: true }) %>
<!-- ... -->
<%- include('layout/footer') %>

路由处理

src/routes/view/error.js

const router = require("koa-router");
// 错误页
router.get("/error", async (ctx, next) => {
  await ctx.render("error");
});
// 404
router.get("*", async (ctx, next) => {
  await ctx.render("404");
});
module.exports = router;

app.js 注册路由

src/api.js

//...
const errorViewRouter = require("./routes/view/error");
const { isProd } = require("./utils.env");
//...
// 配置错误路由的展示
const onerrorConf = {};

if (isProd) {
  onerrorConf = {
    redirect: "/error",
  };
}

onerror(app, onerrorConf);
//...
// 放在路由注册的最下面
app.use(errorViewRouter.routes(), errorViewRouter.allowedMethods());

- Book Lists -