egg学习笔记第十四天：eggjs控制器基类BaseController、控制器兼容写法

时间 2020-04-21

标签 egg 学习笔记第十四天 4天 eggjs 控制器 basecontroller 兼容写法繁體版

原文原文链接

1、实现一个小功能，首页是登陆注册按钮，点击跳转到对应页面进行登陆or注册操做，成功跳转到对应成功or失败页面，3s后再返回首页。相似于淘宝支付完成以后的效果。则：

①配置/login /register /doLogin /doRegister路由javascript

"use strict";

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get("/", controller.home.index);
  router.get("/login", controller.user.login);
  router.get("/register", controller.user.register);
  router.post("/doLogin", controller.user.doLogin);
  router.post("/doRegister", controller.user.doRegister);
};

②改造home>index方法，渲染home模板（前提配置ejs）html

"use strict";

const Controller = require("egg").Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render("home");
  }
}

module.exports = HomeController;

③编写user controllerjava

"use strict";

const Controller = require("egg").Controller;

class UserController extends Controller {
  async login() {
    const { ctx } = this;
    await ctx.render("login");
  }
  async register() {
    const { ctx } = this;
    await ctx.render("register");
  }
  async doLogin() {
    const { ctx } = this;
    console.log(ctx.request.body);
    await ctx.render("public/success", {
      url: "/"
    });
  }
  async doRegister() {
    const { ctx } = this;
    console.log(ctx.request.body);
    await ctx.render("public/error", {
      url: "/"
    });
  }
}

module.exports = UserController;

④编写设置全局模板csrf值得中间件并配置。es6

module.exports = (option, app) => {
  return async function auth(ctx, next) {
    //设置模板全局变量
    ctx.state.csrf = ctx.csrf;
    await next();
  };
};

config.middleware = ["auth"];

⑤配置5个模板app

error.htmlasync

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <h1 style="color:red">登陆失败...3s后自动跳转</h1>

  </body>
</html>

success.htmlpost

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="refresh" content="3;url=/">
    <title>Document</title>
  </head>
  <body>
    <h1 style="color:green">登录成功...3s后自动跳转</h1>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <h2>
      eggjs控制器基类BaseController演示
    </h2>
    <a href="/login">登陆</a>

    <a href="/register">注册</a>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆页面</title>
  </head>
  <body>
    <h2>登陆页面</h2>
    <form action="/doLogin" method="POST">
      <input type="hidden" name="_csrf" value="<%=csrf%>">
      用户名：<input type="text" name="username"><br>
      密码：<input type="password" name="password"><br>
      <button type="submit">提交</button>

    </form>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
  </head>
  <body>
    <h2>注册页面</h2>
    <form action="/doRegister" method="POST">
      <input type="hidden" name="_csrf" value="<%=csrf%>">
      用户名：<input type="text" name="username"><br>
      密码：<input type="password" name="password"><br>
      <button type="submit">提交</button>

    </form>
  </body>
</html>

以上操做步骤可实现上述效果。注意这句meta标签能够实现3s跳转到/url

<meta http-equiv="refresh" content="3;url=/">

随后咱们发现若是不少页面都须要跳转success或者error页面，代码会显得十分冗杂，因此咱们能够经过es6中继承的方式封装controller基类。

2、eggjs控制器基类BaseController

按照类的方式编写Controller，不只可让咱们更好的对Controller层代码进行抽象（例如将一些统一的处理抽象成一些私有方法），还能够经过自定义Controller基类的方式封装应用中的经常使用方法，因此咱们能够将以上代码作一些改造：

① app下新建core文件夹，在新建base.js，键入：导出一个基类，写入一些公共方法。

"use strict";

const Controller = require("egg").Controller;

class BaseController extends Controller {
  async getUserInfo() {
    const { ctx } = this;
    return {
      name: "董文杰",
      age: 18
    };
  }
  async success(redirectUrl) {
    const { ctx } = this;
    await ctx.render("public/success", {
      redirectUrl
    });
  }
  async error(redirectUrl) {
    const { ctx } = this;
    await ctx.render("public/error", {
      redirectUrl
    });
  }
}

module.exports = BaseController;

②在user controller作改造，引入基类，并继承基类，也能实现上述效果，并且代码会显得很清晰

"use strict";

// const Controller = require("egg").Controller;
const BaseController = require("../core/base");
class UserController extends BaseController {
  async login() {
    const { ctx } = this;
    await ctx.render("login");
  }
  async register() {
    const { ctx } = this;
    await ctx.render("register");
  }
  async doLogin() {
    await this.success("/");
  }
  async doRegister() {
    await this.error("/");
  }
}

module.exports = UserController;

3、控制器兼容性写法

这俩是同样的效果，官方推荐第一种。

出去玩咯。