2
day04-功能实现03 - 一刀一个小西瓜
source link: https://www.cnblogs.com/liyuelian/p/17201653.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
功能实现03
5.功能05-添加家居信息
5.1需求分析
前端页面点击修改家居信息，弹出提示框，点击修改后提示修改成功或者失败。
5.2思路分析
- 完成后端代码从dao-service-controller，并对每层代码进行测试
- 完成前端代码，回显家居信息，再使用axios发送ajax请求，更新数据，将数据绑定显示。
5.3代码实现
5.3.1后端代码
由于使用了逆向工程，bean 层、dao 层以及dao层接口对应的mapper映射文件已经生成，因此暂时不必在这两层编写代码了。
（1）Service层，修改对应的接口和实现类
FurnService.java接口
//修改家居信息public void update(Furn furn);
FurnServiceImpl.java实现类
@Overridepublic void update(Furn furn) { //如果furn的某个属性不为null就进行修改 furnMapper.updateByPrimaryKeySelective(furn);}
（2）Controller层，修改FurnController.java
@PutMapping("/update")@ResponseBodypublic Msg update(@RequestBody Furn furn) { furnService.update(furn); return Msg.success();}
5.3.2前端代码
（1）修改HomeView.vue
- 增加方法handleEdit方法，回显数据并测试
- 修改save方法，处理修改请求。因为添加和修改都是同一个弹窗，因此确定键绑定的是同一个方法save()，在该方法中进行条件判断加以区分：如果点击弹出表单时，表单中的家居id为空，则进行添加业务，如果表单的家居id不为空，则进行修改业务。
<script>... save() {//将填写的表单数据发送给后端 //修改和添加走的同一个方法 if (this.form.id) {//如果为修改业务，当前的id存在，表示真 request.put("/api/update", this.form).then(res => { //注意这里的res已经经过拦截处理，它已经是原生的res的data数据 if (res.code === "200") {//修改成功 //提示成功的消息框 this.$message({ type: "success", message: "更新成功" }) } else { //提示错误的消息框 this.$message({ type: "error", message: "更新失败" }) } //关闭当前的修改对话框 this.dialogVisible = false; //同时更新数据 this.list(); }) } else {//添加业务 //第一个参数为url，第二个参数是请求携带的数据 request.post("/api/save", this.form).then(res => { console.log("res-", res) this.dialogVisible = false;//隐藏表单 //调用list方法，刷新页面显示的数据 this.list(); }) } }, list() {//list方法，请求返回家居信息,当我们打开页面的时候，该方法就应该自动触发 request.get("/api/furns").then(res => { //根据res的结构来获取数据 this.tableData = res.extend.furnList; }) }, handleEdit(row) { //将当前行的家居信息绑定到弹出的对话框表单上 //方式1：通过row.id到后端DB去获取对应的家居信息，放回后将其绑定到this.form //方式2：将当前获取的row数据通过处理绑定到this.form进行显示 //将row转成json字符串，再转成json对象 this.form = JSON.parse(JSON.stringify(row)); //将数据赋给对话框后，显示对话框 this.dialogVisible = true; }...</script>
测试成功：
6.功能06-删除家居信息
6.1需求分析
点击删除按钮，弹出确认对话框，选择确定，则进行删除，删除成功则弹出成功的对话框。
6.2思路分析
- 完成后端代码从dao-service-controller，并对每层代码进行测试
- 完成前端代码，使用axios发送ajax请求，删除数据，将数据绑定显示。
6.3代码实现
6.3.1后端代码
（1）修改FurnService.java接口，声明删除方法
//删除家居信息public void del(Integer id);
（2）FurnServiceImpl.java实现类，增加删除方法
@Overridepublic void del(Integer id) { furnMapper.deleteByPrimaryKey(id);}
（3）修改FurnController.java
@DeleteMapping("/del/{id}")@ResponseBodypublic Msg del(@PathVariable Integer id) { furnService.del(id); return Msg.success();}
6.3.2前端代码
（1）修改HomeView.vue，编写handleDel方法，完成删除
handleDel(id) { request.delete("/api/del/" + id).then(res => { //提示一个成功的消息框 if (res.code === 200) {//删除成功 //提示成功的消息框 this.$message({ type: "success", message: res.msg }) } else { //提示错误的消息框 this.$message({ type: "error", message: res.msg }) } //刷新页面数据 this.list(); })}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK