新增
一、需求分析：
1. 点击 新增 按钮后，对话框形式弹出新增窗口
2. 输入学员信息后，点击 确定 提交表单数据
二、新增窗口实现
1. 在src\views\student\index.vue 中分页区域的下方新增对话框形式学员新增弹出窗的数据模板 ：
<!-- 新增弹出框 -->
<!-- visible.sync 是否弹出窗口 el-dialog的width，代表弹出框的宽度-->
<el-dialog title="新增学生" :visible.sync="dialogAddVisible" width="40%">
<!-- label-width：label的宽度 :inline="true"：行内表单模式-->
<el-form :model="addForm" ref="addForm" :rules="rules" :label-position="labelPosition" label-width="80px"
:inline="true">
<el-form-item label="学号" prop="stunum">
<el-input v-model="addForm.stunum" 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="admissiondate">
<el-date-picker type="date" style="width:250px" placeholder="选择日期" value-format="yyyy-MM-dd"
v-model="addForm.admissiondate">
</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-item label="授课教师" prop="teacher">
<el-input v-model="addForm.teacher" @click.native="selectedTeacher" autocomplete="off" class="popWidth"></el-input>
</el-form-item>
<el-form-item label="班级" prop="class">
<el-input v-model="addForm.class" autocomplete="off" class="popWidth"></el-input>
</el-form-item>
<el-form-item label="爱好" prop="hobby">
<el-input v-model="addForm.hobby" autocomplete="off" class="popWidth"></el-input>
</el-form-item>
<el-form-item label="口头禅" prop="commonSaying">
<el-input v-model="addForm.commonSaying" autocomplete="off" class="popWidth"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogAddVisible = false">取 消</el-button>
<el-button type="primary" @click="addForm.id === null ? addDefineBtn('addForm') : editDefineBtn('addForm')">
确定
</el-button>
</div>
</el-dialog>css:
<style scoped>
.popWidth {
width: 250px;
}
</style>2. data 选项中声明变量属性:
// 新增
addForm: {
id: null,
stunum: '',
name: '',
admissiondate: '',
phone: '',
teacher: '',
class: '',
hobby: '',
commonSaying: ''
},
dialogAddVisible: false,//控制新增弹出框弹出的
labelPosition: 'right',//label的对齐方式
rules: {//弹出框校验规则
stunum: [{ required: true, message: "学号不能为空", trigger: "blur" }],
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
admissiondate: [{ required: true, message: "入学时间不能为空", trigger: "blur" }],
phone: [{ required: true, message: "电话号码不能为空", trigger: "blur" }],
teacher: [{ required: true, message: "请选择任课教师", trigger: "blur" }],
class: [{ required: true, message: "请选择班级", trigger: "blur" }],
},3. 在 methods 中添加 函数,提交表单数据和更新表单数据用的 ：
addDefineBtn() {},
editDefineBtn() {},4. 点击新增时弹出学员新增弹出窗
<!-- 搜索区 -->
<el-form :inline="true" :model="searchMap" ref="searchForm" class="demo-form-inline">
<!-- prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 -->
<el-form-item label="学号" prop="stunum">
<el-input v-model="searchMap.stunum" placeholder="学号"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="searchMap.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="授课教师" prop="teacher">
<el-input v-model="searchMap.teacher" placeholder="授课教师" @click.native="dialogFormVisible = true"
readonly></el-input>
</el-form-item>
<el-form-item label="入学时间" prop="admissiondate">
<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
v-model="searchMap.admissiondate"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="resetForm('searchForm')">重置</el-button>
<el-button type="text" @click="addMember">新增</el-button>
</el-form-item>
</el-form>5.点击新增：
// 新增
addMember() {
this.dialogAddVisible = true
// 延迟清空表单数据
this.$nextTick(() => {
this.$refs['addForm'].resetFields();
})
},6.点击新增窗口中的确认按钮时, 提交是否成功，为接下来提交表单数据打基础：
// 新增弹出框确定按钮
addDefineBtn(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("验证通过");
} else {
alert("验证不通过");
return false;
}
});
},7.实现点击新增，我们选择完教师时，被选中的教师的名字会显示到上面的查询教师框里面。
在data中，创建isAdd变量
isAdd: false,//如果新增：教师组件的数据回显到新增窗口里的授课教师输入框内，如果不是：教师组件的数据回显到搜索区的授课教师输入框内选择教师函数：
// 新增弹出框的选择授课教师弹窗
selectedTeacher() {
this.isAdd = true
// 教师组件弹出
this.dialogFormVisible = true
},在回显数据函数里，用if判断来决定走哪个函数：
// 得到子组件数据：教师名字
handleTName(val) {
if (this.isAdd) {
this.addForm.teacher = val.name;//数据回显到新增的授课教师输入框内
} else {
this.searchMap.teacher = val.name;//数据回显到搜索区的授课教师输入框内
}
this.isAdd = false
this.dialogFormVisible = false//关闭窗口
},三、.nodejs 添加新增学员接口
1.请求URL： /students请求方式： post描述：新增学员node.js 配置：
// 新增学生信息存储
router.post("/student", (req, res) => {
// console.log(req.body);
new Student(req.body).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": "新增成功！",
})
})
})2.src\api\student.js 导出的默认对象中，添加调用新增接口的方法
addStuData(data) { //新增信息
return request({
url: "/student",
method: "post",
data
})
},3. 在 src\views\student\index.vue 中的 addFormData 方法中提交数据，代码如下：
// 新增弹出框确定按钮
addDefineBtn(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
studentApi.addStuData(this.addForm).then(res => {
if (res.data.flag) {
this.stuList()
this.dialogAddVisible = false;
}
}).catch(err => {
console.log(err);
})
} else {
alert("验证不通过");
return false;
}
});
},4.测试，新增成功
学员管理-修改
一、 需求分析
当点击 编辑 按钮后，弹出编辑窗口，并查询出信息渲染。修改后点击确定提交修改数据。
二、修改实现--点击 编辑 按钮后，弹出编辑商品窗口，并查询出信息渲染
点击编辑触发的函数，可以拿到ID值，可以通过这个ID值，查出这个学员信息，需要两个接口nodejs 添加接口，一个是查询数据，一个是把编辑完的数据存起来，更新
查询数据接口：
// 学生编辑
router.get("/student", (req, res) => {
Student.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
})
})
})
// 学生编辑(更新操作)
router.put("/student", (req, res) => {
let id = req.body._id //具体哪一条数据
Student.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": "修改学生信息成功！",
})
})
})三、Api 调用接口
1. src\api\student.js 导出的默认对象中，添加ID查询方法 和 更新方法：
getIdInfo(id) { //根据id去查询信息
return request({
url: "/student?id=" + id,
method: "get",
})
},
update(data) { //编辑更新信息
return request({
url: "/student",
method: "put",
data
})
},2. 在 src\views\student\index.vue 中的 handleEdit 方法做如下修改，点击编辑时调用查询数据接口，通过ID把数据渲染到页面上 ：
handleEdit(id) {
// 让弹框出现
this.addMember()
studentApi.getIdInfo(id).then(res => {
if (res.data.flag) {
this.addForm = res.data.data;
}
}).catch(err => {
console.log(err);
})
},3.提交更新数据：
// 编辑弹出框确定按钮
editDefineBtn(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
studentApi.update(this.addForm).then(res => {
if (res.data.flag) {
this.stuList()
this.dialogAddVisible = 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;
}
});
},4.测试效果，修改成功。
学员管理-删除
一、需求分析：
当点击删除按钮后, 弹出提示框，点击确定后，执行删除并刷新列表数据
二、删除接口
// 学生删除
router.delete("/student", (req, res) => {
// console.log(req.body);
Student.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": "删除学生信息成功！",
})
})
})三、调用接口
delInfo(id) { //删除信息
return request({
url: "/student",
method: "delete",
data: {
id
}
})
}四、在 src\views\student\index.vue 中的 handleDele 方法做如下修改：
// 删除
handleDelete(id) {
this.$confirm("是否要删除当前数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
studentApi.delInfo(id).then((res) => {
this.$message({
type: "success",
message: res.data.message,
});
if (res.data.flag) {
this.stuList()
}
})
}).catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},删除完毕
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
