Egg.js中復用靜態(tài)頁面邏輯、局部刷新架構、生成驗證碼
-
安裝插件
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文件夾進行分組。
復用靜態(tài)邏輯
-
把需要復用的靜態(tài)頁面抽離到一個文件夾中。
-
在需要復用的地方,通過下面的方式進行引入。
<% include ../public/page_header.html %>復制代碼
配置局部刷新架構
之所以要配置局部刷新架構,就是希望當我們點擊某個鏈接的時候,能夠保存原有的狀態(tài),例如瀏覽器導航欄的狀態(tài)。
配置局部刷新的核心在于跳轉路由的時候,通過target指向iframe。
基于Serverless的Egg.js后臺管理系統(tǒng)配置Session
騰訊云的Serverless云函數(shù)如果30分鐘內沒有訪問的話就會銷毀容器,所以如果session要保存30分鐘以上的話,就需要把session存儲到數(shù)據(jù)庫中。
配置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; }復制代碼
-
靜態(tài)頁面獲取驗證碼
靜態(tài)驗證碼獲取驗證碼是通過訪問路由,讓控制器返回圖片來實現(xiàn)的。
dd>驗 證 碼:復制代碼
-
將驗證碼保存在session中
this.ctx.session.code = captcha.text;復制代碼
如果你想復用上述的驗證碼邏輯,可以通過下面的方式進行封裝。
-
首先在app文件夾下創(chuàng)建service文件夾,并在service文件夾下創(chuàng)建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; }
版權聲明:本文內容轉發(fā)自阿里云社區(qū),由阿里云實名注冊用戶自發(fā)貢獻!版權歸原作者所有。本站不擁有其著作權,亦不承擔相應法律責任。如果您發(fā)現(xiàn)本文中有涉嫌抄襲的內容,請聯(lián)系站內客服,本站將立刻刪除涉嫌侵權內容。