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

配置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文件夹进行分组。

复用静态逻辑

把需要复用的静态页面抽离到一个文件夹中。
在需要复用的地方，通过下面的方式进行引入。

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

配置局部刷新架构

之所以要配置局部刷新架构，就是希望当我们点击某个链接的时候，能够保存原有的状态，例如浏览器导航栏的状态。

配置局部刷新的核心在于跳转路由的时候，通过target指向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;复制代码

生成图形验证码

安装依赖

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>验　证　码：看不清？点击刷新复制代码

将验证码保存在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; }