SPA项目开发 关于 CURD和表单验证

目录

一、表单验证

二、增删改查功能实现

增加和编辑功能

 删除

---

一、表单验证

表单验证
1.1 出现表单组件 el-from
1.2 通过点击 新增/编辑将表单对应窗口弹出
1.3 给表单设置规则 rules
1.4 当表单提交时要校验规则

编辑和增加界面

		
			
				
					
				
				
					
				
			
			

				取消
				保存
			
		

Script内容

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

 

 

 

二、增删改查功能实现

增加和编辑功能

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='新增窗体';
				}
			}

 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);
							// 新增成功后，1、关闭窗体 2、重新查询
							this.$message({
								message:response.data.msg,
								type:'success'
							});
							this.clearData();
							this.search();
						}).catch(function(error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},

增加效果：

一共有157条数据

 添加一条数据

 可以看到有158条数据

 

 修改效果：

将刚才新增的数据进行修改

 

修改成功

 

 删除

deleteUser(index, row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$message({
					type: 'success',
					message: '删除成功!'
				  });
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
				this.axios.post(url, {id:row.id}).then((response) => {
					// console.log(response);
					this.$message({
						message:response.data.msg,
						type:'success'
					});
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},

效果展示：

将刚才增加的数据删掉

可以看到我们的数据又变成了156条

 

 

完整代码：
 

今天 的内容就分享到这里了！！！！