Eggjs 使用中间件设置全局统一 404 页面 - 文章教程

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

发布于 2020-09-10 字数 2131 浏览 1575 评论 0

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

Eggjs 使用中间件设置全局统一 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>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0