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

于 2019-09-03 11:17:54 发布
阅读量106 收藏
点赞数
文章标签： SPA项目开发之CRUD和表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45174537/article/details/100430132
版权

表单验证

Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
并将Form-Item的prop属性设置为需校验的字段名即可

<el-form-item label="活动名称" prop="name">

 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

代码如下：

<!-- 编辑界面 -->
		<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()">保存</el-button>
			</div>
		</el-dialog>

rules表单验证

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

增删改功能实现

增加和修改文章

一个点击事件：

<el-button size="small" type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
<el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>

<script>
	export default {
		data() {
			return {
				listData: [],
				pageBean: {
					total: 0
				},
				formInline: {
					title: '',
					page: 1,
					rows: 10,
					total: 0
				},
				title: '',
				editFormVisible: false,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
					],
					body: [{
							required: true,
							message: '请输入文章内容',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '文章内容长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					]
				}


			};
		},
		methods: {
			search() {
				this.doSearch(this.formInline)
			},
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, params).then((response) => {
					console.log(response);
					this.listData = response.data.result;
					this.pageBean = response.data.pageBean;
				}).catch((response) => {
					console.log(response);
				});
			},
			handleSizeChange(rows) {
				console.log("页码数量发生了改变");
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				console.log("页数发生了改变");
				this.formInline.page = page;
				this.search();

			},
			add() {
				this.title = '增加窗体';
				this.editFormVisible = true;
			},
			edit(index, rows) {
				// index代表的是操作数据在当前界面的行号
				// row代表操作的当前数据，那也就意味着可以冲row中或所有数据库列段名
				// var row = $("#dd").datagrid("getSelected");
				// $("#ff").form("load",row);完成了数据回显
				this.title = '编辑窗体';
				this.editForm.id = rows.id;
				this.editForm.title = rows.title;
				this.editForm.body = rows.body;
				this.editFormVisible = true;

			},
			del(index, rows) {
				if (confirm('你是否要删除?')) {
					let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
					this.axios.post(url, {
						id: rows.id
					}).then((response) => {
						console.log(response);
						alert("删除成功");
						this.doSearch();
						this.clearForm();
					}).catch((response) => {
						console.log(response);
						alert("删除失败");
					});

				}
			},
			closeDialog() {
 				this.clearForm();
			},
			submitForm() {
				this.$refs['editForm'].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((response) => {
							console.log(response);
							alert("编辑成功");
							this.clearForm();
							this.doSearch(this.formInline);
						}).catch((response) => {
							console.log(response);
							alert("编辑失败");
						});
					} else {
						alert('增加失败，请根据格式输入');
						return false;
					}
				});

			},
			clearForm() {
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';
				this.formInline.page = 1;
				this.formInline.rows = 10;
				this.editFormVisible = false;
			}
		},
		created() {
			this.doSearch({});

		}


	}
</script>

增加和修改用的都是同一个模态框，唯一要变的就是title属性

在这里插入图片描述
在这里插入图片描述

删除文章

<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>

del(index, rows) {
				if (confirm('你是否要删除?')) {
					let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
					this.axios.post(url, {
						id: rows.id
					}).then((response) => {
						console.log(response);
						alert("删除成功");
						this.doSearch();
						this.clearForm();
					}).catch((response) => {
						console.log(response);
						alert("删除失败");
					});

				}
			},

【注】清空表单验证信息

clearForm() {
		this.editForm.id = 0;
		this.editForm.title = '';
		this.editForm.body = '';
		this.formInline.page = 1;
		this.formInline.rows = 10;
		this.editFormVisible = false;
}

整体代码

