This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Configure the EJS template engine

  • Installing a plug-in
npm i egg-view-js
Copy the code
  • Add the following code to plugin.js
module.exports = {
  // had enabled by egg
  static: {
    enable: true
  },
  ejs: {
    enable: true.package: 'egg-view-ejs'}}Copy the code
  • Add the following code to config.default.js
const userConfig = {
    view: {
      mapping: {
        '.html': 'ejs'}}}Copy the code

Group views

It doesn’t make sense to put all your pages in a View folder, so you can group the View folders.

Reuse static logic

  1. Pull the static pages that need to be reused into a folder.

  2. Where reuse is required, introduce it in the following way.

<% include .. /public/page_header.html %>Copy the code

Configure the local refresh schema

The partial refresh architecture is designed to save the original state, such as the state of the browser navigation bar, when we click on a link.

The core of configuring partial refresh is to point to the IFrame through the target when jumping to the route.

<li class="list-group-item"> <a href="/admin/role/add" target="rightMain">Increase the role of</a></li>
<iframe name="rightMain" src="/admin/welcome" frameborder="0" width="100%" height="500"></iframe>
Copy the code

Session configuration based on Serverless egg.js background management system

The Serverless cloud function of Tencent Cloud will destroy the container if it is not accessed within 30 minutes, so if the session is to be saved for more than 30 minutes, it needs to be stored in the database.

Configuration of the session

  • In the config. Default. Js
  config.session = {
    key: 'session_id_test'.maxAge: 30*60*1000;
    httpOnly: true.encrypt: true.renew: true
  }
Copy the code
  • Set session in the controller
this.ctx.session.username = "Zhang";
Copy the code
  • Read session from the controller
this.ctx.body = this.ctx.session.username;
Copy the code

Generate graphic captcha

  1. Install dependencies
npm install --save svg-captcha
Copy the code
  1. Do the following definition in the controller
const svgCaptcha = require('svg-captcha');
  // Verification code module
  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;
  }
Copy the code
  1. Static page to obtain the verification code

Static verification code The verification code is obtained by accessing the route and asking the controller to return a picture.

Dd > verification code:<input id="verify" type="text" name="verify">
<img id="verify_img" src="/admin/login/captcha" title="Can't see? Hit Refresh" onclick="javascript:this.src='/admin/login/captcha? mt='+Math.random()">
</dd>
Copy the code
  1. Save the verification code in the session
this.ctx.session.code = captcha.text;
Copy the code

If you want to reuse the captcha logic above, you can encapsulate it in the following way.

  • First create the service folder under the app folder and tools.js under the service folder
'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"
    });
    returncaptcha; }}module.exports = ToolsService;
Copy the code
  • Call it in your controller
async captcha() {
    let captcha = await this.service.tools.getCaptcha();
    console.log(captcha.text);
    // Save the verification code in session
    this.ctx.session.code = captcha.text;
    this.ctx.response.type = 'image/svg+xml';
    this.ctx.body = captcha.data;
  }
Copy the code