本章前沿：最近更新的比较频繁，实际上是在还之前欠下的章节，react和ts板块，还是会继续更新的，之所以最近在写egg的东西，是因为，我觉得这玩意还不错，很感兴趣，所以我就记录一下我跟着大佬学习的过程，当然啦，目前为止都是基础内容，没有涉及到更深的，而且我之前也说过了，你会java或者php的建议就不要看了，没必要。
回到本章内容，这一章，主要讲的是关于用于egg的一些插件。
一、egg-view-nunjucks （view的模板渲染）
使用模板引擎
1、npm install --save egg-view-nunjucks
2、在plugin.js文件中引入插件，在config.default.js中配置插件
3、在view目录中创建模板文件，并在控制器中使用render方法渲染模板
下载完插件，我们必须进行一些模板的配置
在plugin.js里面：
nunjucks:{
enable:true,
package:'egg-view-nunjucks'
}
在config.default.js里面:
config.view = {
defaultViewEngine:'nunjucks'
}
配置好了这些呢，可以写个水果列表的demo来看下效果，首先我们在app文件夹下面创建一个view文件夹,在view文件夹下面创建index.html。
Document
水果列表
{% for item in fruits %}
- {{item}}
{% endfor %}
html文件写完，此时我们需要引用这个模板，才能显示，还需要传入我们定义的fruits数组，我们只需要再去控制器里面写上await ctx.render("index", { fruits: ["香蕉", "苹果", "西瓜"] })
'use strict'; //严格模式
const Controller = require('egg').Controller; //Controller类
class HomeController extends Controller { //定义一个新的类去继承Controller类
async index() {
const {
ctx
} = this;
await ctx.render("index", {
fruits: ["香蕉", "苹果", "西瓜"]
})
}
}
module.exports = HomeController; //暴露HomeController
访问页面：
ps:强调一下，不要在public文件夹写，一定要在app下的view文件夹下创建html文件。
二、egg-cors （前后端分离跨域请求）
使用Egg-cors
1、npm install --save egg-cors
2、在plugin.js文件中引入插件
3、在config.default.js文件中配置egg-cors插件
我们先不配置这个插件，我们先去启动一个vue的前端项目，然后去调我们的egg服务器上的接口。
vue项目怎么创建这里就不说了，我直接上代码，因为只是一个demo，所以就直接在app.vue里面写了
{{message}}
此时我们进入页面去调去接口，接口是不通的，因为我们egg的后台服务还没写
接下来，我们去写egg的代码。首先在router.js里面写上
router.get('/data', controller.home.getData)
在home.js里面加上
async getData() {
this.ctx.body = "你好世界"
}
接着我们再回到前端页面上，会看到接口还是不通，接下来就要去配置插件了
同样的配置plugin.js:
cors:{
enable:true,
package:'egg-cors'
}
配置config.default.js
config.cors = {
origin:"*",
allowMethods:'GET,HEAD,PUT,POST,DELETE,PATCH'
}
配置完，我们重新启动项目，刷新前端页面，会发现，接口就已经通了，页面也拿到了接口返回的值。
三、简易的学生系统（增删）
因为考虑到再做水果列表的例子，大家会审美疲劳了，所以干脆就做晓舟老师视频最后布置的任务
要求：
1、使用Vue + ElementUI实现前端功能
2、实现学生列表的查看、添加、删除功能。
3、学生字段包括，ID、姓名、成绩
大家可以先思考一下怎么做，说一下思路，前端页面的逻辑我想可以不用赘述了，咱就说，这个后台的逻辑，三个方法，一个展示列表，一个新增学生，还有一个删除学生，用到我们之前说的，egg封装的通用接口，index，create，destroy分别来实现，这些功能。
成品代码如下，仅供参考：
//egg router.js
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const {
router,
controller
} = app;
router.get('/', controller.home.index); //默认页
router.resources('student', '/student', controller.student) //学生管理系统
//egg student.js
'use strict'; //严格模式
const Controller = require('egg').Controller; //Controller类
let studentList = [{
id: '1',
name: '张三',
achievement: 100
}, {
id: '2',
name: '李四',
achievement: 90
}, {
id: '3',
name: '炮灰甲',
achievement: 60
}]
class StudentController extends Controller {
//学生列表
async index() {
this.ctx.body = studentList
}
//新增学生
async create() {
const student = this.ctx.request.body.student
studentList.push(student)
this.ctx.body = '添加成功'
}
//删除学生
async destroy() {
let id = this.ctx.params.id
studentList = studentList.filter((item) => item.id !== id)
this.ctx.body = '删除成功'
}
}
module.exports = StudentController
//app.vue
添加学生
删除
好了，那么本章的内容就到此结束了，如果对这个demo还有问题的小伙伴可以留言，我看到了会回复，很感谢大家的观看。推荐一首汪苏泷最近上的新歌吧《眼泪落下之前》
传送门：
1、nunjucks中文文档：https://nunjucks.bootcss.com/
2、第一章 Egg框架概述：https://www.jianshu.com/p/bfdaecb5a18c
3、第二章 路由与控制器：https://www.jianshu.com/p/62edeb088d76