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

目录

一，表单验证

 二，增删改功能的实现

---

一，表单验证

编辑界面和增加界面：

<!--增加/ 编辑界面 -->
		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="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>

 功能代码：

data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				total: 0,
				title: '',
				editFormVisible: false,
				editForm: {
					title: '',
					body: '',
					id: 0
				},
				rules: {
					title: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}]
				}
			};
		},

 

 

 

 二，增删改功能的实现

增加：

 

代码：

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;
						}
						// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
 
						this.axios.post(url, this.editForm).then((response) => {
							console.log(response);
							this.clearData();
							this.search();
						}).catch(function(error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}

新增的数据：

 编辑： 

 代码

handleEdit(index, row) {
				this.editFormVisible = true;
				if (row) {
					//console.log(row);
					this.editForm.id = row.id;
					this.editForm.title = row.title;
					this.editForm.body = row.body
					this.editFormVisible = true;
					this.title = '编辑窗体';
 
				} else {
					//console.log(row);
 
					this.title = '新增窗体';
				}
 
 
			}

修改： 

保存： 

 删除提示： 

deleteUser(index, row) {
				this.$confirm('此操作将永久删除文件，是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
					this.axios.post(url, {id:row.id}).then(r => {
						this.$message({
							type: r.data.msg,
							message: '删除成功!'
						});
						this.closeDialog();
						this.search();
					}).catch(e => {
 
					})
 
 
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}

 点击删除按钮：