开发者社区> 答案命运> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 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文件夹进行分组。

image.png

复用静态逻辑

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
边缘计算系统逻辑架构:云、边、端协同,定义及关系
边缘计算系统逻辑架构:云、边、端协同,定义及关系
0 0
【深入浅出之透析RocketMQ原理及实战指南】RocketMQ学习入门指南 | ​​RocketMQ物理和逻辑架构结构精讲​
【深入浅出之透析RocketMQ原理及实战指南】RocketMQ学习入门指南 | ​​RocketMQ物理和逻辑架构结构精讲​
0 0
一文读懂数据网格原理与逻辑架构
数据网格的目标是为从大规模分析数据和历史事实中获取价值奠定基础,并将其应用于不断变化的数据环境、不断增长的数据源和消费者、用例所需转换和处理的多样性以及对变化的反应。
0 0
MySQL的逻辑架构--逻辑架构剖析、SQL执行流程、数据库缓冲池(buffer pool)
MySQL的逻辑架构--逻辑架构剖析、SQL执行流程、数据库缓冲池(buffer pool)
0 0
项目总体逻辑架构详解|学习笔记
快速学习项目总体逻辑架构详解
0 0
MySQL 逻辑架构简介|学习笔记
快速学习 MySQL 逻辑架构简介
0 0
高性能 MySQL(一):逻辑架构
本篇文章主要描述了 MySQL 的服务器架构,以及对每一层服务进行简短的概述。我们可以使用一张图来表示 MySQL 的逻辑架构,这便于我们的理解与记忆。
0 0
+关注
答案命运
人有多自律,就有多自由!
文章
问答
文章排行榜
最热
最新
相关电子书
更多
云原生架构白皮书2022年新版
立即下载
技术揭秘:RocketMQ 5.0 云原生架构升级之路
立即下载
基于英特尔®架构的阿里云服务网格ASM技术加速应用服务加密通
立即下载