spa项目如何实现CRUD+表单验证
CRUD+表单验证的实现
- 前言
-
- 1、后台数据接口准备
- 2、Dialog弹出框
- 3、表单
- 4、表单验证
- 5、代码实现
-
- action.js
- BookList.vue
- 效果展示
- 总结
前言
这篇博客也是在之前博客的基础上进行增加了增删改的功能，当然也可以看看我的上一篇博客啦！
首页左侧动态树+数据表格+分页
1、后台数据接口准备
增删改查的dao方法
增删改查的Action方法
2、Dialog弹出框
新增、修改、以及编辑的页面都使用到了该Dialog弹出框！
Dialog弹出框结构展示：
<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>
当然你也可以参考ElementUI官网中Dialog弹出框的使用以及示例!
3、表单
这里粘贴的代码主要是表单的一个基本结构！
<!-- 命名的form表单用来提交的 指定的是一个范围-->
<!-- rules是用来验证 ref只是一个引用范围-->
<el-form :model="bookForm" :rules="rules" ref="bf">
<!-- label-width用来控制文本框的长度-->
<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-item label="书本价格" prop="price" :label-width="formLabelWidth">
<el-input v-model.number="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="book in btype" :key="book.id" :label="book.name" :value="book.id"></el-option>
</el-select>
</el-form-item>
</el-form>
4、表单验证
这里使用的表单验证可参考ElementUi官网，rules是用来验证 ref只是一个引用范围！
加上表单验证后的效果
表单重置时必须先清空表单验证信息，再清空表单数据信息
this.$refs[formName].resetFields();
此时formName是指el-form ref=“bookForm” 中定义的ref属性名!
5、代码实现
action.js
用来配置和后台交互的路径，方便我们合理调用后台方法！
/**
* 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
'SERVER':'http://localhost:8083/j2eeVue', //服务器
'SYSTEM_USER_DOLOGIN':'/userAction.action', //登陆
'SYSTEM_USER_DOREG': '/userAction.action', //注册
'SYSTEM_MODULE_TREENODE':'/moduleAction.action',//动态树
'BOOK_BOOKLIST':'/bookAction.action',//书本
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
action.js图示
BookList.vue
这个文件的代码中使用了很多ElementUI官网中的一些组件，例如面包屑、数据表格、分页以及dialog对话框、弹框和icon图标！
<template>
<div>
<!-- 面包屑 -->
<el-breadcrumb separator="/" style="padding-top:15px;">
<el-breadcrumb-item :to="{path: '/Home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">书本管理</a></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 prop="id" label="书本编号" min-width="40" align="center"></el-table-column>
<el-table-column prop="bookname" label="书本名称" min-width="40"></el-table-column>
<el-table-column prop="price" label="书本价格" min-width="40"></el-table-column>
<el-table-column prop="booktype" label="书本类型" min-width="40"></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-table>
<!-- 分页 -->
<el-pagination
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>
<!-- 新增和编辑的弹出框 -->
<!-- 给title进行绑定 设置默认的文本 :visible.sync用来控制弹出框显示还是隐藏 close-on-click-modal 是否可以通过点击 modal关闭 Dialog-->
<el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="dialogClose">
<!-- 命名的form表单用来提交的 指定的是一个范围-->
<!-- rules是用来验证 ref只是一个引用范围-->
<el-form :model="bookForm" :rules="rules" ref="bf">
<!-- label-width用来控制文本框的长度-->
<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="book in btype" :key="book.id" :label="book.name" :value="book.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:[],
total:0,
page:1,
rows:10,
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:'军事'},
{id:'武侠',name:'武侠'},
],
rules: {
bookname: [
//required表示是否必填 message表示提示的信息 trigger表示触发的事件
{required: true, message: '请输入书本名称', trigger: 'blur' },
{min:3, max:15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
],
price:[
{required: true, message: '请输入书本价格', trigger: 'blur' },
],
booktype: [
{required: true, message: '请选择书本类型', trigger: 'change' }
],
methodName:null
}
}
},
methods:{
/* 修改按钮事件*/
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.dialogFormVisible=true;
//设置标题为书本编辑
this.title='书本编辑';
},
/* */
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;
console.log(json);
if(json.success){
this.$message({
message:json.msg,
type: 'success'
});
//刷新数据表格查询出最新添加的数据信息
this.query();
}
else{
this.$message({
message:json.msg,
type: 'error'
});
}
}).catch();
}).catch();
},
//弹出框关闭事件
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="addBook";
}else if(this.title="书本编辑"){
this.methodName='editBook';
}
let params={
id:this.bookForm.id,
bookname:this.bookForm.bookname,
price:this.bookForm.price,
booktype:this.bookForm.booktype,
methodName:this.methodName
};
console.log(params);
this.axios.post(url,params).then(resp=>{
/* console.log(resp); */
let json=resp.data;
console.log(json);
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=>{
});
}
});
},
//点击新增按钮触发方法
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
};
/* post方式进行提交 */
this.axios.post(url,params).then(resp=>{
this.result=resp.data.data.rows;
this.total=resp.data.data.total;
}).catch(resp=>{});
},
//改变每页显示条数所出发的事件
handleSizeChange:function(rows){
this.rows=rows;
this.query(null);
},
handleCurrentChange:function(page){
console.log(page);
this.page=page;
this.query(null);
}
}
}
</script>
<style>
</style>
效果展示
整体效果
当点击新增按钮时 点击文本框边缘时候 会有表单的验证！
新增数据的时候
增加成功后会有相关的提示！
模糊查询查看数据是否真正增加成功~
书本的修改
例如将西游记第二部进行修改
将其修改后的数据
此时编号为1的数据已经修改成功！
修改成功的相关提示！
书本删除
例如我想要删除编号为5的数据
点击确定后，数据被删除，页面会再次刷新，弹出删除成功的提示！
总结
整体的组件效果基本上是采用了ElementUI官网的组件，由此可见，ElementUI可提升开发效率，当然使用官网组件时，注意细节部分，以免想要的效果体现不了！