<template>
	<div>
		<!-- 搜索筛选 -->
		<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-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button size="small" type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="listData" style="width: 100%;" :border="true" max-height="550">
			<el-table-column prop="id" label="ID" min-width="10" align="center"></el-table-column>
			<el-table-column prop="title" label="标题" min-width="20"></el-table-column>
			<el-table-column prop="body" label="内容" min-width="70"></el-table-column>
			<el-table-column align="center" label="操作" min-width="30">
				<template slot-scope="scope">
					<el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
		 :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.rows" layout="total, sizes, prev, pager, next, jumper"
		 :total="pageBean.total">
		</el-pagination>
		<!-- 编辑界面 -->
		<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()">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				pageBean: {
					total: 0
				},
				formInline: {
					title: '',
					page: 1,
					rows: 10,
					total: 0
				},
				title: '',
				editFormVisible: false,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},

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


			};
		},
		methods: {
			search() {
				this.doSearch(this.formInline)
			},
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, params).then((response) => {
					console.log(response);
					this.listData = response.data.result;
					this.pageBean = response.data.pageBean;
				}).catch((response) => {
					console.log(response);
				});
			},
			handleSizeChange(rows) {
				console.log("页码数量发生了改变");
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				console.log("页数发生了改变");
				this.formInline.page = page;
				this.search();

			},
			add() {
				this.title = '增加窗体';
				this.editFormVisible = true;


			},
			edit(index, rows) {
				this.title = '编辑窗体';
				this.editForm.id = rows.id;
				this.editForm.title = rows.title;
				this.editForm.body = rows.body;
				this.editFormVisible = true;

			},
			del(index, rows) {
				if (confirm('你是否要删除?')) {
					let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
					this.axios.post(url, {
						id: rows.id
					}).then((response) => {
						console.log(response);
						alert("删除成功");
						this.doSearch();
						this.clearForm();
					}).catch((response) => {
						console.log(response);
						alert("删除失败");
					});

				}
			},
			closeDialog() {

				this.clearForm();


			},
			submitForm() {
				this.$refs['editForm'].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((response) => {
							console.log(response);
							alert("编辑成功");
							this.clearForm();
							this.doSearch(this.formInline);
						}).catch((response) => {
							console.log(response);
							alert("编辑失败");
						});
					} else {
						alert('增加失败，请根据格式输入');
						return false;
					}
				});

			},
			clearForm() {
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';
				this.formInline.page = 1;
				this.formInline.rows = 10;
				this.editFormVisible = false;
			}
		},
		created() {
			this.doSearch({});

		}


	}
