一、新增 ---- 需求分析：
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.删除操作完成！
扫一扫
3341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
