SPA项目开发之CRUD+表单验证
SPA项目开发之CRUD+表单验证
表单验证
Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可
1 <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"> 2 <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm"> 3 <el-form-item label="文章标题" prop="title"> 4 <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input> 5 </el-form-item> 6 <el-form-item label="文章内容" prop="body"> 7 <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input> 8 </el-form-item> 9 </el-form> 10 <div slot="footer" class="dialog-footer"> 11 <el-button size="small" @click="closeDialog">取消</el-button> 12 <el-button size="small" type="primary" class="title" @click="submitForm">保存</el-button> 13 </div> 14 </el-dialog>
有多个表单，怎么在提交进行区分？
我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用
1 export default { 2 data() { 3 return { 4 listData: [], 5 formInline: { 6 title: '', 7 page: 1, 8 rows: 10, 9 10 }, 11 total: 0, 12 13 editFormVisible: false, 14 title: '', 15 editForm: { 16 body: '', 17 title: '', 18 id: 0 19 }, 20 rules: { 21 title: [{ 22 required: true, 23 message: '请输入文章标题', 24 trigger: 'blur' 25 }, ], 26 body: [{ 27 required: true, 28 message: '请输入文章内容', 29 trigger: 'blur' 30 }, 31 { 32 min: 3, 33 max: 5, 34 message: '长度在3到5个字符', 35 trigger: 'blur' 36 } 37 38 ] 39 40 41 } 42 }; 43 },
CRUD
添加修改/删除按钮
1 <template slot-scope="scope"> 2 <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button> 3 <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button> 4 </template>
新增删除修改
1 <template> 2 <div> 3 <!-- 搜索筛选 --> 4 <el-form :inline="true" :model="formInline" class="user-search"> 5 <el-form-item label="搜索："> 6 <el-input size="small" v-model="formInline.title" placeholder="请输入文章标题"></el-input> 7 </el-form-item> 8 <el-form-item> 9 <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button> 10 <el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加</el-button> 11 </el-form-item> 12 </el-form> 13 <!--列表--> 14 <el-table size="small" :data="listData" border element-loading-text="拼命加载中" style="width: 100%;"> 15 <el-table-column sortable prop="id" label="ID" min-width="300"> 16 </el-table-column> 17 <el-table-column sortable prop="title" label="文章标题" min-width="300"> 18 </el-table-column> 19 <el-table-column sortable prop="body" label="文章内容" min-width="300"> 20 </el-table-column> 21 <el-table-column align="center" label="操作" min-width="300"> 22 <template slot-scope="scope"> 23 <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button> 24 <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button> 25 </template> 26 </el-table-column> 27 </el-table> 28 <!-- 分页条 --> 29 <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" 30 :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.rows" layout="total, sizes, prev, pager, next, jumper" 31 :total="total"> 32 </el-pagination> 33 <!-- 编辑界面 --> 34 <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"> 35 <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm"> 36 <el-form-item label="文章标题" prop="title"> 37 <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input> 38 </el-form-item> 39 <el-form-item label="文章内容" prop="body"> 40 <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input> 41 </el-form-item> 42 </el-form> 43 <div slot="footer" class="dialog-footer"> 44 <el-button size="small" @click="closeDialog">取消</el-button> 45 <el-button size="small" type="primary" class="title" @click="submitForm">保存</el-button> 46 </div> 47 </el-dialog> 48 </div> 49 </template> 50 51 <script> 52 export default { 53 data() { 54 return { 55 listData: [], 56 formInline: { 57 title: '', 58 page: 1, 59 rows: 10, 60 61 }, 62 total: 0, 63 64 editFormVisible: false, 65 title: '', 66 editForm: { 67 body: '', 68 title: '', 69 id: 0 70 }, 71 rules: { 72 title: [{ 73 required: true, 74 message: '请输入文章标题', 75 trigger: 'blur' 76 }, ], 77 body: [{ 78 required: true, 79 message: '请输入文章内容', 80 trigger: 'blur' 81 }, 82 { 83 min: 3, 84 max: 5, 85 message: '长度在3到5个字符', 86 trigger: 'blur' 87 } 88 89 ] 90 91 92 } 93 }; 94 }, 95 methods: { 96 search() { 97 this.doSearch(this.formInline) 98 }, 99 doSearch(params) { 100 let url = this.axios.urls.SYSTEM_ARTICLE_LIST; 101 this.axios.post(url, params).then((response) => { 102 this.listData = response.data.result; 103 this.total = response.data.pageBean.total; 104 console.log(response) 105 }).catch((response) => { 106 console.log(response) 107 }); 108 }, 109 handleSizeChange(rows) { 110 console.log("页码大小发生该百年的时候触发！！" + rows); 111 this.formInline.page = 1; 112 this.formInline.rows = rows; 113 this.search(); 114 }, 115 handleCurrentChange(page) { 116 console.log("当前页页码大小发生该百年的时候触发！！" + page); 117 this.formInline.page = page; 118 this.search(); 119 }, 120 closeDialog() { 121 this.editFormVisible = false; 122 this.clearForm(); 123 }, 124 submitForm() { 125 //用来提交新增/修改表单数据的，提交之前需要通过Vue实例中定义的表单填写规则 126 this.$refs['editForm'].validate((valid) => { 127 if (valid) { 128 let url; 129 if (this.editForm.id == 0) { 130 url = this.axios.urls.SYSTEM_ARTICLE_ADD; 131 } else { 132 url = this.axios.urls.SYSTEM_ARTICLE_EDIT; 133 } 134 this.axios.post(url,this.editForm).then((response) => { 135 136 console.log(response); 137 this.clearForm(); 138 this.doSearch(this.formInline); 139 }).catch((response) => { 140 console.log(response); 141 }); 142 } else { 143 console.log('error submit!!'); 144 return false; 145 } 146 }); 147 }, 148 clearForm() { 149 this.editForm.title = ''; 150 this.editForm.body = ''; 151 this.formInline.page = 1; 152 this.formInline.rows = 10; 153 this.editFormVisible=false; 154 155 }, 156 add() { 157 this.title = '新增文章'; 158 this.editFormVisible = true; 159 }, 160 edit(index, row) { 161 this.title = '编辑文章'; 162 //index代表的是操作数据在当前界面的行号 163 //row代表操作的当前数据，那也就意味着可以冲row中或所有数据库列段名 164 this.editForm.id = row.id; 165 this.editForm.title = row.title; 166 this.editForm.body = row.body; 167 this.editFormVisible = true; 168 }, 169 del(index, row) { 170 let url = this.axios.urls.SYSTEM_ARTICLE_DEL; 171 this.axios.post(url, { 172 id: row.id 173 }).then((response) => { 174 console.log(response); 175 this.clearForm(); 176 this.doSearch({}); 177 }).catch((response) => { 178 console.log(response); 179 }); 180 } 181 182 }, 183 created() { 184 this.doSearch({}); 185 } 186 } 187 </script> 188 189 <style> 190 191 </style>
修改
