七、教师管理-新增、修改、删除

一、新增 ---- 需求分析：

1. 点击新增按钮后，对话框形式弹出新增窗口

2. 输入教师信息后，点击确定提交表单数据；

二、新增窗口实现---模板

1. 在 src\views\teacher\index.vue 中分页区域的下方，新增对话框形式表单数据模板：

(el-dialog title 窗口标题，visible.sync 是否弹出窗口注意其中包含多行文本编辑框。 )

<!-- 弹出框 -->
<el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div>
</el-dialog>

2.更改一下HTML模板：

   <!-- 新增弹出框 --><!-- visible.sync 是否弹出窗口  el-dialog的width，代表弹出框的宽度--><el-dialog title="新增教师" :visible.sync="dialogFormVisible" width="40%"><!-- label-width：label的宽度 :inline="true"：行内表单模式--><el-form :model="addForm" ref="addForm" :label-position="labelPosition" label-width="80px" :inline="true"><el-form-item label="工号" prop="jobnumber"><el-input v-model="addForm.jobnumber" autocomplete="off" class="popWidth"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="addForm.name" autocomplete="off" class="popWidth"></el-input></el-form-item><el-form-item label="职务" prop="role"><el-select v-model="addForm.role" placeholder="请选择职务" class="popWidth"><el-option :key="index" v-for="(item, index) in roleOptions" :label="item.name" :value="item.type"></el-option></el-select></el-form-item><el-form-item label="入职时间" prop="entrydate"><el-date-picker type="date" style="width:250px" placeholder="选择日期" value-format="yyyy-MM-dd"v-model="addForm.entrydate"></el-date-picker></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="addForm.phone" autocomplete="off" class="popWidth"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog>

css部分：

<style scoped>
.popWidth {width: 250px;
}
</style>

3.在data里添加弹出框的数据：

    data() {return {// 教师列表数据tableData: [],//列表——教师列表数据// 分页currentPage: 2,//当前页数pageSize: 4,//每页显示条目个数??暂时不生效pageSizes: [5, 10, 15, 20],// 每页显示个数选择器的选项设置total: 0,// 搜索栏searchMap: {//搜索栏数据jobnumber: "",name: "",role: "",entrydate: ""},roleOptions,//简写形式，=>roleOptions:roleOptions// 新增弹出框dialogFormVisible: false,addForm: {jobnumber: "",name: "",role: "",entrydate: "",phone: ""},labelPosition: 'right',//label的对齐方式}},

4.添加个新增按钮，放在上面的重置按钮后就行：

<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="resetForm('searchForm')">重置</el-button>
<el-button type="text" @click="addMember">新增</el-button>

5.在点击新增的时候，让弹出框弹出，点击确定后，清空弹出框的内容：

// 新增教师
addMember() {this.dialogFormVisible = true        // 因为一上来，点击新增，代码就全都执行了，所以清空会报错，用this.$nextTick等DOM元素渲染        完，再去执行下面的回调函数// 延迟清空表单数据this.$nextTick(() => {console.log(this.$refs);this.$refs['addForm'].resetFields();})
},

三、新增---表单数据校验

1. 在新增窗口的 el-form 上绑定属性 :rules="rules"

 <el-form :model="addForm" ref="addForm" :rules="rules" :label-position="labelPosition" label-width="80px" :inline="true">

2. 在 data 选项中添加 rules 属性进行校验，对卡号，姓名、支付类型校验

 rules: {//弹出框校验规则jobnumber: [{ required: true, message: "工号不能为空", trigger: "blur" }],name: [{ required: true, message: "电话号码不能为空", trigger: "blur" }],role: [{ required: true, message: "姓名不能为空", trigger: "blur" }],entrydate: [{ required: true, message: "入职时间不能为空", trigger: "blur" }],phone: [{ required: true, message: "请选择职务", trigger: "blur" }],},

四、表单数据提交

1.当点击新增窗口中的确认按钮时, 提交表单数据，后台API服务接口校验响应新增成功或失败。

点击弹出框的确定按钮时发生的函数：addDefineBtn，在方法中校验一下数据，弹出提示信息是否通过：

<div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="addDefineBtn("addForm")">确 定</el-button>
</div>

  addFormData(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert("验证通过");this.dialogFormVisible = false;} else {alert("验证不通过");return false;}});},

2.nodejs 添加新增教师接口

我们新增数据要把数据存起来，然后在node文件的router.js中，写一个接口：

