SPA項目開發之CRUD+表單驗證
和上一篇部落格連在一起的：spa動态樹和資料表格
1、表單驗證
我這裡用到是Dialog嵌套表單
在Articles.vue 中改動，
<!-- 搜尋 -->
<el-form :inline="true" :model="formInline" class="user-search">
<el-form-item label="搜尋：">
<el-input size="small" v-model="formInline.title" placeholder="輸入文章标題"></el-input>
</el-form-item>
<el-form-item>
<el-table-column align="center" label="操作" min-width="2">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
<!-- 編輯界面 -->
<el-dialog :title="title" :visible.sync="editFormVisible" :before-close="handleClose" width="30%">
<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
<el-form-item label="文章标題" prop="title">
<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="請輸入文章标題"></el-input>
</el-form-item>
<el-form-item label="文章内容" prop="body">
<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="請輸入文章内容"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取消</el-button>
<el-button size="small" type="primary" class="title" @click="submitForm('editForm')">儲存</el-button>
</div>
</el-dialog>
把對應的屬性在script中定義，不然會報錯
/* 表單驗證 */
title: '', // 彈出層标題
editFormVisible: false, // 是否打開彈出層
editForm: {
id: 0,
title: '',
body: ''
},
rules: { // 校驗規則
title: [{
required: true,
message: '請輸入活動名稱',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '長度在 3 到 10 個字元',
trigger: 'blur'
}
],
body: [{
required: true,
message: '請選擇活動區域',
trigger: 'change'
}]
}
};
},
methods: {
closeDialog() { // 彈出層調用取消的方法
},
submitForm(formName) { // 送出表單
},
handleAdd() { // 新增
},
handleEdit(index, row) { // 編輯
},
deleteUser(index, row) { // 删除
},
clearData() { // 清楚彈出層表單資料
},
handleClose(done) { // 僅當使用者通過點選關閉圖示或遮罩關閉 Dialog 時起效。
}
},
點選上方增加：
Form元件提供了表單驗證的功能，隻需要通過 rules 屬性傳入約定的驗證規則，
并将Form-Item的prop屬性設定為需校驗的字段名即可
注意1：現在的正則是無效的，不滿足條件也可以送出成功。需要加入：
(更多可以去elementUi官網檢視)
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!'); // 滿足正則條件
} else {
console.log('error submit!!'); // 不滿足
return false;
}
});
}
2、CRUD（增，删，改）
下面完整js 代碼，把上面定義的空方法補全
（裡面有些方法和上一篇部落格有關系）
<script>
export default {
data() {
return {
listData: [],
formInline: {
page: 1,
rows: 10,
title: ''
},
total: 0,
/* 表單驗證 */
title: '', // 彈出層标題
editFormVisible: false, // 是否打開彈出層
editForm: {
id: 0,
title: '',
body: ''
},
rules: { // 校驗規則
title: [{
required: true,
message: '請輸入活動名稱',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '長度在 3 到 10 個字元',
trigger: 'blur'
}
],
body: [{
required: true,
message: '請選擇活動區域',
trigger: 'change'
}]
}
};
},
methods: {
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);
},
// 查詢也需要這個方法，定義通用
doSearch(params) {
let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
this.axios.post(url, this.formInline).then(response => {
// 獲得背景傳來的 result 資料
console.log(response);
//表格資料
this.listData = response.data.result;
// 符合查詢最大頁碼數
this.total = response.data.pageBean.total;
}).catch(function(error) {
console.log(error);
});
},
closeDialog() { // 彈出層調用取消的方法
this.clearData();
},
submitForm(formName) { // 送出表單
this.$refs[formName].validate((valid) => {
if (valid) {
let url;
if (this.editForm.id == 0) {
// 增加
url = this.axios.urls.SYSTEM_ARTICLE_ADD;
} else {
// 修改
url = this.axios.urls.SYSTEM_ARTICLE_UPDATE;
}
this.axios.post(url, this.editForm).then(response => {
var code = response.data.code;
if (code == 1) {
this.$message({
message: response.data.msg,
type: 'success'
});
this.search(); // 重新重新整理資料
this.clearData();// 關閉彈出層
} else {
this.$message({
message: response.data.msg,
type: 'warning'
});
}
}).catch(function(error) {
console.log(error);
});
} else {
console.log('error submit!!');
return false;
}
});
},
handleAdd() { // 新增
this.editFormVisible = true;
this.title = '新增資料';
},
handleEdit(index, row) { // 編輯
this.title = '修改資料';
this.editFormVisible = true;
// 給 表單指派
this.editForm.id = row.id;
this.editForm.title = row.title;
this.editForm.body = row.body;
},
deleteUser(index, row) { // 删除
let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
this.axios.post(url, {
id: row.id
}).then(response => {
var code = response.data.code;
if (code == 1) {
this.$message({
message: response.data.msg,
type: 'success',
});
this.search(); // 重新重新整理資料
this.clearData();
} else {
this.$message({
message: response.data.msg,
type: 'warning'
});
}
}).catch(function(error) {
console.log(error);
});
},
clearData() { // 清楚彈出層表單資料
this.title = '';
this.editForm.id = 0;
this.editForm.title = '';
this.editForm.body = '';
this.editFormVisible = false;
},
handleClose(done) { // 僅當使用者通過點選關閉圖示或遮罩關閉 Dialog 時起效。
this.title = '';
this.editForm.id = 0;
this.editForm.title = '';
this.editForm.body = '';
done();
}
},
// 鈎子函數 頁面加載會自動執行
created() {
this.doSearch({});
}
}
</script>
運作：
增加成功：
修改：