web前端学习（四）：基于koa的EggJs框架，优雅而又完美的Nodejs框架
**前言： **
-
Egg.js为企业级开发应用，而产生的一门Node.js框架
-
它使用模块化渐进式开发，内置多进程管理（Node是单进程，无法使用多核CPU的能力），具有高度可扩展的插件机制。
-
基于Koa开发，性能优异， 框架稳定，测试覆盖率高
1.安装项目
1.安装项目
1.安装模块
mkdir egg_demo 1.建立项目文件夹
yarn create egg --type=simple 2.创建简单类型的项目
yarn install(或者yarn) 3.安装项目依赖的包
2.开启项目
yarn dev 4.开启项目(默认7001端口)
yarn start 5.项目正常运行（但有运行时占用cpu非常大）
yarn 会自动查找模块，所以不需要install,一般也不需要global。 (安装的比较慢，可能需要等待3-4分钟)
yarn start 会在后台开启一个服务，关闭需要使用 yarn stop 结束。 用于项目 上线
yarn dev 可以对当前的变化进行更新。
如果程序在开发时出现线程断开的情况，需要首先考虑 plugin.js和config.default.js 的配置正确与否
2.项目结构
egg-example
├── app 应用程序
│ ├── controller 控制器
│ │ └── home.js
│ ├── public 公有路径
│ ├── service 服务层
│ ├── middleware 中间件
│ ├── view 视图文件
│ └── router.js 路由设置
├── config 配置文件
│ └── config.default.js
└── package.json
2.router路由
1.封装router文件
（1. 在当前位置引入全局应用对象， app/router.js 的对象内添加以下内容
require('./router/default')(app) // 导入模块, 需要添加全局应用对象
（2.新建立router路由文件夹， 创建default.js
module.exports = app=>{
// 单独分离出的路由
const {router,controller} = app
router.get('/default/index',controller.default.home.index)
}
3.controller控制器
1.创建控制器
yarn dev 功能可以对当前的请示结果进行分析。
函数内部必须使用async修饰， 在controller文件夹下新建“mini.js”文件，并填写以下内容。
'use strict';
const Controller = require('egg').Controller;
class MinicatController extends Controller {
async index() {
const { ctx } = this; // 获取当前的上下文对象
ctx.body = '<h1>I am a MiniCat</h1>';
}
async getGirls() {
const { ctx } = this;
await new Promise(resolve => { // 异步单元测试， 等待异步请求结果
setTimeout(() => {
resolve(ctx.body = '<h1>小妹向你走过去啦！</h1>');
});
});
}
}
module.exports = MinicatController;
2.测试控制器
向router添加路由
router.get('/mini', controller.minicat.index); // 添加路由
在test/app/controller 添加 minicat.test.js
'use strict';
const { app } = require('egg-mock/bootstrap');
describe('minicat test', () => {
it('minicat index', () => {
return app.httpRequest()
.get('/mini')
.expect(200)
.expect('<h1>I am a MiniCat</h1>');
});
it('minicat getGirls', () => {
return app.httpRequest()
.get('/getGirls')
.expect(200)
.expect('<h1>小妹向你走过去啦！</h1>');
});
});
4.service 服务层
Service就是在复杂业务场景下用于做业务逻辑封装的一个抽象层。就是把业务逻辑代码进一步细化和分类，所以和数据库交互的代码都放到Service中。这样作有三个明显的好处。
- 保持Controller中的逻辑更加简介。
- 保持业务逻辑的独立性，抽象出来的Service可以被多个Controller调用。
- 将逻辑和展现分离，更容易编写测试用例。
1.创建service服务层
在app下新建立minicat.js文件，并填写以下内容
'use strict';
const Service = require("egg").Service;
class MinicatService extends Service{
// Service方法也是异步方法
async getGirl3(id){
//因为没有真实连接数据库，所以模拟数据
return {
id:id,
name:'小红',
age:18
}
}
}
module.exports =MinicatService;
2.控制器与服务的交互
// // service数据层
async getGirls3(){
const {ctx} = this; // 向服务层传入数据
const res = await ctx.service.minicat.getGirl3(ctx.query.id);
ctx.body = res
}
5.middleware中间件
中间件的作用域是全局，访问不同的页面， 只要添加ctx.session.xxx都会有效 。
1.配置中间件
在config/config.default.js 添加下面的内容
/* 配置中间件 */
config.middleware = [ 'counter' ];
2.创建中间件
官方要求中间件保存在 app/middleware 文件夹下。 其中，middleware是新创建的。
module.exports = options =>{
return async (ctx,next) =>{
if(ctx.session.counter){
ctx.session.counter++;
}else{
ctx.session.counter=1;
}
await next(); // 异步等待下一个方法或者页面，防止页面卡死
}
}
3.路由使用的中间件
在router.js中定义 counter 中间件。
每次访问路由都会执行一次添加，可以认为它是路由访问前，进行一定计数。
只要是调用ctx.session.counter, 次数都会加 1. 但如果路由也使用了这个中间件，则会加 2。
// 启动router中间件
const counter = app.middleware.counter()
router.post('/add1', controller.minicat.add1);
router.post('/show1',counter, controller.minicat.show1);
6.schedule定时任务
官方要求 ，定时任务需要按照Egg的约定，/app目录下，新建shedule文件夹。然后再创建getTime.js文件
作用： 在一定的时间间隔内，对当前的配置进行设置。
创建后定时任务，重启项目后, 即可正常运行
const Subscription = require('egg').Subscription
class GetTime extends Subscription{
static get schedule(){
return {
// interval:'3s', // 间隔时间3s
cron: '*/3 * * * * *', // 间隔时间3s
type:'worker' // 类型
}
}
async subscribe(){ // 方法会自动执行， 一般会去检查配置
console.log(Date.now())
}
}
module.exports = GetTime; // 暴露这个类中的所有方法
// module.exports = { // 只是暴露这个类。
// GetTime:GetTime
// };
// export default GetTime; // es6 暴露方法无效
* * * * * *
┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ |
│ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun)
│ │ │ │ └───── month (1 - 12)
│ │ │ └────────── day of month (1 - 31)
│ │ └─────────────── hour (0 - 23)
│ └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59, optional)
7.public静态资源文件
在public目录下添加 default.css 样式文件
则可以在view模板文件中直接找到
<link rel="stylesheet" href="/public/default.css">
直接访问public下的静态资源：（这是需要添加public路径的框架，但django的static也是需要添加到访问路径当中）
http://localhost:7001/public/assets/file/38e25517-3981-4987-aaf1-8c6c830ea097.jpg
控制器中使用视图文件
async getPage(){
render('hello.html')
}
8.获取数据方法
1.获取Request数据
__get方法
// 自由传参
const username = ctx.query.username;
// 严格传参（path路径）
const params = ctx.params.name
__post方法
>>>>> 注意：egg.js的post方法只遵循标准的x-www-form-urlencoded方式。 form-data不可以
// post请求数据，是保存的请求包体中。使用ctx.request.body
const title = ctx.request.body.title,
__headers请求头数据
// 获取token
const token = ctx.request.headers.token
__url, method请求数据
const url = ctx.request.url /method
__file文件数据
const req = ctx.request.files;
let temp = req[0].filepath //临时文件路径
__response响应数据
ctx.body = { msg:"hello"}
ctx.body = "测试成功" // ctx.body响应结果
2.获取MySQL数据
1.基本操作
// 1.插入数据
const data = {
title: 'Hello World',
username:"xxx",
password:"xxxx"
}
res = await app.mysql.insert(tTable,data); // res2.insertId 可以查看插入的数据
// 2.删除数据
const data = {
id:123 // 根据目标id删除
}
res = await app.mysql.delete(tTable,data );
// 3.更新数据
const data = {
// id:123 // 根据目标id更新
username:'xxx'，
password:'xxxx' //新数据
}
const options = {
where: {
custom_id: 456
}
};
res = await app.mysql.update(tTable,data, options);
// 4.查询数据
const options = {
where: { id: '23',name:'小明' },
columns: ['author', 'title'],
orders: [['created_at','desc'], ['id','desc']],
limit: 10,
offset: 0,
})
// select默认会获取所有数据
res = await app.mysql.select(tTable, options);
// get 查询第一条符合条件的数据
const post = await this.app.mysql.get(tTable, options);
// query方法执行原生sql语句
res = await app.mysql.query(`select * from ${tTable} where ${new_params} `)
2.高级操作
1.事务处理：
// 一般用于两种关联事务的处理。
const conn = await this.app.mysql.beginTransaction(); try {
await conn.insert('user', { 'username': 'hahahh','password':'xxx' });
const row = { id: 8,username: '王麻子'};
await conn.update('user', row);
await conn.commit();
} catch (err) {
await conn.rollback(); // rollback call won't throw err
throw err;
}
**注意： **
1.查询的表不能是有 ‘-'的表，否则查询失败,
2.eggjs支持post请求中的x-www-form-urlencoded格式，form-data格式 不支持
3.编码规范，注意在使用query方法前，对sql语句用unescape进行解码。
4.where， set , values 中的参数值需要是使用引号包含
**5.where 中的参数用and连接，set中的参数用逗号’,'连接 , values中的参数逗号‘,’连接，并用括号“()”包裹 **
6.目前eggjs的mysql中query方法，使用js还是无法生成符合这个方法的日期格式数据。
mysql语句专用的日期格式的 SQL函数: current_timestamp() ， 获取当前时间，不需要引号包裹
7. 插入数据的日期格式就是字符串，使用SQL函数没有效果
// 保存到数据库的时间
// （1.mysql语句专用的日期格式的 SQL函数:
current_timestamp() // 获取当前时间，不需要引号包裹
// （2.获取当前日期的格式化数据
const mysqlDateType = (isvalues=false)=>{
// return (new Date()).toLocaleString()// 下午会出现异常.replace(/[\上\午\下\午]+?/gi,'')
if(isvalues){
// 插入数据的日期格式(自定义的格式化日期函数)
return DateFormat(new Date(),'YYYY-MM-DD HH:mm:ss');
}else{
return 'current_timestamp()'; // 获取当前日期的SQL函数
}
}
3.封装Models模型层
-------- controller控制器中
// 初始化，获取服务层的路径
AdminDataindex = this.ctx.service.admin.dataindex
HomeDataindex = this.ctx.service.home.dataindex
-------- services服务层中
// 执行函数，返回一个模型对象
const User = require("service/models/User")()
// 1.高级获取所有的字段
// sql查询语句， 选择的条件可以是一个数组，但要经过模板字符串转换
const sql = `select ${[...User.fillable,...User.hidden]} from ${User.table}`
// 获取单独的字段
const sql = `select ${User.fillable} from ${User.table}`
// 2.更新部分字段
const sql = `update user_msg set sex='女',token='${token}' where id='${user.id}'`
const res = await ctx.app.mysql.query(sql)
// 3.插入新数据
// 插入默认排序数据
const sql = `insert into user_msg values(NULL,"11","222")`
// 插入部分数据
const sql = `insert into user_msg(id,username,token) values(NULL,"11","222")`
const res = await ctx.app.mysql.query(sql)
// 数据 + 模板字符串，可以生成元组数据，
//（即数据展开状态，但模板字符串是不支持直接使用扩展运算符，将数组展开）
const sql = `insert into ${table}(${keys}) values(${t_values})`;
------ User.js模型层中
'use strict';
function User(){
return {
// 使用的表
table : 'user_msg',
// 主键
primaryKey : 'id',
// 排除的字段
hidden : [
'password',
'token'
] ,
// 可使用的字段
fillable :[
'username',
'sex',
'address',
'registerTime',
'updateTime',
'deleteTime',
'isDelete',
]
}
}
module.exports = User;
4.get,post请求方法
（1.get方法
控制器中编写方法
// 自由传参模式, query
// 则可以选择性添加参数
async getGirls() {
const { ctx } = this;
ctx.body = ctx.query.username;
}
// 严格传参模式 parmas
// 则必需添加相应的参数
async getGirls2(){
const {ctx} = this;
ctx.body = ctx.params.name
}
设置路由
router.get('/getGirls/', controller.minicat.getGirls); // 添加路由
router.get('/getGirls2/:name', controller.minicat.getGirls2); // 添加路由
请求方式
http://127.0.0.1:7001/getGirls?username=111
http://127.0.0.1:7001/getGirls2/20
（2.post方法
CSRF的全名为 Cross-site request forgery， 它的中文名为 伪造跨站请求。
注意：一定要x-www-form-urlencoded方式，form-data格式不可以
- 使用Rest-client插件 ， 在项目下添加一个 test.http
POST http://127.0.0.1:7001/add
Content-Type: application/x-www-form-urlencoded
name = minicat
或者使用JSon格式，注意空行
{
"name":"hello"
}
-
关闭csrf 安全策略
在config/config.default.js 下添加 以下配置项， 然后点击
-
接收post请求参数 和路由配置
// POSt请求
async add(){
const {ctx} = this;
let data = ctx.request.body // 获取数据包中的参数
ctx.body = { satus:200, data:data }
}
// post方法
router.post('/add', controller.minicat.add);
9.模块的使用
1.egg-mysql数据库
安装egg-mysql数据库
yarn add egg-mysql
添加插件配置
在config/plugins.js添加以下内容，
/* egg-mysql */
exports.mysql = {
enable:true,
package:'egg-mysql'
}
在config/config.default.js 添加以下内容
/* 安装mysql插件 */
config.mysql = {
app:true, // 是否挂载到app下
agent:false, // 是否挂载到代理下
client:{
host:'127.0.0.1', // 主机地址
port:'3306',
user:'root',
password:'xxxx',
database:'test-egg' // 数据库名称
}
}
然后创建 utf8mb4 编码格式的数据库 ， 名称为test-egg, 建立grils的表
const res = await app.mysql.insert('girls',data); // 添加
const res= await app.mysql.select('girls',option) // 查询 ，会获取所有数据
const res= await app.mysql.update('girls',data,option) // 更新
const res= await app.mysql.delete('girls',data) // 删除
const res = app.mysql.query('select * from girls where id= ?',[params.id]) // 执行sql语句
注意：
service服务中的数据库操作，必须使用异常捕获，以保证程序的正常运行。
它们也都是在严格环境下，使用CommonJS 引入包的形式开发。
‘use strict’; require (“egg”)
自定义创建的类是从egg 包中继承相应 类， 并把类中的方法全部暴露。 module.exports = XXXService
service和controller中，类里面的方法都是异步方法。即使用async修饰方法， await异步等待。
控制器从service获取数据
注意： 实际上表单上的数据没有Number数字类型，都是字符串。因此，使用字符串查询对应的数据，也可以得到结果。
const params = {id:3 , name:'小白', age:20, skill: '唱歌'}
const res = await ctx.service.testdb.getGirl({id:ctx.query.id} )
const res = await ctx.service.testdb.addGril(params)
const res = await ctx.service.testdb.delGril({id:ctx.query.id} )
2.egg-cors跨域
安装模块
yarn add egg-cors
配置信息 在config/plugins.js添加以下内容
exports.cors = {
enable:true,
package:'egg-cors'
}
在 config/config.default.js 添加以下内容
/* cors跨域 */
config.security = {
csrf: {enable: true},
domainWhiteList: [ 'http://localhost:3000','http://localhost:3001' ] // 白名单
};
config.cors = {
origin: ctx => ctx.get('origin'), //这种方式是允许所有的IP+端口跨域访问
// origin: 'http://localhost:3000', //
credentials: true, // 开启认证
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS'
};
3.egg-jwt身份认证
安装模块
yarn add egg-jwt
配置信息 在config/plugins.js添加以下内容
exports.cors = {
enable:true,
package:'egg-jwt'
}
在 config/config.default.js 添加以下内容
/*jwt认证*/
config.jwt = {
secret: 'AB12XY', // 不能设置为123456
enable: true, // default is false
match: '/jwt', // optional
expiresIn: '24h',
}
middleware中间件使用方法：
'use strict';
module.exports = () => {
return async function jwtErr(ctx, next) {
const headerStr = ctx.request.header.access_token;
if (headerStr) {
try {
console.log(headerStr,ctx.app.config.jwt.secret)
const options = {
secret: ctx.app.config.jwt.secret
}
// 解码token，需传加密时的 secret
const decode = await ctx.app.jwt.verify(headerStr, ctx.app.config.jwt.secret);
ctx.state.user = decode; // 信息存一下，这步很重要，业务里要用
await next();
} catch (error) {
ctx.status = 401;
// 翻译错误码
let message = error.message;
ctx.body = {
code: -1,
msg: message,
};
return;
}
} else {
ctx.status = 401;
ctx.body = {
code: -1,
msg: '没有token，无法访问',
};
return;
}
};
};
controller控制器中使用方法：
// 登录帐号，（返回token）
async login() {
const {ctx, app} = this;
const req = ctx.request.body;
// 空值验证
const errArr = app.validator.validate({
username: 'string',
password: 'string',
}, req);
if (errArr) {
ctx.body = { error:JSON.stringify(errArr), code:403 }
return;
}
let responseData = null;
try {
const params = {
where:{
username:req.username,
password:req.password,
}
}
// 查询是否存在当前用户
const data =await app.mysql.select('user-msg',params);
console.log(data,data.length,data.length > 0)
if (data.length > 0) {
const user = data[0];
const {jwt: {secret, expiresIn}} = app.config;
// 需传 secret 过期时间
const token = app.jwt.sign({
data:{
username: user.username,
password: user.password,
},
}, secret, {
expiresIn,
});
// 更新token
const params = { id:user.id, token:token }
const res = await app.mysql.update('user-msg',params)
responseData = { msg:'登录成功!', token:token, userinfo:user, code:200 }
} else {
responseData = { msg:'登录失败', error:'用户名或密码不正确', code:403 }
}
} catch (err) {
responseData = { msg:"出现异常！", error:err, code:500 }
}
ctx.body = responseData
}
4.egg-validate 验证器
安装模块
yarn add egg-validate
配置信息 在config/plugins.js添加以下内容
exports.cors = {
enable:true,
package:'egg-validate'
}
在 config/config.default.js 添加以下内容
/**验证参数 */
exports.validate = {
// convert: false,
// validateRoot: false,
};
controller中验证使用
// 空值验证
const errArr = app.validator.validate({
username: 'string',
password: 'string',
}, req);
if (errArr) {
ctx.body = { error:JSON.stringify(errArr), code:403 }
return;
}
5.bcryptjs密码加密
安装模块
yarn add bcryptjs
配置信息 在config/plugins.js添加以下内容
exports.cors = {
enable:true,
package:'bcryptjs'
}
使用方法
引入模块
var bcrypt = require("bcryptjs");
var key = bcrypt.genSaltSync(10); // 设置加密密钥
var hashPwd = bcrypt.hashSync("123",key)
var res = bcrypt.compareSync("123",hashPwd) // true
6.file文件保存(框架)
egg接收文件上传_魔笛Love的博客-CSDN博客_ctx.multipart()
首先在config.default.js中配置file文件接收设置，注意在assets下创建一个temp用户保存临时图片的文件夹
/* file文件接收配置 */
config.multipart = {
mode: 'file',
tmpdir: './app/public/assets/temp',
cleanSchedule: {
cron: '0 0 4 * * *',
},
fileSize: '100mb',
whitelist() {
return true;
},
};
接收上传的文件
async avatarUpdate() {
const {ctx, app} = this;
const req = ctx.request.files;
// 临时文件的位置
let res = utils.saveFile(req[0].filepath)
let responseData = null;
if(res)
responseData = { msg:'提交成功！',data:res, code:200 }
else
responseData = { msg:'提交失败！', code:403 }
ctx.body = responseData
}
保存文件的模块
// （9.保存file文件
const saveFile = (file)=>{
try{
let date = Date.now()
let last = Math.floor(Math.random()*(99999-10000+1)+10000)
let filename = date+'.'+last+'.jpg'
let dirname = `/assets/file/${filename}`
// 注意把临时文件的“\”反斜杠转换成"/"下斜杠
let fileData = file.replace(/\\/gi,'\/')
// 当前的运行路径是项目的根目录
let saveDirname = 'app/public'+dirname
console.log("当前写入的位置是",saveDirname)
// // 方法一：分块写入（错误）
// var ws = fs.createWriteStream (saveDirname);
// ws.on('open', ()=> {
// const blockSize = 128;
// const nbBlocks = Math.ceil(fileData.length / (blockSize));
// for (let i = 0; i < nbBlocks; i += 1) {
// const currentBlock = fileData.slice(blockSize * i,
// Math.min(blockSize * (i + 1), fileData.length),);
// ws.write(currentBlock);
// }
// ws.end();
// });
// ws.on('error',(err)=>{console.log(err);reject(null);})
// ws.on('finish',()=>{resolve(dirname)})
// // 方法二：边读边写 （读写只能读一半）
// var rs = fs.createReadStream (fileData ); //创建一个可读流
// var ws =fs.createWriteStream( saveDirname);
// //如果要读取一个可读流中的数据，必须要为可读流绑定一个data事件，data事件绑定完毕，它会自动开始读取数据
// rs.once ( "open" ,function () {});
// rs. once ( "close" , function (){});
// ws.once ( "open" ,function () { });
// ws. once ( "close" , function (){
// rs.end();
// ws.end();
// });
// rs.on ( "data",function (data) {
// console.log (data) ;
// ws.write(data);
// });
// // pipe ( )可以将可读流中的内容，直接输出到可写流中
// rs.pipe (ws) ;
// 方法三：复制临时文件
fs.copyFile(fileData, saveDirname,(err)=>{
if(!err){
console.log('复制成功');
}
})
return dirname
}catch(e){
console.log("error is",e)
return null
}
}
7.jsonwebtoken认证(?)
在service目录下，新建token.js文件：
'use strict';
const Service = require('egg').Service;
const jwt = require('jsonwebtoken');
class TokenService extends Service {
async signJwt(_id) {
return jwt.sign({
data: {
_id,
},
exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24 * 7),
}, 'this is secert key, you can replace it!');
}
async decodeJwt(token) {
try {
return jwt.verify(token, 'this is secert key, you can replace it!');
} catch (err) {
return err;
}
}
}
module.exports = TokenService;
10. view视图EJS模板引擎
服务端渲染的好处
- 对SEO非常友好，单页应用，比如Vue是到客户端才生成的。这种应用对于国内的搜索引擎是没办法爬取的，这样SEO就不会有好的结果。所以如果是官网、新闻网站、博客这些展示类、宣传类的网址，必须要使用服务端渲染技术。
- 后端渲染是老牌开发模式，渲染性能也是得到一致认可的。在PHP时代，这种后端渲染的技术达到了顶峰。
- 对前后端分离开发模式的补充，并不是所有的功能都可以实现前后端分离的。特别现在流行的中台系统，有很多一次登录，处处可用的原则。这时候就需要服务端渲染来帮忙。
EJS是什么
EJS是基于javascript的一种历史悠久的模板引擎，生态良好，性能稳定，得到普遍的认可以及广泛的使用。在php时代就已经是达到了顶峰。
安装与配置环境
yarn add egg-view-ejs
配置环境
在config/config.default.js下添加以下内容
/*配置ejs */
config.view = {
mapping:{ /* 匹配文件 */
'.html':'ejs'
}
}
config.ejs = {
}
在config/plugins.js添加
exports.ejs = {
enable:true,
package:"egg-view-ejs"
}
注意： 首先需要把module.exports 注释， 否则无法暴露这信exports.ejs模块
1.render渲染模板
// ejs模板引擎
async index1(){
const {ctx} = this;
await ctx.render('minicat.html',{
id:2021,
name:'minicat',
age:"18",
skills:['坚持','努力','沉着']
})
// ctx.body = "hello"
// render方法返回的是promise对象，所以需要使用异步
}
2.<%%>模板语法
模块需要放在app/view下， 创建minicat.html ,并在html插入以下内容
// 1.include组合文件
<% include header.html %> // 使用include加载文件，文件内只是一个标签
// 2.=赋值语句
<h2>现在是 // 赋值
<%=id %>
<%=name %>
<%=age %>
</h2>
// 3.for循环遍历
<ul>
<% for(var i=0;i<skills.length;i++){ %> // for循环遍历
<li><%=skills[i] %></li>
<% } %>
</ul>
// 4.if..else条件判断
<%if(islogin){ %
<button>已登录</button>
<%}else { %>
<button>已登录</button>
<%}%>
// 5.<% %> 变量语句
<% var name = "ejs模板" %>
静态css资源
根路径是在app， 只要是默认文件夹，就可以views ， controller 直接找到 ”xxx.html 或者 xxx.js, “,
但是静态资源 public目录下，它并非默认文件夹，属于可修改配置。
/* 修改ejs 配置*/
config.ejs = {
// delimiter: "$" // 修改默认分隔符
}
/* 配置静态文件路径 */
config.static = {
// prefix:'/assets/' // 如果使用，则需要把public 改成static
}
在public目录下添加 default.css 样式文件
则可以在view模板文件中直接找到
<link rel="stylesheet" href="/public/default.css">
11.cookie 和 session存储
1.session的使用
（1.什么是session？
- session和cookie非常类似 ，但session比cookie更加安全，因此session只允许在服务端进行操作。
- session用于保存用户登录信息，和用户信息。而cookie用于保存是否登录 。 重要的信息放在session, 公开或者临时信息存在cookie， 。
（2.session的配置
在config/config.default.js 下添加
/* session的配置 */
config.session = {
key :"PANG_SESS", // 设置Key的默认值
httpOnly:true, // 设置服务端操作
maxAge:1000*60 , // 设置最大有效时间
renew: true, // 页面有访问动作自动刷新session, 一般用于是否需要是否登录
}
（3.session的操作
注意：与cookie不一样的sessionl默认支持中文, 不需要加密与解密。
ctx.session.username = "minicat" 添加session
ctx.session.username = null 删除session
const se = ctx.session.username 获取session
2.cookie的使用
（1. 什么是cookie?
HTTP请求是无状态的，但是在开发时，有些情况是需要知道请求的人是谁的。为了解决这个问题，HTTP协议设计了一个特殊的请求头：
Cookie。服务端可以通过响应头（set-cookie）将少量数据响应给客户端，浏览器会遵循协议将数据保留，并在下一次请求同一个服务的时候带上。
开发者选项的 ”网络导航项（network）“ 或者 ”应用（Application）“， 可以查看cookie的添加信息
**（2.cookie的配置 **
-
**ctx.cookies.set() **
-
第一个是key, 第二个是value, 第三个是配置项 ,这是一个对象的形式
-
maxAge: xxx 以毫秒计数
-
httpOnly:true 服务端专属修改cookie, 客户端不可以通过JS直接使用**
document.cookie 获取cookie**，但对开发都选项的控制台无影响。 -
encrypt:true 允许使用中文设置cookie, 注意，使用ctx.cookie.get.获取数值需要添加这个配置项
ctx.cookies.get("user",{encrypt:true})
-
-
ctx.cookies.get()
-
当获取cookie的时候， 如果使用了中文添加到cookie值时，需要解密，否则返回的结果是undefined;
-
第一个是key，第二是配置项，一般也添加 encrypt: true 来解密。
-
HttpOnly的设置：伪造Cookie来绕过登录是黑客经常使用的一种手段，所以为了安全，Egg.js默认设置只允许服务端来操作Cookie
-
（3.使用实例
视图页面minicat.html
<div>
<button onclick="add()" >增加Cookie</button>
<button onclick="del()" >删除Cookie</button>
<button onclick="editor()" >编辑Cookie</button>
<button onclick="show()" >展示Cookie</button>
</div>
<script>
function add(){
// 原生请求数据的api
fetch("/add",{
method:'post',
headers:{
'Content-type':"application/json"
}
})
}
function del(){
fetch("/del",{
method:'post',
headers:{
'Content-type':"application/json"
}
})
}
function editor(){
fetch("/editor",{
method:'post',
headers:{
'Content-type':"application/json"
}
})
}
function show(){
// fetch类似一个axios，但它是原生的api
fetch("/show",{
method:'post',
headers:{
'Content-type':"application/json"
}
}).then(response=>{
return response.json(); // 首先需要返回一个回调,promise对象
}).then(data=>{ // 再去获取响应结果
console.log(data);
}).catch(err=>{
console.log("错误是",err)
})
}
</script>
控制器 minicat.js
// Cookie的设置
async add(){ // 添加cookie
const ctx = this.ctx
ctx.cookies.set("user",'加入minicat.com ',{
maxAge:1000*60,
httpOnly:true,
encrypt:true
})
ctx.body = {
status:200,
data:"Cookie添加成功"
}
}
async del(){ // 修改cookie
const ctx = this.ctx
ctx.cookies.set("user",'')
ctx.body = {
status:200,
data:"Cookie删除成功"
}
}
async editor(){ // 编辑cookie（略）
const ctx = this.ctx
....
}
async show(){ // 获取cookie
const ctx = this.ctx
ctx.body = {
status:200,
msg:"Cookie获取成功",
data:ctx.cookies.get("user",{
encrypt:true // 返回结果前进行解密
})
}
}
3.fetch的使用
1.什么是fetch？
-
fetch是浏览器提供的原生AJax接口
-
由于原来 的XMLHttpRequest不符合分离原则，基于事件模型处理异步请求逐渐淘汰。
Promise的处理具有更强大的优势。
// fetch类似一个axios，但它是原生的api
fetch("/show",{
method:'post',
headers:{
'Content-type':"application/json"
}
}).then(response=>{
return response.json(); // 首先需要返回一个回调,promise对象
}).then(data=>{ // 再去获取响应结果
console.log(data);
}).catch(err=>{
console.log("错误是",err)
})
2.原生的ajax
var xhttp = new XMLHttpRequest(); // 创建xml对象
xhttp.onreadystatechange = function() { // 设置响应函数
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
}
};
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhttp.open("GET", "/", true); // 准备发送请求
xhttp.send(); // 响应成功后，会触发相应的函数，执行回调函数
12. extend 扩展方法
官方要求扩展必须保存在 app/extend 文件夹下， extend是新创建的文件夹，
application 全局应用对象 app对象 this.app
context 请求上下文 ctx对象 this.ctx
request 请求级别的对象，提供了请求相关的属性和方法 ctx.request对象 this.ctx.request
response 请求级别的对象，提供了相应相关的属性和方法 ctx.response对象 this.ctx.response
helper 帮助函数 ctx.helper对象 this.ctx.helper
1.创建application扩展
1.创建application.js文件， 并添加以下内容
function getTime(){
let now = new Date();
let year = now.getFullYear(); //得到年份
let month = now.getMonth()+1;//得到月份
let date = now.getDate();//得到日期
let hour= now.getHours();//得到小时数
let minute= now.getMinutes();//得到分钟数
let second= now.getSeconds();//得到秒数
let nowTime = year+'年'+month+'月'+date+'日 '+hour+':'+minute+':'+second;
return nowTime;
}
module.exports = { // 暴露模块
// 方法的扩展 app.currentTime()已经成为app下的全局方法
currentTime(){
const current = getTime();
return current;
},
// 属性的扩展 app.timeProp 已经成为app下的全局属性、
// 加入get,就会默认是一个属性，可以直接以属性的形式在`controller`方法里进行调用。
get timeProp(){
return getTime();
}
// 属性的扩展 app.token
set token(t){
let t = 'token';
}
}
2.控制器调用扩展
async getData(){
const {ctx , app} = this
let data = {
nowtime:app.currentTime(), // 调用自定义扩展的全局方法
property:app.timeProp // 调用自定义扩展的全局属性
property2:app.get("timeProp")// 调用自定义扩展的全局属性
}
app.token = "minicat.com"; // 获取属性， 也可以扩展为属性
app.set("token","minicat.com") // 设置属性， 也可以扩展为属性
}
2. 创建context 扩展
1.创建一个context.js文件， 填写以下内容
module.exports = {
// 作用： 将get方法的自由传参query和 post请求传参合并，可以自定义获取参数中的数据
// 扩展ctx的方法
myquery(key){ // 方法扩展
const method = this.request.method
if(method == 'GET'){
return key ? this.query[key] : this.query;
}else{
return key ? this.request.body[key] : this.request.body;
}
}
}
2.控制器调用扩展
// 2.context
async newContext(){
const {ctx} = this ;
// 1.get请求
// 自由传参 ctx.query.username 为空
// 严格传参 ctx.params.name 不允许为空
// 2.post请求
// 获取数据包 ctx.request.body.name 为空
const params = ctx.myquery() // 默认为{}， 使用扩展方法
}
3. 创建request扩展
1.创建一个context.js文件， 填写以下内容
module.exports = {
// 作用：获取请求头上的数据, 一般用户获取 请求头上的token
// 扩展ctx.request属性
get token() {
return this.get("token");
},
};
2.控制器调用扩展
// 3.request
async newRequest(){
const {ctx} = this;
const token = ctx.request.token; // 自定义扩展属性1
const token = ctx.request.get("token"); // 自定义扩展属性2，
const method = ctx.request.method; // 获取默认方法
ctx.body = {
status:200,
body:token,
method:method
}
}
4.创建response扩展
1.创建一个response.js文件， 填写以下内容
module.exports={
// 作用： response 可以设置响应token
// 扩展属性
set token(token){ // 设置响应token
this.set('token',token)
}
};
2.控制器调用扩展
async newResponse(){
const {ctx} = this;
ctx.response.token = "minicat.com"; // 自定义扩展属性1
ctx.response.set("token","minicat.com") // 自定义扩展属性2
ctx.body = { status:200, msg:'成功访问' }
}
5.创建helper扩展
1.创建一个helper.js文件， 填写以下内容
module.exports = {
base64Encode(str = '' ){
return new Buffer(str).toString('base64');
}
}
2.控制器调用扩展
async newResponse(){
const {ctx} = this;
const testBase64 = ctx.helper.base64Encode('jspang.com') // 扩展方法，方法加密
ctx.body = testBase64
}
6.ctx常用的扩展方法
1.请求类的方法
ctx.request 获取请求的数据
ctx.request.header.xxx 获取请求头上的数据
2.响应类的方法
ctx.response 获取请求的数据
3.中间件类的方法
ctx.app.mysql.xxx方法 执行数据库语句（异步方法）
ctx.app.jwt.xxx 方法 执行安装的jwt中间件中的方法
4.数据库类的方法
ctx.service.home. xxx 获取service服务层文件夹下的文件，调用方法
7.config相关配置项
任何在config.webpack.js中添加的配置项
config.xxx= { xxx :xxx }
都能在所有页面中访问到
const abc = app.config.xxx;
或者使用相关的方法
app.xxx(xxxx)
13.项目布署
1.引入模块
使用commonJS语法，只能通过 require 引入包
const qs = require("querystring")
自定义模块
module.exports = {
// 音乐列表
music_box:"music_box"
}
// 引入模块
const table = require("../contant.js")
// 使用模块
table.music_box
在nodejs中，一个包就相当于一个模块，即使暴露了文件内的模块，依旧还有文件这层。这与 es6不同，并且commonjs不支持es6语法引入模块。
es6不用写后缀，但nodejs自定义的模块，就必需写后缀名, 这很大程度上讲，commonjs采用的是严格格式，对引入的文件格式要求比较高
2.项目根目录
不同的语言，取别名的方法有很大的差异， 当前模块适用于多数的webpack打包类型的框架。
安装模块： yarn add module-alias
（1.简单通用方法
----package.json中配置路径，添加下方内容
"_moduleAliases": {
"@root": ".",
"@app": "app"
},
---全局注册取别名模块， 内容添加以下内容（一般是项目的总配置文件）
module.exports = appInfo => {
....
/* 项目取别名 */
require('module-alias/register')
}
---控制器中使用
const func = require("@app/public/utils/func.js")
（2.标准建议方法
修改package.json, 对项目的规范性开发处理的很不好，很容易导致重要文件被不经意间修改,所以建议新建立单独的文件，用于填写重命名规则。
---- 在config项目下添加 config-alias.js文件， 添加以下内容
const moduleAlias = require('module-alias')
// 路径取别名， 当前路径不是根路径，必需查找到上一级“..”
moduleAlias.addAliases({
'@root' : __dirname+"/..",
'@app': __dirname + '/../app',
})
---- 全局注册取别名模块， 内容添加以下内容
module.exports = appInfo => {
....
/* 项目取别名 */
require('./config-alias.js') // 新添加的自定义文件
require('module-alias/register')
}
---- 控制器使用
const func = require("@app/public/utils/func.js")
3.项目布署
yarn dev 开发者模式运行
yarn start 生产模式运行
- 使用yarn start会导致内存占用过高， 对数据库的依赖很大，占用cpu也非常多
- 所以建议使用 yarn dev 开启 egg.js 项目，再考虑使用 mysql的缓存策略。
4.学习总结
1.文件路径引用问题
app是根目录， config是插件配置目录， test是测试目录
-
**
controller**是官方创建目录, 一般被 路由调用 。(eg:
controller.minicat.index) -
**
public**是官方创建目录 , 一般保存css，js等静态文件，但被view内的文件引用，需要采用根目录的形式。 （eg:/public/css/index.css） -
router.js是官方创建文件, 一般是定义路由规则，以及与控制器、中间件的关系 。(eg:
router.get("/index",controller.minicat.index),使用app.middleware.counter()) -
service是自定义官方建议目录, 一般被控制器调用，通过ctx 执行上下文获取路径和函数信息（eg: ctx.service.testdb.addGirl(params)） -
view是自定义官方建议目录, 一般由控制调用，用于返回一个html页面。 这个页面使用EJS模板引擎，将模板语法加入到html页面中。（eg:
ctx.render('minicat.html',{ id:2021, name:'minicat' }） -
middleware是自定义官方建议目录, 一般由内部依赖的属性决定， 因为使用的是箭头函数，所以可以被整体引入和调用依赖属性 使用。（eg:
ctx.session.counter） -
extend是自定义官方建议目录, 根据扩展目录， 只可以 被相应的对象调用。(eg:
app.currentTime() 和 app.timeProp) -
schedule是自定义官方建议目录, 重启服务，自动调用。
2.学习总结：
egg.js是一门具有弹性的框架，可以根据建设网站需要，自由选择是否使用内置配置以及使用其它扩展插件。丰富的生态圈，强大的性能值得我们去学习。
因为采用的是渐近式开发，它的体积虽然比其它node.js框架更加庞大，但它是以轻量化的形式面向开发者使用。基于内置多进程管理，对于系统的处理事件效率和运行的稳定性都是极大的提升。