删除表中数据
现在网页上只能呈现出数据库中的数据，我们首先添加一个删除按钮，使其可以对数据库数据进行删除操作
<template #default="scope">
<el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
</template>
将上面代码添加到stafflist.vue文件下的template标签下。我们在按钮标签上添加@click事件，给事件设置为上del(scope.$index,scope.row)方法。
下面我们来写del()方法：del()方法写在stafflist.vue文件的script标签中，是js语句
首先在api文件夹下的index.js文件下定义del()方法
const del=function(index,row){
console.log(row);
ElMessageBox.confirm(
"确定要删除该行数据吗？",
"提示框",
{
confirmButtonText:"确认",
cancelButtonText:"取消",
type:'warning',
}
)
.then(function(){
//提交数据
easyapi.del("/api/staff",row.id);
//刷新表格数据
tableData.value.splice(index,1);
//提示删除成功
ElMessage({
type: 'success',
message: '删除成功',
})
})
}
在网页端点击删除按钮会弹出提示框
里面的文字分别对应del()方法中的文字，导入对象easyapi调用del方法，执行地址为"/api/staff"的操作，后端中这个地址请求是删除某行数据，刚好可以对应删除操作。然后ElMessage会提醒删除成功。
添加表中数据
和删除操作不同的是，添加数据的按钮不能放在每行数据上，新增按钮应该放在表单头部上，每次点击新增按钮都弹出一个弹出框，我们输入数据后点击弹出框中的确认按钮，数据就存入了数据库中，并且新添加的数据会自动刷新出到网页上来。
1.写postJson方法
import http from '../util/http.js';
const API={
get:(url)=>{return http({url:url,method:'get'})},
del:(url,id)=>{
//url /api/staff
//id 12
//url=/api/staff/12 代理处理 /api换成代理路径 http:localhost:8080/
//url=http://localhost:8080/staff/12
url=url+'/'+id;
return http({url:url,method:'delete'})
},
postForm:function(url,params){return http({url:url,method:'post',params:params})},
postJson:function(url,data){return http({url:url,method:'post',data:data})},
putForm:function(url,params){return http({url:url,method:'put',params:params})},
putJson:function(url,data){return http({url:url,method:'put',data:data})},
getSearch:(url,params)=>{return http({url:url,method:'get',params:params})}
};
export default API;
注意：postForm和postJson方法略有不同，postJson传入的是对象（postJson也是默认的添加数据方式），最好是使用postJson方式添加数据。在进行后端编码时，无论使用哪种方式接收数据，都要跟前端说明使用的方式（postForm还是postJson）
@PutMapping( "staffjson" )
public CommonResult editStaffson(@RequestBody Staff staff){
int count=easys.editstaff(staff);
staff=easys.getStaffByID(staff.getId());
return CommonResult.success(staff);
}
这是postJson的方式，传入的参数要加注解@RequestBody
2.添加新增按钮
<el-button type="success" @click="openAddWindow">新增</el-button>
3.编写点击新增后的弹出框
弹出框是由addWindowVisible属性控制，这个属性为true就显示在网页上，为false就不显示，我们需要手动设定属性的布尔值
<!--start新增信息的弹出框-->
<el-dialog v-model="addWindowVisible" title="Shipping address" width="500">
<el-form :model="addObject">
<el-form-item label="编号" label-width="80">
<el-input v-model="addObject.code" autocomplete="off" />
</el-form-item>
<el-form-item label="姓名" label-width="80">
<el-input v-model="addObject.name" autocomplete="off" />
</el-form-item>
<el-form-item label="薪资" label-width="80">
<el-input v-model="addObject.salary" autocomplete="off" />
</el-form-item>
<el-form-item label="用户名" label-width="80">
<el-input v-model="addObject.username" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeAddWindow">
取消
</el-button>
<el-button type="primary" @click="addSave">
保存
</el-button>
</div>
</template>
</el-dialog>
<!--end 新增信息的弹出框-->
设置可视化窗口的布尔值（默认为false）
//控制新增信息窗口是否显示
const addWindowVisible=ref(false);
然后事件@click为openAddWindow方法
点击事件后会接收一个对象的值，然后将可视化窗口的值设置为true（这样就会弹出窗口）
const openAddWindow=()=>{
addObject.value={};
addWindowVisible.value=true;
}
//新增数据绑定对象
const addObject=ref({});
利用新增的数据绑定对象存要传入的数据
<el-button type="primary" @click="addSave">
上面写的弹出框页面中，保存按钮的事件为addSave，这个事件跳转到：
//保存新增数据到 addObject
const addSave=async function(){
//发送请求
let result=await easyapi.postJson("/api/staffjson",addObject.value);
//表格数据变更
tableData.value.unshift(result.data);
//提示
ElMessage({
type: 'success',
message: '保存成功',
})
closeAddWindow();
}
const openAddWindow=()=>{
addObject.value={};
addWindowVisible.value=true;
}
const closeAddWindow=()=>{
addWindowVisible.value=false;
}
首先发送请求，在后端执行添加数据语句，将存储在addObject对象中的数据添加进数据库，然后将表格数据变更，这个操作是在后端实现的
@PostMapping("staffjson")
public CommonResult addStaffJson(@RequestBody Staff staff) {
System.out.println("@PostMapping-----staff");
dao.addStaff(staff);
staff=easyS.getStaffByID(staff.getId());
return CommonResult.success(staff);
}
更改表中数据
编辑数据是针对某行数据进行更改，只需要将按钮放在每行数据后。
<template #default="scope">
<el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
<el-button type="warning" @click="edit(scope.$index,scope.row)">编辑</el-button>
</template>
我们设计编辑按钮时，使其弹出一个弹出框，在弹出框中进行数据的编辑并保存，是和新增数据相同的思路，在事件@click下，@click=“edit(scope.$index,scope.row)”，传入两个参数，一个是下标一个是数据。编辑数据的输入框如下：
<!--start 编辑信息的弹出框---->
<el-dialog v-model="editWindowVisible" title="编辑" width="500">
<el-form :model="editObject">
<el-form-item label="编号" label-width="80">
<el-input v-model="editObject.code" autocomplete="off" />
</el-form-item>
<el-form-item label="姓名" label-width="80">
<el-input v-model="editObject.name" autocomplete="off" />
</el-form-item>
<el-form-item label="薪资" label-width="80">
<el-input v-model="editObject.salary" autocomplete="off" />
</el-form-item>
<el-form-item label="用户名" label-width="80">
<el-input v-model="editObject.username" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="editWindowVisible=false">
取消
</el-button>
<el-button type="primary" @click="editSave">
保存
</el-button>
</div>
</template>
</el-dialog>
<!--end 编辑信息的弹出框---->
同样用一个editObject常量来存储对象
//编辑数据绑定对象
const editObject=ref({});
可视化变量：
//控制编辑信息窗口是否显示
const editWindowVisible=ref(false);
输入数据后，点击保存会触发事件@click=“editSave”
//保存编辑数据
const editSave=async function(){
//发送请求
let result=await easyapi.putJson("/api/staffjson",editObject.value);
//刷新表格
tableData.value[editIndex]=result.data;
//提示
ElMessage({
type: 'success',
message: '保存成功',
})
editWindowVisible.value=false;
}
先发送请求，然后刷新表格（同增加数据，原理相同），然后弹出提示-保存成功
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
