前言：我们这次在继续完善功能今天我们要通过上次的数据表格进行一个对数据库的crud操作，
1.表单验证
Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可<el-form-itemlabel="活动名称"prop="name"><el-form:model="ruleForm":rules="rules"ref="ruleForm"注1：有多个表单，怎么在提交进行区分？我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，所以我们一开始就在el-form里写了ref="ruleForm"，我们在methods里就可以用注2：清空表单验证信息this.$refs[formName].resetFields();crud操作
整体代码组件的html代码
<template><div><!--搜索筛选--><el-form:inline="true":model="formInline"class="user-search"><el-form-itemlabel="搜索："><el-inputsize="small"v-model="formInline.title"placeholder="输入文章标题"></el-input></el-form-item><el-form-item><el-buttonsize="small"type="primary"icon="el-icon-search"@click="search">搜索</el-button><el-buttonsize="small"type="primary"icon="el-icon-plus"@click="handleAdd()">添加</el-button></el-form-item></el-form><!--列表--><el-tablesize="small":data="listData"borderelement-loading-text="拼命加载中"style="width:100%;"><el-table-columnalign="center"type="selection"min-width="1"></el-table-column><el-table-columnsortableprop="id"label="文章的id"min-width="1"></el-table-column><el-table-columnsortableprop="title"label="文章的标题"min-width="2"></el-table-column><el-table-columnsortableprop="body"label="文章的内容"min-width="4"></el-table-column><el-table-columnalign="center"label="操作"min-width="2"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index,scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="deleteUser(scope.$index,scope.row)">删除</el-button></template></el-table-column></el-table><!--分页条--><el-paginationstyle="margin-top:20px;"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="formInline.page":page-sizes="[10,20,30,50]":page-size="100"layout="total,sizes,prev,pager,next,jumper":total="total"></el-pagination><!--编辑界面--><el-dialog:title="title":visible.sync="editFormVisible"width="30%"@click="closeDialog"><el-formlabel-width="120px":model="editForm":rules="rules"ref="editForm"><el-form-itemlabel="文章的标题"prop="title"><el-inputsize="small"v-model="editForm.title"auto-complete="off"placeholder="请输入文章的标题"></el-input></el-form-item><el-form-itemlabel="文章的内容"prop="body"><el-inputsize="small"v-model="editForm.body"auto-complete="off"placeholder="请输入文章的内容"></el-input></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-buttonsize="small"@click="closeDialog">取消</el-button><el-buttonsize="small"type="primary"class="title"@click="submitForm('editForm')">保存</el-button></div></el-dialog></div></template>
组件的html代码
<script>exportdefault{data(){return{listData:[],formInline:{page:1,rows:10,title:''},total:0,editForm:{id:0,title:'',body:''},editFormVisible:false,title:'',rules:{title:[{required:true,message:'请输入文章的标题',trigger:'blur'},{min:3,max:5,message:'文章标题长度在3到5个字符',trigger:'blur'}],body:[{required:true,message:'请输入文章的内容',trigger:'blur'}]}};},methods:{doSearch(params){leturl=this.axios.urls.SYSTEM_ARTICLE_LIST;this.axios.post(url,params).then((response)=>{console.log(response);this.listData=response.data.result;this.total=response.data.pageBean.total;}).catch(function(error){console.log(error);});},handleSizeChange(rows){console.log('页大小发生了改变：'+rows)this.formInline.page=1;this.formInline.rows=rows;this.search();},handleCurrentChange(page){console.log('当前页发生了改变：'+page)this.formInline.page=page;this.search();},search(){this.doSearch(this.formInline);},closeDialog(){},submitForm(formName){this.$refs[formName].validate((valid)=>{if(valid){leturl;if(this.editForm.id==0){url=this.axios.urls.SYSTEM_ARTICLE_ADD;}else{url=this.axios.urls.SYSTEM_ARTICLE_EDIT;}this.axios.post(url,this.editForm).then((response)=>{console.log(response);this.clearDate();this.search();}).catch(function(error){console.log(error);});}else{console.log('errorsubmit!!');returnfalse;}});},handleAdd(){this.clearDate();this.editFormVisible=true;this.title='新增文章';},handleEdit(index,row){this.editFormVisible=true;this.title='编辑文章';this.editForm.id=row.id;this.editForm.title=row.title;this.editForm.body=row.body;},deleteUser(index,row){leturl=this.axios.urls.SYSTEM_ARTICLE_DEL;this.axios.post(url,{id:row.id}).then((response)=>{console.log(response);this.clearDate();this.search();}).catch(function(error){console.log(error);});},clearDate(){this.editFormVisible=false;this.title='';this.editForm.id=0;this.editForm.title='';this.editForm.body='';}},/*初始化数据*/created(){this.doSearch({});}}</script>
增加文章所以有一个点击事件在点击过后就直接弹出一模态框。所以在java中处理
<script>exportdefault{data(){return{listData:[],pageBean:{total:0},formInline:{title:'',page:1,rows:10,total:0},title:'',editFormVisible:false,editForm:{id:0,title:'',body:''},rules:{title:[{required:true,message:'请输入文章标题',trigger:'blur'},],body:[{required:true,message:'请输入文章内容',trigger:'blur'},{min:3,max:5,message:'长度在3到5个字符',trigger:'blur'}]}};},methods:{search(){this.doSearch(this.formInline)},doSearch(params){leturl=this.axios.urls.SYSTEM_ARTICLE_LIST;this.axios.post(url,params).then((response)=>{console.log(response);this.listData=response.data.result;this.pageBean=response.data.pageBean;}).catch((response)=>{console.log(response);});},handleSizeChange(rows){console.log("页码数量发生了改变");this.formInline.page=1;this.formInline.rows=rows;this.search();},handleCurrentChange(page){console.log("页数发生了改变");this.formInline.page=page;this.search();},add(){this.title='增加窗体';this.editFormVisible=true;},edit(index,rows){this.title='编辑窗体';this.editForm.id=rows.id;this.editForm.title=rows.title;this.editForm.body=rows.body;this.editFormVisible=true;},del(index,rows){if(confirm('你是否要删除?')){leturl=this.axios.urls.SYSTEM_ARTICLE_DEL;this.axios.post(url,{id:rows.id}).then((response)=>{console.log(response);alert("删除成功");this.doSearch();this.clearForm();}).catch((response)=>{console.log(response);alert("删除失败");});}},closeDialog(){this.clearForm();},submitForm(){this.$refs['editForm'].validate((valid)=>{if(valid){leturl;if(this.editForm.id==0){url=this.axios.urls.SYSTEM_ARTICLE_ADD;}else{url=this.axios.urls.SYSTEM_ARTICLE_EDIT;}this.axios.post(url,this.editForm).then((response)=>{console.log(response);alert("编辑成功");this.clearForm();this.doSearch(this.formInline);}).catch((response)=>{console.log(response);alert("编辑失败");});}else{alert('增加失败，请根据格式输入');returnfalse;}});},clearForm(){this.editForm.id=0;this.editForm.title='';this.editForm.body='';this.formInline.page=1;this.formInline.rows=10;this.editFormVisible=false;}},created(){this.doSearch({});}}</script>
下面的一个rules就是表单的一个验证。看一下增加效果：首先我们增加一个文章标题必须是3-5个字符修改文章有一个点击事件在点击过后就直接弹出一模态框
<script>exportdefault{data(){return{listData:[],pageBean:{total:0},formInline:{title:'',page:1,rows:10,total:0},title:'',editFormVisible:false,editForm:{id:0,title:'',body:''},rules:{title:[{required:true,message:'请输入文章标题',trigger:'blur'},],body:[{required:true,message:'请输入文章内容',trigger:'blur'},{min:3,max:5,message:'长度在3到5个字符',trigger:'blur'}]}};},methods:{search(){this.doSearch(this.formInline)},doSearch(params){leturl=this.axios.urls.SYSTEM_ARTICLE_LIST;this.axios.post(url,params).then((response)=>{console.log(response);this.listData=response.data.result;this.pageBean=response.data.pageBean;}).catch((response)=>{console.log(response);});},handleSizeChange(rows){console.log("页码数量发生了改变");this.formInline.page=1;this.formInline.rows=rows;this.search();},handleCurrentChange(page){console.log("页数发生了改变");this.formInline.page=page;this.search();},add(){this.title='增加窗体';this.editFormVisible=true;},edit(index,rows){this.title='编辑窗体';this.editForm.id=rows.id;this.editForm.title=rows.title;this.editForm.body=rows.body;this.editFormVisible=true;},del(index,rows){if(confirm('你是否要删除?')){leturl=this.axios.urls.SYSTEM_ARTICLE_DEL;this.axios.post(url,{id:rows.id}).then((response)=>{console.log(response);alert("删除成功");this.doSearch();this.clearForm();}).catch((response)=>{console.log(response);alert("删除失败");});}},closeDialog(){this.clearForm();},submitForm(){this.$refs['editForm'].validate((valid)=>{if(valid){leturl;if(this.editForm.id==0){url=this.axios.urls.SYSTEM_ARTICLE_ADD;}else{url=this.axios.urls.SYSTEM_ARTICLE_EDIT;}this.axios.post(url,this.editForm).then((response)=>{console.log(response);alert("编辑成功");this.clearForm();this.doSearch(this.formInline);}).catch((response)=>{console.log(response);alert("编辑失败");});}else{alert('增加失败，请根据格式输入');returnfalse;}});},clearForm(){this.editForm.id=0;this.editForm.title='';this.editForm.body='';this.formInline.page=1;this.formInline.rows=10;this.editFormVisible=false;}},created(){this.doSearch({});}}</script>
增加和修改用的都是同一个模态框，所以唯一要变得就是title属性接下来看一下修改的效果：我们把刚才增加的数据改了删除文章?！！！
