Egg.js中複用靜态頁面邏輯、局部重新整理架構、生成驗證碼

這是我參與11月更文挑戰的第12天，活動詳情檢視： 2021最後一次更文挑戰

配置ejs模闆引擎

• 安裝插件

npm i egg-view-js
複制代碼      

• 在plugin.js中添加下列代碼

module.exports = {
  // had enabled by egg
  static: {
    enable: true
  },
  ejs: {
    enable: true,
    package: 'egg-view-ejs'
  }
}
複制代碼      

• 在config.default.js中添加下列代碼

const userConfig = {
    view: {
      mapping: {
        '.html': 'ejs'
      }
    }
  }
複制代碼      

對視圖進行分組

将所有的頁面都放在view檔案夾中是不合理的，是以可以将view檔案夾進行分組。

複用靜态邏輯

1. 把需要複用的靜态頁面抽離到一個檔案夾中。
2. 在需要複用的地方，通過下面的方式進行引入。

<% include ../public/page_header.html %>
複制代碼      

配置局部重新整理架構

之是以要配置局部重新整理架構，就是希望當我們點選某個連結的時候，能夠儲存原有的狀态，例如浏覽器導航欄的狀态。

配置局部重新整理的核心在于跳轉路由的時候，通過target指向iframe。

<li class="list-group-item"> <a href="/admin/role/add" target="rightMain">增加角色</a></li>
<iframe name="rightMain" src="/admin/welcome" frameborder="0" width="100%" height="500"></iframe>
複制代碼      

基于Serverless的Egg.js背景管理系統配置Session

騰訊雲的Serverless雲函數如果30分鐘内沒有通路的話就會銷毀容器，是以如果session要儲存30分鐘以上的話，就需要把session存儲到資料庫中。

配置session

• 在config.default.js

config.session = {
    key: 'session_id_test',
    maxAge: 30*60*1000;
    httpOnly: true,
    encrypt: true,
    renew: true
  }
複制代碼      

• 在控制器中設定session

this.ctx.session.username = "張三";
複制代碼      

• 在控制器中讀取session

this.ctx.body = this.ctx.session.username;
複制代碼      

生成圖形驗證碼

1. 安裝依賴

npm install --save svg-captcha
複制代碼      

1. 在控制器中進行下面的定義

const svgCaptcha = require('svg-captcha');
  // 驗證碼子產品
  async captcha() {
    const captcha = svgCaptcha.create({
      size: 4,
      fontSize: 50,
      width: 100,
      height: 40,
      background: "#cc9966"
    });
    console.log(captcha.text);
    this.ctx.response.type = 'image/svg+xml';
    this.ctx.body = captcha.data;
  }
複制代碼      

1. 靜态頁面擷取驗證碼

靜态驗證碼擷取驗證碼是通過通路路由，讓控制器傳回圖檔來實作的。

dd>驗　證　碼：<input id="verify" type="text" name="verify">
<img id="verify_img" src="/admin/login/captcha" title="看不清？點選重新整理" onclick="javascript:this.src='/admin/login/captcha?mt='+Math.random()">
</dd>
複制代碼      

1. 将驗證碼儲存在session中

this.ctx.session.code = captcha.text;
複制代碼      

如果你想複用上述的驗證碼邏輯，可以通過下面的方式進行封裝。

• 首先在app檔案夾下建立service檔案夾，并在service檔案夾下建立tools.js

'use strict';
const Service = require('egg').Service;
const svgCaptcha = require('svg-captcha');
class ToolsService extends Service {
  async getCaptcha() {
    const captcha = svgCaptcha.create({
      size: 4,
      fontSize: 50,
      width: 100,
      height: 40,
      background: "#cc9966"
    });
    return captcha;
  }
}
module.exports = ToolsService;
複制代碼      

• 在控制器中調用即可

async captcha() {
    let captcha = await this.service.tools.getCaptcha();
    console.log(captcha.text);
    // 将驗證碼儲存在session中
    this.ctx.session.code = captcha.text;
    this.ctx.response.type = 'image/svg+xml';
    this.ctx.body = captcha.data;
  }