eggjs學習筆記第三十三天：eggjs建立基類base.js控制器、配置session、建立tool.js服務(svg-captcha驗證碼)

時間 2020-05-19

標籤 eggjs 學習筆記第三十三天 3天建立 base.js base 控制器配置 session tool.js tool 服務 svg captcha 驗證碼欄目 JavaScript 简体版

原文原文鏈接

1、建立基類。

基類的做用：好比說登陸成功失敗，管理員新增編輯成功失敗，角色新增編輯成功失敗，都是有成功回調與失敗回調的，好比展現一個成功的信息失敗的信息，這些東西都是通用的。因此利用基類封裝起來，其餘類繼承這個基類就能實現代碼複用。javascript

controller>admin新建base.jsphp

寫入一個簡單地基類：css

"use strict";

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

class BaseController extends Controller {
  async success() {
    this.ctx.body = "成功";
  }
}

module.exports = BaseController;

其餘的控制器都引入baseController並進行繼承。html

"use strict";

const BaseController = require("../admin/base");

class LoginController extends BaseController {
  async index() {
    console.log("admin");
    await this.ctx.render("admin/login.html");
  }
}

module.exports = LoginController;

在view>admin>public引入success.html和error.html前端

鍵入：java

<%- include ../public/page_header.html %>

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

    <div class="container-fluid">
        <div class="row">
            <%- include ../public/page_sidebar.html %>

                <div class="col-sm-10">

                    <div class="alert alert-success">

                        <h2>操做成功!</h2>

                        <br/>

                        <p>若是您不作出選擇，將在 3秒後跳轉到第一個連接地址。</p>

                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>

<%- include ../public/page_header.html %>

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

    <div class="container-fluid">
        <div class="row">
            <%- include ../public/page_sidebar.html %>
                <div class="col-sm-10">

                    <div class="alert alert-danger">

                        <h2>操做失敗!</h2>

                        <br/>

                        <p>若是您不作出選擇，將在 3秒後跳轉到第一個連接地址。</p>

                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>

配置一個doLogin的路由規則：ajax

router.get("/admin/doLogin", controller.admin.login.doLogin);

controller中寫入：調用基類success方法，傳入重定向的url.npm

async doLogin() {
    await this.success("/admin/login");
  }

這個meta標籤代碼訪問3s後跳轉redirectUrl 就是上面的/admin/loginxcode

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

3s以後跳轉到登陸頁。session

2、配置session

config>config.default.js鍵入

config.session = {
    key: "SESSION_ID",
    maxAge: 864000,
    httpOnly: true,
    encrypt: true,
    renew: true // 延長會話有效期
  };

3、建立tool.js服務

實現驗證碼功能(防止惡意攻擊，惡意灌水) 主要用到了svg-captcha 插件

cnpm install --save svg-captcha

在基類中寫入code方法，使用驗證碼插件

"use strict";

const Controller = require("egg").Controller;
var svgCaptcha = require("svg-captcha");

class BaseController extends Controller {
  async success(redirectUrl) {
    console.log("redirectUrl");
    console.log(redirectUrl);
    await this.ctx.render("admin/public/success", {
      redirectUrl: redirectUrl
    });
  }
  async error(redirectUrl) {
    await this.ctx.render("admin/public/error", {
      redirectUrl: redirectUrl
    });
  }
  async code() {
    var captcha = svgCaptcha.create();
    this.ctx.session.code = captcha.text; //驗證碼上面的信息
    this.ctx.response.type = "image/svg+xml"; // 指定返回的類型
    this.ctx.body = captcha.data; // 給頁面返回一張圖片
  }
}

module.exports = BaseController;

配置路由：

router.get("/admin/code", controller.admin.base.code);

訪問/admin/code，可得：驗證碼圖片

修改login.html中驗證碼邏輯： img的src給成/admin/code，可正常渲染，onclick src綁定隨機數，保證點擊圖片能夠切換驗證碼。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>用戶登陸</title>

    <link rel="stylesheet" href="/public/admin/css/login.css">
  </head>
  <body>
    <div class="container">
      <div id="login">
        <form action="/yuqing/admin.php?m=Public&amp;a=login" method="post" id="myform">
          <input type="hidden" name="ajaxlogin" id="ajaxlogin">
          <input type="hidden" name="ajaxcode" id="ajaxcode">
          <div class="l_title">小米商城後臺管理系統-IT營</div>
          <dl>
            <dd>管理員姓名：<input class="text" type="text" name="username" id="username"></dd>
            <dd>管理員密碼：<input class="text" type="password" name="password" id="password"></dd>
            <dd>驗　證　碼：<input id="verify" type="text" name="verify">
              <img id="verify_img" src="/admin/code" title="看不清？點擊刷新" onclick="javascript:this.src='/admin/code?mt='+Math.random()">
            </dd>
            <dd><input type="submit" class="submit" name="dosubmit" value=""></dd>
          </dl>
        </form>
      </div>
    </div>

  </body>
</html>

驗證碼插件的其餘配置：寬高大小背景顏色等。

async code() {
    var captcha = svgCaptcha.create({
      size: 6,
      fontSize: 50,
      width: 100,
      height: 40,
      background: "#cc9966"
    });
    this.ctx.session.code = captcha.text; //驗證碼上面的信息
    this.ctx.response.type = "image/svg+xml"; // 指定返回的類型
    this.ctx.body = captcha.data; // 給頁面返回一張圖片
  }

驗證碼這種功能前端用，後管也用，因此封裝成公共服務，做以下改造；
app>service下新建tools.js 封裝生成驗證碼方法。

"use strict";

const Service = require("egg").Service;
var svgCaptcha = require("svg-captcha");
class ToolsService extends Service {
  // 生成驗證碼的方法
  async captcha() {
    var captcha = svgCaptcha.create({
      size: 6,
      fontSize: 50,
      width: 100,
      height: 40,
      background: "#cc9966"
    });
    console.log(this.ctx.session.code);
    this.ctx.session.code = captcha.text; //驗證碼上面的信息
    return captcha;
  }
}

module.exports = ToolsService;

在controller下調用以下所示:

async code() {
    var captcha = await this.service.tools.captcha(); // 調用服務的方法生成驗證碼
    this.ctx.session.code = captcha.text; //驗證碼上面的信息
    this.ctx.response.type = "image/svg+xml"; // 指定返回的類型
    this.ctx.body = captcha.data; // 給頁面返回一張圖片
  }

功能依舊，美包包，睡覺！