一、新增 ---- 需求分析：
1. 点击 新增 按钮后，对话框形式弹出新增窗口
2. 输入会员信息后，点击 确定 提交表单数据；?
二、新增窗口实现---模板
1.?我们先来实现一下日期查询的一个小问题，在 src\views\teacher\index.vue 中，入职时间里添加下面代码：
<el-date-picker
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
v-model="searchMap.entrydate"
value-format="yyyy-MM-dd"
></el-date-picker>
2. 在 src\views\teacher\index.vue 中分页区域的下方，新增对话框形式表单数据模板：
(el-dialog? title 窗口标题，visible.sync 是否弹出窗口 注意其中包含多行文本编辑框。?)
<!-- 弹出框 -->
<!-- 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>
3.更改一下模板：
<!-- 弹出框 -->
<!-- visible.sync 是否弹出窗口 -->
<el-dialog title="新增教师" :visible.sync="dialogFormVisible">
<el-form :model="pojo">
<el-form-item label="工号" prop="jobnumber">
<el-input
style="width: 200px"
v-model="pojo.jobnumber"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input
style="width: 200px"
v-model="pojo.name"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="职务" prop="role">
<el-select
style="width: 200px"
v-model="pojo.role"
placeholder="请选择职务"
>
<el-option
v-for="option in roleOptions"
:key="option.type"
:label="option.name"
:value="option.type"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="入职时间" prop="entrydate">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="pojo.entrydate"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
<el-form-item label="电话号码" prop="phone">
<el-input
style="width: 200px"
v-model="pojo.phone"
autocomplete="off"
></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>
4.先让弹出框显示，在data里添加：
dialogFormVisible:true
5.决定弹出框都有什么的一个指令prop，在data里添加：
pojo: {
id: null,
jobnumber: "",
name: "",
role: "",
entrydate: "",
phone: "",
},
6.在点击新增的时候，让弹出框弹出，创建点击事件，让dialogFormVisible先为false，然后在方法里，书写它的功能：
addData() {
this.dialogFormVisible = true;
},
7.要实现：当输入完数据时，再次点击新增按钮，弹出框的数据要清除。
做法：给这个弹出框的表单身上，添加ref属性，在方法里用$ref拿到他绑定的对象，然后用resetFields清空。
代码段：
<el-form :model="pojo" ref="pojoForm" >
addData() {
this.dialogFormVisible = true;
// 再次点击新增，清空数据的
this.$nextTick(() => {
//$nextTick等DOM元素渲染完，再去执行下面的回调函数
this.$refs["pojoForm"].resetFields(); //$refs：只要使用了ref就能用它拿到ref绑定的对象
});
},
三、新增---表单数据校验
1. 在新增窗口的 el-form 上绑定属性 :rules="rules"
<el-form :model="pojo" ref="pojoForm" :rules="rules">
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服务接口校验响应新增成功或失败。
点击确定时发生的函数：addFormData，在方法中校验一下数据，弹出提示信息是否通过：
<el-button type="primary" @click="addFormData('pojoForm')"
>确 定</el-button
>
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(function(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 导出的默认对象中，添加调用新增接口的方法
add(pojo) {
return request({
url: "/teacher",
method: "post",
data: pojo
})
},
4.在 src\views\teacher\index.vue 中的 addFormData 方法中提交数据，保存成功，代码如下：
addFormData(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
teacherApi.add(this.pojo).then((res) => {
console.log(res.data);
if (res.data.flag) {
this.getList();
this.dialogFormVisible = false;
}
});
} else {
alert("验证不通过");
return false;
}
});
},
5.新增的功能写完了。
五、修改-需求分析
1.当点击 编辑 按钮后，弹出编辑窗口，并查询出信息渲染。修改后点击确定 提交修改数据。
六、修改-实现
1.当点击 编辑 按钮后，弹出编辑窗口，在编辑方法里调用弹出框函数：
handleEdit(index, row) {
// console.log(index, row);
this.addData();
},
2.编辑完之后，也要把编辑后的数据存储起来，先要去查询数据，通过ID，所以先去node服务器（也就是node文件夹）在router.js中写一个接口
// 教师编辑
router.get("/teacher", (req, res) => {
Teacher.findById(req.query.id, (err, data) => {
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,
pojo: {
id: null,
jobnumber: "",
name: "",
role: "",
entrydate: "",
phone: "",
},
5.?Api 调用接口，?在src\api\teacher.js 导出的默认对象中，添加ID查询方法 getById
getId(id) {
return request({
url: "/teacher?id=" + id,
method: "get",
})
},
6.在 src\views\teacher\index.vue 中的 handleEdit 方法做如下修改：
handleEdit(msg) {
this.addData();
console.log(msg);
teacherApi.getId(msg).then((res) => {
if (res.data.flag) {
this.pojo = res.data.data;
}
});
},
7.现在完成点击编辑，数据渲染在弹出框上，接下来要把编辑完的数据，发送给后台服务器，再由后台服务器?做些处理，存到数据库当中，再在页面中显示出来
先去服务器，把接口写出来：
// 教师编辑(更新操作)
router.put("/teacher", (req, res) => {
let id = req.body._id //具体哪一条数据
Teacher.findByIdAndUpdate(id, req.body, (err, data) => {
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?
update(pojo) {
return request({
url: "/teacher",
method: "put",
data: pojo
})
}
8.点击编辑的确定的时候，触发更新数据update，在点击确定时在创建一个函数，用三元表达式决定是触发编辑函数还是新增函数：
<el-button
type="primary"
@click="
pojo.id === null
? addFormData('pojoForm')
: updataFormData('pojoForm')
"
>确 定</el-button
>
9.pojo在编辑的函数里能给他重新赋值，也就是说没点击编辑的时候，pojo中的ID值一直是null，点击确定的时候，相当于新增操作，然后再次点击编辑的时候就有这个ID值了，有ID值了就相应的走后面的方法编辑函数了：
updataFormData(formName) {
console.log("更新");
this.$refs[formName].validate((valid) => {
if (valid) {
teacherApi.update(this.pojo).then((res) => {
if (res.data.flag) {
this.getList();
this.dialogFormVisible = false;
this.pojo.id = null;
// this.pojo.name=""
// this.pojo.jobnumber=""
// this.pojo.entrydate=""
// this.pojo.phone=""
for (const key in this.pojo) {
if (key !== "id") {
this.pojo[key] = "";
}
}
console.log(this.pojo);
}
});
} else {
alert("验证不通过");
return false;
}
});
},
10.现在编辑操作完事了。
七、?教师管理-删除---需求分析
1.当点击删除按钮后, 弹出提示框，点击确定后，执行删除并刷新列表数据
八、nodejs添加删除接口
1.通过ID删除：
// 教师删除
router.delete("/teacher", (req, res) => {
// console.log(req.body);
Teacher.findByIdAndRemove(req.body.id, (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 导出的默认对象中，添加 delete方法
delete(id) {
return request({
url: "/teacher",
method: "delete",
data: {
id
}
})
}
3.在 src\views\teacher\index.vue 中的编辑事件和 handleDele 方法做如下修改：
<el-button size="mini" @click="handleEdit(scope.row._id)"
>编辑</el-button
>
?
handleDelete(msg) {
// console.log(index, row);
this.$confirm("是否要删除当前数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
teacherApi.delete(msg).then((res)=>{
this.$message({
type: "success",
message: res.data.message,
});
if (res.data.flag) {
this.getList();
}
})
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
4.删除操作完成！
|