Eggjs 使用中间件设置全局统一 404 页面

发布于 2020-09-10 15:20:34 字数 1944 浏览 1978 评论 0

Eggjs 默认在没有任何输出的时候，返回的状态就是 404，这是一种情况，还有种情况就是我们本身就没有内容，用户访问了一个错误的 URL 网址，这些情况的 404 我们完全可以自定义一个页面，添加一些样式和功能，提高我们网站的用户体验。

1、首先创建一个中间件

// app\middleware\notFoundHandler.js
'use strict';

module.exports = () => {
  return async function notFoundHandler(ctx, next) {
    await next();
    if (ctx.status === 404) {
      ctx.set('Content-type', 'text/html;charset=utf-8');
      await ctx.render('page404.ejs', {
        pageInfo: {
          title: '未找到页面 - ' + ctx.app.config.appName,
          keywords: '',
          description: '',
        },
      });
    }
  };
};

2、修改 config\config.default.js 文件

config.middleware = ['notFoundHandler'];

3、编辑自定义的 404 模板

app\view\page404.ejs
<!DOCTYPE html>
<html lang="zh-cn">
  <%- include('head', {pageInfo}) -%>
  <body>
    <div id="pjax-container">
      <%- include('header') -%>
      <div class="mainPage">
        <div class="container">
          <div class="col-md-8 col-md-offset-2">
            <div class="wt-container">
              <div class="wp-info wp-info-danger">
                <div class="wp-info-icon"><i class="fa fa-times"></i></div>
                <h3>404.Page not found!</h3>
                <p>
                  您查找的内容可能被删除或者更换了名字，亦或者是您手残输错误，当然不排除阁下人品问题，也有可能是电信网通那头接口生锈了。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <%- include('footer') -%>
    </div>
    <%- include('foot') -%>
  </body>
</html>

分享到QQ

分享到微博