Egg.js中复用静态页面逻辑、局部刷新架构、生成验证码

npm i egg-view-js
复制代码

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

const userConfig = {
    view: {
      mapping: {
        '.html': 'ejs'
      }
    }
  }
复制代码

<% include ../public/page_header.html %>
复制代码

<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>
复制代码

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

this.ctx.session.username = "张三";
复制代码

this.ctx.body = this.ctx.session.username;
复制代码

npm install --save svg-captcha
复制代码

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;
  }
复制代码

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>
复制代码

this.ctx.session.code = captcha.text;
复制代码

'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;
  }