SPA项目开发之CRUD+表单验证

一、SPA项目开发之表单验证

二、SPA项目开发之CRUD

一、SPA项目开发之表单验证

我们做项目的都关乎到增删改查的功能，在进行增删改查功能之前，我们必须有一个表单验证。

1、首先先写入表单验证的代码：这里面需要注意的是变量，以及定义方法

    <!-- 编辑界面 --><el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"><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>

定义变量以及方法：

变量代码：

return {
listData: [],
title: '',
editFormVisible: false,
formInline: {
page: 1,
rows: 10,
total: 0
},
editForm: {
id: 0,
title: '',
body: ''
},

rules规则：如果在增改或者修改时，长度没有达标就会进行提示，这就是表单验证：

 rules: {title: [{required: true,message: '请输入活动名称',trigger: 'blur'},{min: 3,max: 5,message: '长度在 3 到 5 个字符',trigger: 'blur'}],body: [{required: true,message: '请输入文章内容',trigger: 'change'}]}

方法代码：

clearData() {//清除数据的方法editFormVisible: false,this.title = '',this.editForm.id = 0,this.editForm.title = '',this.editForm.body = '';},closeDialog() {//关闭弹出框的方法this.clearData();},handleEdit(index, row) {this.clearData();this.editFormVisible = true;if (row) {//取到当前一行this.title = '编辑窗口',this.editForm.id = row.id,this.editForm.title = row.title,this.editForm.body = row.body;} else {this.title = '新增窗口'}},deleteUser(index, row) {},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_EDIT;}this.axios.post(url, this.editForm).then((resp) => { //前后端交互的代码this.clearData();this.search();}).catch(function(error) {console.log(error);});} else {console.log('error submit!!');return false;}});},

做好表单验证就是为后面的增删改查打好基础。

二、SPA项目开发之CRUD

下面分享的是增删改，查询在上次博客中已经分享了

一、增加：

1、思路：

1、点击增加时，要弹出一个提示框，里面包含着文章标题和文章内容

2、表单验证有限制，如果长度没有达到要求时就会提示。

3、当我点击增加按钮时就会调用增加方法

2、代码：

1、点击增加时，要弹出一个提示框，里面包含着文章标题和文章内容：

handleEdit(index, row) {
this.clearData();
this.editFormVisible = true;//弹出提示框
if (row) {//取到当前一行
this.title = '编辑窗口',
this.editForm.id = row.id,
this.editForm.title = row.title,
this.editForm.body = row.body;
} else {
this.title = '新增窗口'
}
},

2、表单验证有限制，如果长度没有达到要求时就会提示：

 rules: {title: [{required: true,message: '请输入活动名称',trigger: 'blur'},{min: 3,max: 5,message: '长度在 3 到 5 个字符',trigger: 'blur'}],body: [{required: true,message: '请输入文章内容',trigger: 'change'}]

3、当我点击增加按钮时就会调用增加方法：

url = this.axios.urls.SYSTEM_ARTICLE_ADD;//增加的方法。

增加的效果：

现在是161条数据：

现在增加一条数据：

现在有163条数据：表明增加成功。

二、修改：

1、思路：

1、点击一条数据进行修改，前提是要进行选中那一行

2、选中之后，由于和增加是调用同一个方法handleEdit（里面有两个参数），且弹出的是同一个弹出框，区别在于修改要选中行数，而增加不要选中行数

3、最后点击修改是调用后台方法，进行修改

1、点击一条数据进行修改，前提是要进行选中那一行

2、选中之后，由于和增加是调用同一个方法handleEdit（里面有两个参数），且弹出的是同一个弹出框，区别在于修改要选中行数，而增加不要选中行数

代码：

 handleEdit(index, row) {this.clearData();this.editFormVisible = true;//弹出提示框if (row) {//取到当前一行this.title = '编辑窗口',this.editForm.id = row.id,this.editForm.title = row.title,this.editForm.body = row.body;} else {this.title = '新增窗口'}},

3、最后点击修改是调用后台方法，进行修改：

url = this.axios.urls.SYSTEM_ARTICLE_EDIT;

三、删除：

1、首先要写好删除的方法，到后台调用删除方法

2、其次最重要的是删除方法要传一个id，进行删除，删除之前可以弹出一个询问框，进行询问，如果确定，就会删除，如果取消，就不会删除，这也同时满足客户需求

首先要写好删除的方法，到后台调用删除方法

deleteUser(index,row) {
this.editForm.id=row.id;//获取到这一行的id(其次最重要的是删除方法要传一个id，进行删除)
let url = this.axios.urls.SYSTEM_ARTICLE_DEL;//到后台调用删除方法
this.axios.post(url, this.editForm).then((resp) => { //前后端交互的代码
this.clearData();//使用时清空数据
this.search();//删除之后进行查询
}).catch(function(error) {
console.log(error);
});
},

总体代码：

deleteUser(index, row) {this.$confirm('确定要删除吗?', '信息', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {deptDelete(row.deptId).then(res => {if (res.success) {this.editForm.id=row.id;//获取到这一行的idlet url = this.axios.urls.SYSTEM_ARTICLE_DEL;//到后台调用删除方法this.axios.post(url, this.editForm).then((resp) => { //前后端交互的代码this.clearData();//使用时清空数据this.search();//删除之后进行查询}).catch(function(error) {console.log(error);});this.$message({type: 'success',message: '该记录已删除!'})this.getdata(this.formInline)} else {this.$message({type: 'info',message: res.msg})}}).catch(err => {this.loading = falsethis.$message.error('该记录删除失败，请稍后再试！')})}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})},

当我点击删除时，就会先弹出一个询问框：

当我点击确定后，该条数据就被删除了。

今天的知识就分享到这里了，希望对你有所帮助！