接上篇的数据表格与分页，今天我们给表格中的数据增删改与表单验证
后端接口Web层
private Book book=new Book();
private BookDao bookDao=new BookDao();
private ObjectMapper mapper=new ObjectMapper();
@Override
public Book getModel() {
return book;
}
public String queryBookPager(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List books = bookDao.queryBookPager(book, pageBean);
Map map=new HashMap();
Map data=new HashMap();
data.put("rows", books);
data.put("total", pageBean.getTotal());
map.put("data", data);
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
public String addBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
bookDao.addBook(book);
Map map=new HashMap();
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
public String editBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
bookDao.UpdateBook(book);
Map map=new HashMap();
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
public String deleteBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
bookDao.deleteBook(book);
Map map=new HashMap();
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
新增
在上一篇中的查询按钮后再加入一个新增按钮，用来打开新增的Dialog 对话框
查询 新增
添加对话框，在ElementUI官网找到自定义对话框
取 消 确 定
在这里新增和修改共用一个页面
:visible.sync="dialogFormVisible" 用来控制对话框的显示和隐藏
dialogFormVisible值为 true/false
:close-on-click-modal="false" 防止用户误点击对话框外的地方导致对话框关闭
@close="dialogClose" 此方法用于清空上一次打开对话框输入的数据
:label-width="formLabelWidth" 设置文本框的宽度
数据属性定义
data: function() {
return {
bookname: '',
tableData: [],
page: 1,
rows: 8,
total: 0,
title: '书本新增',
book: {
id: '',
bookname: '',
price: '',
booktype: ''
},
dialogFormVisible: false,
formLabelWidth: '100px'
}
},
对话框的打开与关闭事件
//对话框打开事件
open: function() {
this.dialogFormVisible = true;
},
//对话框关闭事件
dialogClose:function(){
//清空表单数据
this.book={
id: '',
bookname: '',
price: '',
booktype: ''
};
//清空表单验证
this.$refs['book'].resetFields();
//重置对话框标题
this.title='书本新增';
},
确定按钮
修改和确定共用一个对话框 ，在此判断标题并对其执行方法进行改变
save:function(){
//表单验证
this.$refs['book'].validate((valid) => {
if (valid) {
//请求路径
let url=this.axios.urls.QUERY_BOOK;
let methodName='addBook';
console.log(this.title);
if(this.title=='编辑书本'){
methodName='editBook';
}
//请求参数
this.book['methodName']=methodName;
//发送axios请求
this.axios.post(url,this.book).then(resp=>{
let data=resp.data;
console.log(resp);
this.$message({
message: data.msg,
type: data.success==true?'success':'error'
});
if(data.success){
//关闭对话框
this.dialogFormVisible = false;
//刷新页面
this.query(this.page);
}
}).catch(err=>{
console.log(err);
});
} else {
console.log('error submit!!');
return false;
}
});
}
表单验证
找到官方文档中的表单验证
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
定义验证规则
rules: {
bookname: [
{ required: true, message: '请输入书本名称', trigger: 'blur' },
],
price: [
{ required: true, message: '请输入书本价格', trigger: 'blur' },
],
booktype: [
{ required: true, message: '请选择书本类型', trigger: 'change' },
],
}
然后给表单使用验证
在表单上添加rules 和ref属性 rules代表定义的验证规则 ref代表一个唯一的id一样
在每一个需要验证的标签中添加prop属性，prop="此处的名字，必须与rules中定义的属性一致"
修改
首先在官方文档中找到表格中的自定义列模板
编辑
删除
方法定义
//书本编辑
handleEdit:function(row){
//设置标题为编辑书本
this.title='编辑书本';
//设置对话框显示
this.dialogFormVisible = true;
//赋值表单数据
this.book={
id: row.id,
bookname: row.bookname,
price: row.price,
booktype: row.booktype
}
}
然后在关闭对话框中我们需要重置对话框的标题和数据以及表单验证
//对话框关闭事件
dialogClose:function(){
//清空表单数据
this.book={
id: '',
bookname: '',
price: '',
booktype: ''
};
//清空表单验证
this.$refs['book'].resetFields();
//重置对话框标题
this.title='书本新增';
}
这里不能直接使用参数row给book赋值，因为数据是双向绑定的
当我直接使用row给book赋值时,就会出现以下情况
先编辑38号书本
然后我们打开下面书本的编辑按钮并直接关闭对话框
在这里就实现了数据双向绑定
删除
定义删除方法
handleDelete:function(row){
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let url=this.axios.urls.QUERY_BOOK;
let params={
id:row.id,
methodName:'deleteBook'
};
//发起axios请求
this.axios.post(url,params).then(resp=>{
let data=resp.data;
console.log(resp);
this.$message({
message: data.msg,
type: data.success==true?'success':'error'
});
if(data.success){
//刷新页面
this.query(this.page);
}
}).catch(err=>{
console.log(err);
});
}).catch(() => {});
}
id为40的书本被删除了
至此vue+ElementUI实现动态树+数据表格+分页介绍完毕,由于作者水平有限难免有疏漏，欢迎留言纠错。