</script>

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Summer∩_∩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SPA项目开发之CRUD+表单验证
yzq102873的博客
09-14 152
SPA项目开发之CRUD+表单验证
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向（十二）.doc
10-22
在本篇文档中，我们将探讨如何在已有的数据库表基础上，利用 Vue 和 Quasar 框架构建的 CRUDAPI 前端SPA项目中实现数据库逆向工程，以方便管理和操作业务数据。这一过程通常被称为“dbfirst”模式，即先有数据库结构...
travel-App-Mytinerary：在React中使用Redux开发的Travel SPA，用于状态管理，Node，Express＆MongoDB和用于用户界面的Material-UI，具有完整的CRUD功能，身份验证和授权（凭证和oauth），密码重置，图像上传，内容创建和更新功能，用户可以在其中创建和编辑个人资料，自定义旅行路线，评论，评论和收藏夹
02-28
这个项目展示了如何在Web开发中整合多种技术，包括Node.js、Express.js和MongoDB数据库，以及用于用户界面设计的Material-UI库。它提供了完整的创建、读取、更新和删除（CRUD）功能，还支持用户认证和授权，如凭证...
extjs4mvc的crud
02-25
- **模型（Model）**：定义货物的数据结构，包括字段名、类型和验证规则。可以使用关联（associations）来处理货物与其他数据实体的关系，如供应商或订单。 - **视图（View）**：包括各种组件（Components），如...
CRUD_MEAN
02-27
CRUD_MEAN是一个基于TypeScript的全栈开发项目，它涵盖了创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)这四种基本数据操作，这是任何数据库应用的基础。MEAN是MongoDB、Express.js、AngularJS（或...
angular-crud
04-01
Angular 9 是 Angular 的一个重要版本，引入了许多性能优化和开发工具改进。它基于 Ivy 编译器，显著提高了应用的加载速度和大小。Angular 9 包括组件化、依赖注入、数据绑定、指令、服务、路由等核心特性，使得...
贴标机（双滑台式）_机械3D图可修改打包下载.zip
08-17
贴标机（双滑台式）_机械3D图可修改打包下载.zip
MT4指标大全200个外汇常用指标下载
08-17
MT4（MetaTrader 4）是一款广泛应用于外汇交易市场的交易平台，由MetaQuotes Software Corp公司开发。这个平台提供了丰富的交易功能，包括实时报价、图表分析、交易执行以及自定义技术指标等。而“mt4指标大全200个外汇常用指标下载'是一个包含200个不同类型的外汇交易技术指标的压缩文件，旨在帮助交易者更好地分析市场动态，进行更准确的交易决策。
基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现+详细文档+全部资料（高分毕业设计）
08-17
基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现+详细文档+全部资料（高分毕业设计），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现+详细文档+全部资料（高分毕业设计）基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现+详细文档+全部资料（高分毕业设计） 基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现+详细文档+全部资料（高分毕业设计）基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现+详细文档+全部资料（高分毕业设计）基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现+详细文档+全部资料（高分毕业设计）基于Python爬虫+Django的新能源电动汽车使用体验大数据可视化分析系统的设计与实现
开发资料技术资料VB基础入门教程非常好的技术资料.zip
08-17
开发资料技术资料VB基础入门教程非常好的技术资料.zip
城中村改造国土空间规划政策指引.doc
08-17
城中村改造国土空间规划政策指引.doc
ASP.NET多语种网络硬盘系统的设计(源代码+论文)
08-17
该项目涉及一个基于ASP.NET的多语种网络硬盘系统，旨在提供高效、安全的文件存储和管理功能，支持多种语言界面，以满足全球用户的需求。项目包括源代码和相关论文，详细介绍了系统的设计与实现过程。 源代码 部分实现了以下功能： 多语言支持： 使用ASP.NET MVC框架和资源文件技术，实现了界面的多语言支持。用户可以根据需求选择不同的语言界面，系统自动加载对应语言的资源。 文件管理： 提供文件上传、下载、删除、重命名、文件夹管理等功能。前端采用HTML5、CSS和JavaScript，支持拖拽上传和文件预览，提升用户体验。 用户认证与权限管理： 集成了ASP.NET身份认证机制，用户可以注册、登录、管理账户信息。权限管理系统确保用户只能访问自己授权的文件和目录。 数据存储与安全： 使用SQL Server数据库存储用户数据和文件元信息，结合加密技术保证数据的安全性。同时实现了文件的备份和恢复机制，防止数据丢失。 论文 部分详细描述了系统设计和实现的各个方面： 需求分析： 识别了系统的主要功能需求，包括文件管理、多语言支持和用户权限控制。 系统架构设计： 描述了基于ASP.
企业架构典型设计方案指引.docx
08-17
企业架构典型设计方案指引.docx
【浏览器插件】Kimi Copilot 网页总结助手.zip
08-17
安装完成后，只需轻点浏览器插件图标或按下快捷键Ctrl/Cmd+Shift+K，Kimi.ai便能即刻为您概述网页精华。以下是Kimi.ai的几大特色： 1. 完全免费，注册Kimi账号即可享受无限次服务。 2. 依托Kimi的先进长文本处理能力，提供更全面的摘要。 3. 界面简洁，专注于一键摘要功能，无多余装饰。 4. 即便Kimi无法直接访问的网站，也能进行内容总结。 5. 支持YouTube和B站视频内容的智能摘要。 6. PDF文档同样不在话下，例如arXiv上的学术论文。 7. 支持暗黑模式，适应不同用户的阅读偏好。 8. 用户可自定义摘要时使用的提示词，满足个性化需求。 请注意： 1. 本插件由第三方爱好者开发，并非Kimi.ai或月之暗面科技有限公司的官方产品。 2. 由于技术限制，本插件目前仅支持原生Chrome浏览器，无法在Arc等非原生Chrome浏览器上使用。
libomp140.x86-64.dll
08-17
解决 pycharm 项目运行报 OSError: [WinError 126] 找不到指定的模块。 Error loading "D:\software\python310\lib\site-packages\torch\lib\fbgemm.dll" or one of its dependencies.
R语言高光谱数据预处理+二阶微分+多模型预测
最新发布
08-17
R语言高光谱数据预处理+二阶微分+多模型预测
avue-crud表单验证
07-28
Avue-Crud是一个基于Vue.js的前端组件库，提供了一套完整的CRUD（创建、读取、更新、删除）操作的功能。在Avue-Crud中，表单验证是一个非常重要的功能。下面是一些关于Avue-Crud表单验证的相关内容： 1. 表单验证规则定义：在Avue-Crud中，可以通过在表单元素上使用`rules`属性来定义验证规则。例如，可以使用`required`来指定必填项，使用`min`和`max`来指定最小值和最大值，使用`regex`来指定正则表达式等。 2. 异步验证：Avue-Crud提供了异步验证的功能，可以通过`async-validator`库来实现。通过在验证规则中定义`async`属性，并且指定一个异步验证方法，可以在表单值改变时进行异步验证。 3. 自定义验证方法：除了使用内置的验证规则外，还可以自定义验证方法来实现特定的验证逻辑。可以通过在表单元素上使用`custom-validator`属性，并指定一个自定义验证方法来实现。 4. 错误提示信息：在Avue-Crud中，可以通过在验证规则中定义错误提示信息来实现自定义的错误提示。可以通过在验证规则中使用`message`属性来指定错误提示信息。 总的来说，Avue-Crud提供了丰富的表单验证功能，并且可以根据具体需求进行灵活配置和扩展。希望以上内容对你有所帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值