目录
vue+springboot练手demo（一）——环境搭建
vue+springboot练手demo（二）——查询功能的实现
vue+springboot练手demo（三）——删除功能的实现
vue+springboot练手demo（四）——新增和修改功能的实现
vue+springboot练手demo（五）——校验功能
vue+springboot练手demo（六）——Swagger、Druid监控和日志
vue+springboot练手demo（七）——Excel导出和导入
页面开发
模态框
由于添加操作和修改操作所涉及的到信息差不多，这里就合在一起写了。构建一个对话框，对话框中包含一个表单加上两个按钮（一个用于重置信息，一个用于提交信息）。
员工信息
data() {
return {
EmpOptions: '',
EmpDialog: false,
editname: false,
EmpForm: {
eName: '张三丰',
eEmail: '[email protected]',
eSex: '',
ePhone: '1351364313',
eDate: '1997-07-01',
dname: '',
},
options: [{
did: '选项1',
dname: '技术部'
}, {
did: '选项2',
dname: '开发部'
}, {
did: '选项3',
dname: '财务部'
}],
did: '',
formLabelWidth: '140px',
}
}
为添加按钮和修改按钮分别绑定对应的方法，其中修改按钮的方法中要传入被选择行的职工id。在方法中操作模拟数据达到预期的效果
# 添加方法（模拟数据测试）
# 1.弹出模态框
# 2.标题为添加职工信息
# 3.除了性别默认被选为“男”，其他的信息均为空
AddEmpBtn() {
this.EmpOptions = '添加';
this.EmpForm.eName = '';
this.EmpForm.eDate = '';
this.EmpForm.ePhone = '';
this.EmpForm.eEmail = '';
this.EmpForm.eSex = '男';
this.EmpForm.dname = '';
this.EmpDialog = true;
}
# 修改方法（模拟数据测试）
# 1.弹出模态框
# 2.标题为修改方法
# 3.所有信息栏均有从数据库中查询过来的结果可以修改，其中姓名行为不能修改的状态
EditEmp(id) {
this.EmpOptions = '修改';
this.editname = true;
this.EmpForm.eName = '张三丰';
this.EmpForm.eDate= '1997-07-01';
this.EmpForm.ePhone = '1351364313';
this.EmpForm.eEmail = '[email protected]';
this.EmpForm.eSex = '男';
this.EmpForm.dname = 'Development';
this.EmpDialog = true;
}
添加效果图如下所示。
修改效果图如下所示。
后面我们就可以通过判断姓名输入框的状态来区分添加操作和修改操作！
获取部门信息
由于公司的部门可能是会变化的，因此现将部门的选择框改为从数据库中获取而来的动态数据。
前端开发
在
随即便是编写这个方法的实现。
findDept(){
this.$http.get("/Dept/findall").then(result => {
this.options = result.data.extend.deptinfo;
})
}
并将此方法放入create()中，使其在页面加载时就获取部门信息。
后端开发
省略dao，service层的编写
#sql语句
controller层编写
@RestController
@RequestMapping("/Dept")
@CrossOrigin
@Slf4j
public class DeptController {
@Autowired
private DeptService deptService;
@GetMapping("/findall")
public Msg findall(){
List deptList = deptService.findall();
return Msg.success().add("deptinfo",deptList);
}
}
动态部门信息功能达成！
新增功能的实现
点击“添加”按钮，按要求输入相应的信息，点击提交即可添加信息。
前端开发
前端开发较为简单，主要就是判断是否是添加方法，如果是添加方法则发送rest请求，将信息传入后台。然后关闭模态框、显示提示信息和页面跳转至最后一页(方便查看刚刚添加的信息)。
if (!this.editname){
this.$http.post("/Emps/Emps",this.EmpForm).then(result => {
//模态框关闭
this.EmpDialog = false;
//提示信息
this.$message({
message: '添加成功！',
type: 'success'
});
//重新加载数据
this.findPage(this.endpage);
});
}
修改原始的添加按钮方法
AddEmpBtn() {
this.EmpOptions = '添加';
this.EmpForm.eName='';
this.EmpForm.eEmail='';
this.EmpForm.eDate='';
this.EmpForm.ePhone='';
this.EmpForm.eSex='';
this.EmpForm.dId='';
this.EmpForm.eSex = '男';
this.EmpDialog = true;
}
后端开发
首先在Emp的实体类中一个新的构造方法，用于新增操作。
public Emps(String eName, String eEmail, String eSex, String ePhone, Date eDate, Integer did) {
this.eName = eName;
this.eEmail = eEmail;
this.eSex = eSex;
this.ePhone = ePhone;
this.eDate = eDate;
this.did = did;
}
随后在mapper中编写新增方法的sql语句。
insert into emps (e_name,e_email,e_sex,e_phone,e_date,d_id)
values (#{eName},#{eEmail},#{eSex},#{ePhone},#{eDate},#{dId})
省略dao层和service层，来到controller层中编写添加操作的方法。
@PostMapping("/Emps")
public Msg AddEmp(@RequestBody Emps emps){
empsService.AddEmp(emps);
return Msg.success();
}
重启服务，测试功能。
修改功能的实现
修改功能的步骤分为先获取到被选中的职工的职工信息，然后在原有的信息上进行修改
根据id获取职工信息
在页面上选择某个员工信息，点击“编辑按钮”弹出模态框，模态框中显示的是员工原来的信息。这次我们从后端开始写起。
后端开发
sql语句编写
省略dao层、service层，来到controller层编写方法。
@GetMapping("/Emps/{id}")
public Msg GetEmpByid(@PathVariable("id") Integer id){
Emps emps = empsService.GetEmpsById(id);
return Msg.success().add("empinfo",emps);
}
至此后端开发结束
前端开发
点击编辑按钮后获取员工信息并显示在模态框中。方法实现如下
EditEmp(id) {
this.EmpDialog = true;
this.EmpOptions = '修改';
this.editname = true;
this.$http.get("/Emps/Emps/" + id).then(result => {
this.EmpForm=result.data.extend.empinfo;
//为了日后修改方便，这里只用dept的id进行交互。而为了在获取信息的时候显示部门名，因此需要将id暂时赋值成部门名
this.EmpForm.dId=result.data.extend.empinfo.deptList[0].dName;
})
}
效果图如下所示。
修改职工信息
前端开发
修改好信息后点击提交，向后台发送修改请求，后台理后返回提示信息。在提交方法中增加以下代码
else {
//由于部门信息可能不会被修改，而原始的部门信息不是id值而是name值，所以这里要做一个判断。当id值不为数字时使其赋值为员工信息中部门信息的id值
if(isNaN(this.EmpForm.dId)){
this.EmpForm.dId=this.EmpForm.deptList[0].dId;
console.log(this.EmpForm.dId)
}
this.$http.put("/Emps/Emps",this.EmpForm).then(result => {
//模态框关闭
this.EmpDialog = false;
//提示信息
this.$message({
message: '修改成功！',
type: 'success'
});
//修改成功后，刷新本页
this.findPage(this.currentpage);
});
}
后台开发
省略dao、service层。
#sql语句如下
update emps
e_email=#{eEmail},
e_sex=#{eSex},
e_phone=#{ePhone},
e_date=#{eDate},
d_id=#{did},
where e_id=#{eId}
#controller层中的方法
@PutMapping("Emps")
public Msg UpdateEmp(@RequestBody Emps emps){
empsService.UpdateById(emps);
return Msg.success();
}
测试。
现在新增和修改的基本功能已经实现了，但是对于信息没有做任何的校验，下一章将会添加信息校验功能，使功能更完善！希望大家喜欢！谢谢！