SPA项目开发之增删改功能+Dialog弹出框
一、后台数据接口准备（增删改接口）
1.在BaseDao写入通用的增删改方法
/**
* 通用增删改
* @param sql
* @param obj
*/
public static void executeUpdate(String sql,Object[] obj) {
Connection conn=null;
PreparedStatement stmt=null;
try {
conn=DBHelper.getConnection();
stmt=conn.prepareStatement(sql);
ParameterMetaData params = stmt.getParameterMetaData();
for (int i = 0; i < params.getParameterCount(); i++) {
stmt.setObject(i+1, obj[i]);
}
stmt.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}finally {
DBHelper.close(conn, stmt, null);
}
}
2.在BookDao写入增删改方法
/**
* 增加书籍
* @param book
*/
public void addBook(Book book) {
String sql="insert into t_book_vue(bookname,price,booktype) values(?,?,?)";
super.executeUpdate(sql, new Object[] {
book.getBookname(),
book.getPrice(),
book.getBooktype()
});
}
/**
* 修改书籍
* @param book
*/
public void editBook(Book book) {
String sql="update t_book_vue set bookname=?,price=?,booktype=? where id=?";
super.executeUpdate(sql, new Object[] {
book.getBookname(),
book.getPrice(),
book.getBooktype(),
book.getId()
});
}
/**
* 删除书籍
* @param book
*/
public void delBook(Book book) {
String sql="delete from t_book_vue where id=?";
super.executeUpdate(sql, new Object[] {
book.getId()
});
}
3.在BookAction中调用增删改方法
Map<String, Object> json = new HashMap<String, Object>();
public String addBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
try {
bookDao.addBook(book);
json.put("msg", "新增书本信息成功");
json.put("success", true);
mapper.writeValue(resp.getOutputStream(),json);
} catch (Exception e) {
json.put("msg", "新增书本信息失败");
json.put("success", false);
mapper.writeValue(resp.getOutputStream(),json);
}
return null;
}
public String editBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
try {
bookDao.editBook(book);
json.put("msg", "修改书本信息成功");
json.put("success", true);
mapper.writeValue(resp.getOutputStream(),json);
} catch (Exception e) {
json.put("msg", "修改书本信息失败");
json.put("success", false);
mapper.writeValue(resp.getOutputStream(),json);
}
return null;
}
public String delBook(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
try {
bookDao.delBook(book);
json.put("msg", "删除书本信息成功");
json.put("success", true);
mapper.writeValue(resp.getOutputStream(),json);
} catch (Exception e) {
json.put("msg", "删除书本信息失败");
json.put("success", false);
mapper.writeValue(resp.getOutputStream(),json);
}
return null;
}
二、Dialog弹出框
2.1 基本结构
<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose">
<!-- form表单 -->
<el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
...
</el-form>
</el-dialog>
注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
:visible.sync="dialogFormVisible"
注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
@close="dialogClose"
三.表单
3.1 基本结构
<el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
<el-form-item label="书本编号" :label-width="formLabelWidth">
<el-input v-model="bookForm.id" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
<el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
</el-form-item>
...
</el-form>
注1：:label-position设置表单对齐方式
注2：设置表单元素属性双向绑定的对象属性名称
data: function() {
return {
bookForm: {
id: null,
bookname: null,
price: '',
booktype: null
}
};
}
3.2 表单验证
<el-form :model="bookForm" :rules="rules" ref="bookForm">
...
</el-form>
注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则
//将el-form-item的prop属性设置为需校验的字段名即可,如下：
<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
<el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
</el-form-item>
//在Vue实例的data属性中定义表单验证规则，如下：
rules: {
bookname: [
{required: true,message: '请输入书本名称！',trigger: 'blur'},
{min: 3,max: 6,message: '长度必须在3-6个字符之间',trigger: 'blur'}
],
...
}
注2：有多个表单，怎么在提交进行区分？
我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用
注3：清空表单验证信息
this.$refs[formName].resetFields();
补充说明：formName是指<el-form ref="bookForm">中定义的ref属性名
注4：表单重置时必须先清空表单验证信息，再清空表单数据信息
//通过form表单的ref属性来清空表单验证信息
this.$refs['bookForm'].resetFields();
//清空上一次表单的数据信息
this.bookForm.id = null;
this.bookForm.bookname = null;
this.bookForm.price = null;
this.bookForm.booktype = null;
四. CUD
4.1 新增
在事件中设置dialogFormVisible="true"即可打开dialog弹出框。
4.2 添加修改/删除按钮
4.3 在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop
slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取row对象信息和行索引index信息即可。
BookList总代码
<template>
<div>
<!-- 导航栏-->
<el-breadcrumb separator="/" style="padding-top:15px ;">
<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>书本管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索栏-->
<el-form :inline="true" class="demo-form-inline" style="margin-top: 15px;">
<el-form-item label="书本名称">
<el-input v-model="bookname"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query(1)">
<span class="el-icon-search">查询</span>
</el-button>
</el-form-item>
<el-form-item>
<el-button type="success" @click="toAdd()">
<span class="el-icon-plus">新增</span>
</el-button>
</el-form-item>
</el-form>
<!--表格 -->
<el-table :data="result" style="width: 100%;" :border="true" max-height="550">
<el-table-column :index="indexMethod" type="index"></el-table-column>
<el-table-column prop="id" label="书本编号" min-width="30" align="center"></el-table-column>
<el-table-column prop="bookname" label="书本名称" min-width="30"></el-table-column>
<el-table-column prop="price" label="书本价格" min-width="70"></el-table-column>
<el-table-column prop="booktype" label="书本类型" min-width="70"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination style="margin-top: 15px;"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 40]"
:page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<!--弹出框-->
<el-dialog :title="title" :visible.sync="dialogFormVisible"
:close-on-click-modal="false" @close="dialogClose">
<el-form :model="bookform" :rules="rules" ref="bf">
<el-form-item label="书本编号" :label-width="formLabelWidth">
<el-input readonly="readonly" v-model="bookform.id" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
<el-input v-model="bookform.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
<el-input v-model="bookform.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书本类型" prop="booktype" :label-width="formLabelWidth">
<el-select v-model="bookform.booktype" placeholder="---请选择---" style="width: 100%;">
<el-option v-for="t in btype" :key="t.id" :label="t.name" :value="t.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="doSave()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'BookList',
data: function() {
return {
bookname:null,
result:[],
page:1,
rows:10,
total:0,
title:'新增书本',
dialogFormVisible:false,
formLabelWidth:'80px',
bookform:{
id:null,
bookname:null,
price:null,
booktype:null
},
btype:[
{id:'修仙',name:'修仙'},
{id:'文学',name:'文学'},
{id:'计算机',name:'计算机'},
{id:'玄幻',name:'玄幻'},
{id:'古典',name:'古典'}
],
rules:{
bookname:[
{required: true, message: '请输入书本名称', trigger: 'blur'},
{min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
],
price:[
{required: true, message: '请输入书本价格', trigger: 'blur'}
],
booktype:[
{required: true, message: '请选择书本类型', trigger: 'change'}
]
},
methodname:null
}
},
methods: {
//删除按钮事件
handleDelete:function(index,row){
let url=this.axios.urls.BOOK_BOOKLIST;
this.$confirm('确定要删除当前行吗？', '确认信息', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
//点击确定按钮，进行保存操作
this.axios.post(url,{
'id':row.id,
'methodName':'delBook'
}).then(resp=>{
let json=resp.data;
if(json.success){
this.$message({
message: json.msg,
type: 'success'
});
//刷新数据表格查询出最新添加的数据信息
this.query();
}
else{
this.$message({
message: json.msg,
type: 'error'
});
}
}).catch();
}).catch();
},
//修改按钮事件
handleEdit:function(index,row){
this.bookform.id=row.id;
this.bookform.bookname=row.bookname;
this.bookform.price=row.price;
this.bookform.booktype=row.booktype;
//设置标题为编辑
this.title="书本编辑";
//打开弹出框
this.dialogFormVisible=true;
},
//弹出框关闭事件
dialogClose:function(){
//清空表单中的数据
this.bookform.id=null;
this.bookform.bookname=null;
this.bookform.price=null;
this.bookform.booktype=null;
//清空表单验证
this.$refs['bf'].resetFields();
//将表单的标题改为新增
this.title="书本新增";
},
//保存操作按钮(确定按钮)
doSave:function(){
//表单验证
this.$refs['bf'].validate((valid) => {
if(valid){
let url=this.axios.urls.BOOK_BOOKLIST;
if(this.title=="书本编辑"){
this.methodname='editBook';
}else if(this.title=="书本新增"){
this.methodname='addBook';
}
let params={
id:this.bookform.id,
bookname:this.bookform.bookname,
price:this.bookform.price,
booktype:this.bookform.booktype,
methodName:this.methodname
};
//console.log(params);
//提交表单，发送axios请求
this.axios.post(url,params).then(resp=>{
//console.log(resp);
let json=resp.data;
if(json.success){
this.$message({
message: json.msg,
type: 'success'
});
//关闭弹出框
this.dialogFormVisible=false;
//刷新数据表格查询出最新添加的数据信息
this.query();
}
else{
this.$message({
message: json.msg,
type: 'error'
});
}
}).catch(resp=>{
});
}
});
},
//自定义索引
indexMethod:function(index){
console.log(index);
return index * 2;
},
//新增按钮点击事件
toAdd:function(){
this.dialogFormVisible=true;
},
//查询
query: function(page) {
if(null!=page){
this.page=page;
}
let url=this.axios.urls.BOOK_BOOKLIST;
let params={
bookname:this.bookname,
methodName:'queryBookPager',
page:this.page,
rows:this.rows
};
this.axios.post(url,params).then(resp=>{
console.log(resp.data.data.rows);
this.result=resp.data.data.rows;
this.total=resp.data.data.total;
}).catch(resp=>{
});
},
//改变每页显示条数所触发的事件
handleSizeChange:function(rows){
this.rows=rows;
this.page=1;
this.query(null);
},
//点击分页按钮所触发的事件
handleCurrentChange:function(page){
console.log(page);
this.page=page;
this.query(null);
}
}
}
</script>
<style>
</style>
运行后结果
删除效果
修改效果
新增效果
模糊查询效果