// 新增教师信息存储
router.post("/teacher", (req, res) => {console.log(req.body);let obj = {jobnumber: req.body.jobnumber,name: req.body.name,role: req.body.role,entrydate: req.body.entrydate,phone: req.body.phone}new Teacher(obj).save().then(function(data, err) {if (err) {return res.status(500).json({ //如果err，就是错误就是数据库中没有code: 3000,flag: false,message: "服务器后台错误"})}return res.status(200).json({"code": 2000,"flag": true,"message": "新增成功！",})})
})

3. src\api\teacher.js 中，添加调用新增接口的方法

export function addTeacher(data) { //分页return request({url: "/teacher",method: "post",data})
}

4.在 src\views\teacher\index.vue 中引入并在 addDefineBtn 方法中提交新增教师信息，更新列表，代码如下：

import { getListPage, addTeacher } from "@/api/teacher";

// 新增弹出框确定按钮addDefineBtn(formName) {this.$refs[formName].validate((valid) => {if (valid) {addTeacher(this.addForm).then(res => {if (res.data.flag) {this.ListPage()this.dialogFormVisible = false;}}).catch(err => {console.log(err);})} else {alert("验证不通过");return false;}});},

5.新增的功能写完了。

五、修改-需求分析

1.当点击编辑按钮后，弹出编辑窗口，并查询出信息渲染。修改后点击确定提交修改数据。

六、修改-实现

1.当点击编辑按钮后，弹出编辑窗口，在编辑方法里调用弹出框函数：

  handleEdit(index, row) {// console.log(index, row);this.addMember();},

2.编辑完之后，也要把编辑后的数据存储起来，先要去查询数据，通过ID，所以先去node服务器（也就是node文件夹）在router.js中写一个接口

// 教师编辑
router.get("/teacher", (req, res) => {Teacher.findById(req.query.id).then((data, err) => {if (err) {return res.status(500).json({ //如果err，就是错误就是数据库中没有code: 3000,flag: false,message: "服务器后台错误"})}return res.status(200).json({"code": 2000,"flag": true,"message": "根据ID查找成功！","data": data})})
})

3.为了拿到ID通过scope，在教师组件（teacher文件下的index.vue文件）中，在编辑点击事件中，传参数ID：

<el-button size="mini" @click="handleEdit(scope.row._id)">编辑</el-button>

4.然后在data中把数据创建出来，在pojo里添加 id: null,

addForm: {id: null,jobnumber: "",name: "",role: "",entrydate: "",phone: "",},

5. Api 调用接口，在src\api\teacher.js 中，添加ID查询方法 getIdInfo

export function getIdInfo(id) { //根据id去查询教师信息return request({url: "/teacher?id=" + id,method: "get",})
}

6.在 src\views\teacher\index.vue 中的 handleEdit 方法做如下修改：

 // 编辑
handleEdit(id) {// 让弹框出现this.addMember()getIdInfo(id).then(res => {if (res.data.flag) {this.addForm = res.data.data;}}).catch(err => {console.log(err);})
},

7.现在完成点击编辑，数据渲染在弹出框上，接下来要把编辑完的数据，发送给后台服务器，再由后台服务器做些处理，存到数据库当中，再在页面中显示出来

先去服务器，把接口写出来：

// 教师编辑(更新操作)
router.put("/teacher", (req, res) => {let id = req.body._id //具体哪一条数据Teacher.findByIdAndUpdate(id, req.body).then((data, err) => {// console.log('-------', data, err);if (err) {return res.status(500).json({ //如果err，就是错误就是数据库中没有code: 3000,flag: false,message: "服务器后台错误"})}return res.status(200).json({"code": 2000,"flag": true,"message": "修改教师信息成功！",})})
})

在src\api\teacher.js 中，添加ID更新方法 update

export function update(data) { //编辑更新教师信息return request({url: "/teacher",method: "put",data})
}}

8.点击编辑的确定的时候，触发更新数据update，在点击确定时在创建一个函数，用三元表达式决定是触发编辑函数还是新增函数：

<div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="addForm.id === null ? addDefineBtn('addForm') :         editDefineBtn('addForm')">确定</el-button>
</div>>

9.addForm在编辑的函数里能给他重新赋值，也就是说没点击编辑的时候，addForm中的ID值一直是null，点击确定的时候，相当于新增操作，然后再次点击编辑的时候就有这个ID值了，有ID值了就相应的走后面的方法编辑函数了：

  // 编辑弹出框确定按钮editDefineBtn(formName) {this.$refs[formName].validate((valid) => {if (valid) {update(this.addForm).then(res => {if (res.data.flag) {this.ListPage()this.dialogFormVisible = false;this.addForm.id = null;for (const key in this.addForm) {if (key !== "id") {this.addForm[key] = "";}}}}).catch(err => {console.log(err);})} else {alert("验证不通过");return false;}});},

要记住引入哈：

import { getListPage, addTeacher, getIdInfo, update } from "@/api/teacher";

10.现在编辑操作完事了。

七、教师管理-删除---需求分析

1.当点击删除按钮后, 弹出提示框，点击确定后，执行删除并刷新列表数据

八、nodejs添加删除接口

1.通过ID删除：

// 教师删除
router.delete("/teacher", (req, res) => {// console.log(req.body);Teacher.findByIdAndRemove(req.body.id).then((data, err) => {if (err) {return res.status(500).json({ //如果err，就是错误就是数据库中没有code: 3000,flag: false,message: "服务器后台错误"})}return res.status(200).json({"code": 2000,"flag": true,"message": "删除教师信息成功！",})})
})

2. Api 调用接口，src\api\teacher.js 导出的默认对象中，添加删除方法

export function delInfo(id) { //删除教师信息return request({url: "/teacher",method: "delete",data: {id}})
}

3.在 src\views\teacher\index.vue 中的删除方法做如下修改：

<el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>

import { getListPage, addTeacher, getIdInfo, update, delInfo } from "@/api/teacher";

        // 删除handleDelete(id) {this.$confirm("是否要删除当前数据, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {delInfo(id).then((res) => {this.$message({type: "success",message: res.data.message,});if (res.data.flag) {this.ListPage();}})}).catch(() => {this.$message({type: "info",message: "已取消删除",});});},

4.删除操作完成！