本章前沿：最近更新的比较频繁，实际上是在还之前欠下的章节，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。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- nunjucks模板写法 -->
<h1>水果列表</h1>
<ul>
{% for item in fruits %}
<li>{{item}}</li>
{% endfor %}
</ul>
</body>
</html>
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里面写了
<template>
<div>
<h1>{{message}}</h1>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
message: 'hello world'
}
},
created () {
axios.get("http://127.0.0.1:7001/data").then((res) => {
this.message = res.data
})
}
}
</script>
<style>
</style>
此时我们进入页面去调去接口，接口是不通的，因为我们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
<template>
<div>
<el-button type="text"
@click="addStudent">添加学生</el-button>
<el-table :data="studentList"
:border="true"
style="width: 50%">
<el-table-column prop="id"
label="ID">
</el-table-column>
<el-table-column prop="name"
label="姓名">
</el-table-column>
<el-table-column prop="achievement"
label="成绩">
</el-table-column>
<el-table-column fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="deleteClick(scope.row)"
type="text"
size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="新增学生"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="form"
:model="form"
label-width="80px">
<el-form-item label="Id">
<el-input v-model="form.id"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="成绩">
<el-input v-model="form.achievement"></el-input>
</el-form-item>
</el-form>
<span slot="footer"
class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary"
@click="doSure">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
studentList: [],
dialogVisible: false,
form: {}
}
},
created () {
this.getList()
},
methods: {
//学生列表
getList () {
axios.get("http://127.0.0.1:7001/student").then((res) => {
this.studentList = res.data
})
},
//添加学生弹窗
addStudent () {
this.dialogVisible = true
},
//添加学生
doSure () {
this.dialogVisible = false
axios.post("http://127.0.0.1:7001/student", { student: this.form }).then(() => {
this.$message.success('添加成功');
this.getList()
})
},
//删除学生
deleteClick (item) {
this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.delete(`http://127.0.0.1:7001/student/${item.id}`).then(() => {
this.$message.success('删除成功');
this.getList()
})
})
}
}
}
</script>
<style>
</style>
好了，那么本章的内容就到此结束了，如果对这个demo还有问题的小伙伴可以留言，我看到了会回复，很感谢大家的观看。推荐一首汪苏泷最近上的新歌吧《眼泪落下之前》
传送门：
1、nunjucks中文文档：https://nunjucks.bootcss.com/
2、第一章 Egg框架概述：//www.greatytc.com/p/bfdaecb5a18c
3、第二章 路由与控制器：//www.greatytc.com/p/62edeb088d76
