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

最新推荐文章于 2021-11-13 22:25:31 发布
最新推荐文章于 2021-11-13 22:25:31 发布
阅读量112 收藏
点赞数
分类专栏： 上课知识 文章标签： SPA项目开发之CRUD+表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyi215/article/details/101773764
版权

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

课程目标

1、表单验证
2、增删改功能实现

1.Vue的表单验证

Articles.vue 中的编辑界面:

<!-- 编辑界面 visible.sync控制弹出窗口-->
		<el-dialog :title="title" :visible.sync="editFormVisible" 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>

rules 调用规则:

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

					],
				}
			};
		},

定义方法，完善功能:

	/* 分页功能 */
	export default {
		data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: '',
				},
				total: 0,
				title:'',
				editFormVisible: true,
				editForm: {
					title: '',
					body: '',

				},
				
			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();
			},
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, this.formInline).then((response) => {
					console.log(response);
					this.listData = response.data.result;
					this.total = response.data.pageBean.total;
				}).catch(function(error) {
					console.log(error);
				});
			},
			search() {
				this.doSearch(this.formInline);
			},
			/* 提交 */
			submitForm(formName) {
			this.$refs[formName].validate((valid) => {
					if (valid) {
						let url;
						/* id为0为增加 */
						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) => {
							/* 清空 */
							this.clearFormData();
							this.search();

						}).catch(function(error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			/* 增删改定义方法: */
			handleAdd() {
				/* 点击增加跳出一个弹出框 */
				this.editFormVisible = true;
			},
			handleEdit(index, row) {
			
				/* 点击修改跳出一个弹出框 */
				this.editFormVisible = true;
			},
			deleteUser(index, row) {
		
			}
				},
		created() {
			this.doSearch({});
		}
	}

2、增删改功能实现

Articles.vue：

<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="handleAdd()">添加</el-button>
			</el-form-item>
		</el-form>

		<!--列表-->
		<el-table size="small" :data="listData" element-loading-text="拼命加载中" style="width: 100%;">
			<el-table-column align="center" type="selection" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="id" label="文章ID" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="title" label="文章标题" min-width="3">
			</el-table-column>
			<el-table-column sortable prop="body" label="文章内容" min-width="3">
			</el-table-column>
			<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-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="100" layout="total, sizes, prev, pager, next, jumper"
		 :total="total">
		</el-pagination>
		<!-- 编辑界面 visible.sync控制弹出窗口-->
		<el-dialog :title="title" :visible.sync="editFormVisible" 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>



	</div>
</template>

<script>
	/* 分页功能 */
	export default {
		data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: '',
				},
				total: 0,
				editFormVisible: false,
				editForm: {
					id: 0,
					title: '',
					body: '',

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

					],
				}
			};
		},
		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();
			},
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, this.formInline).then((response) => {
					console.log(response);
					this.listData = response.data.result;
					this.total = response.data.pageBean.total;
				}).catch(function(error) {
					console.log(error);
				});
			},
			search() {
				this.doSearch(this.formInline);
			},
			/* vue表单验证 取消 */
			closeDialog() {
				/* 清空 */
				this.clearFormData();
			},
			/* 提交 */
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert(' submit! ');

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			/* 增删改定义方法: */
			handleAdd() {
				/* 清空 */
				this.clearFormData();
				this.title = '新增文章';
				/* 点击增加跳出一个弹出框 */
				this.editFormVisible = true;
			},
			handleEdit(index, row) {
				/* 清空 */
				this.clearFormData();
				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) => {
					/* 清空 */
					this.clearFormData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},
			clearFormData() {
				this.title = '';
				
				this.editFormVisible = false;
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';


			}
		},
		created() {
			this.doSearch({});
		}
	}
</script>

<style>

</style>

结果：
增加了一个刘昊然：
在这里插入图片描述
把刘昊然修改成王大陆：
在这里插入图片描述

依呀
关注
专栏目录
（vue）spa项目开发之CRUD&表单验证&vue的增删改查
m0_60375943的博客
11-12 401
1. 表单验证 Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则， 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form-item label="活动名称" prop="name"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" 注1：有多个表单，怎么在提交进行区分？ 我们在rules这里写了对表单的验证规则，...
SPA项目开发之CRUD&&表单验证
weixin_56069070的博客
11-16 492
前言 spa项目完成登录注册_笑看人生十余载的博客-CSDN博客 (61条消息) spa项目开发首页导航&&左侧菜单_笑看人生十余载的博客-CSDN博客 spa项目开发首页导航&&左侧菜单_笑看人生十余载的博客-CSDN博客 即前三篇篇博客的基础上在进行开发，今天要分享的知识是spa项目开发之CRUD+表单验证 码字不易，转载请说明！！！ 目录 一、表单验证 ①导入相关组件 ②将rules加入表单验证（data里面定义规则） ③调动规则 完整代码
Vue_10_Spa_项目4次-CRUD+表单验证
qq_58530605的博客
11-13 119
一、表单验证 在分页条下面放入编辑组件el-dialog： <!-- 编辑界面--> <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"> <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm"> &lt
cursoANGULAR-NETCORE:CRUD Angular + Net Core +实体框架Core + SqlServer
03-29
本课程“cursoANGULAR-NETCORE: CRUD Angular + Net Core + 实体框架Core + SqlServer”专注于使用现代Web开发技术创建完整的数据管理应用程序。通过学习这个课程，你将掌握一系列关键概念和技术，包括Angular前端...
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向（十二）.doc
10-22
在本篇文档中，我们将探讨如何在已有的数据库表基础上，利用 Vue 和 Quasar 框架构建的 CRUDAPI 前端SPA项目中实现数据库逆向工程，以方便管理和操作业务数据。这一过程通常被称为“dbfirst”模式，即先有数据库结构...
毕设项目：基于SpringBoot+Mybatis+Vue实现的一个在线选课系统.zip
08-15
在这个项目中，Vue.js用于构建用户交互界面，实现页面动态加载、数据展示以及表单验证等功能。 4. **RESTful API**: Spring Boot通过创建RESTful API，使得前后端分离成为可能。API通常采用HTTP协议中的GET、POST、...
毕设项目：基于springboot+angularjs实现的旅游业务管理系统.zip
最新发布
12-24
7. **表单处理**：AngularJS提供了强大的表单验证和模型绑定功能。 项目中的SYTRAVEL-master可能包含了以下目录结构： - `src/main/java`：存放Java源代码，包括SpringBoot的配置和服务。 - `src/main/resources`...
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
在React项目中使用TypeScript，可以显著提升代码质量和开发体验，避免运行时常见的类型错误。 3. **Ant Design**：Ant Design是一个优秀的React UI组件库，它提供了丰富的预设组件，如按钮、表格、表单等，使得...
SPA项目开发之登录注册
xiaoyi215的博客
09-27 1144
SPA项目开发之登录注册 1.spa项目完成登录注册布局： 2.spa项目完成登录功能： 3.ajax跨域问题： 4.axios的get/post的区别（qs）： 5.This指针带来的变量污染： ...
vue入门
xiaoyi215的博客
09-14 1134
vue入门 1. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/中国无锡 2. 库和框架的区别 2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作...
layui入门
xiaoyi215的博客
08-29 842
layui入门 先解压下载的压缩包，然后导入文件： 导入一个layui.css代码和layui.js代码: <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"> <script src="../layui-v2.5.4/layui.js" type="text/javascript"></scr...
mybatis动态sql
xiaoyi215的博客
11-16 674
mybatis动态sql 课程目标 1、mybatis动态sql 2、模糊查询 3、查询返回结果集的处理 4、分页查询 5、特殊字符处理 mybatis动态sql 以foreach为例 接口类 BookMapper： package com.xy.mapper; import com.xy.model.Book; import com.xy.model.BookVo; import org.ap...
spring之SSH
xiaoyi215的博客
09-12 511
spring之SSH web+spring+struts+hibernate+杂鱼 1、导入所需要的pom依赖 2、几大框架的配置文件（web.xml/struts.xml、hibernate的配置、spring的配置） 3、spring与hibernate整合桥接的配置文件替换掉了hibernate.cfg.xml spring-hibernate.xml(难点) 注册数据库连接信息文件 配置数...
List集合框架
xiaoyi215的博客
07-04 403
** 集合框架 一．一个专门操作集合中的元素内部类：迭代器(Iterator) 集合框架思维导图三大类： 增强for循环 集合的remove方法和迭代器的remove方法有什么区别？ 在迭代器或者foreach循环删除的时候容易出现什么问题。 在迭代器中执行collection.remove方法 java.util.ConcurrentMod...
Vue模板语法（一）
xiaoyi215的博客
09-17 364
Vue模板语法（一） 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} ...
hibernate之HQL
xiaoyi215的博客
09-04 320
hibernate之HQL HQL语句基础： 1. 什么是hql HQL是Hibernate Query Language的缩写 查全部 2. hql和sql区别/异同 2. hql和sql区别/异同 HQL SQL 类名/属性 表...
SPA项目开发之首页导航+左侧菜单
xiaoyi215的博客
09-28 284
SPA项目开发之首页导航+左侧菜单 课程目标 1、mock.js模拟响应ajax请求 2、前台主界面的搭建 3、退出功能 4、左侧树收缩功能（vue总线的概念） 1.mock.js模拟响应ajax请求 先安装mockjs依赖（进到根目录按shift+右键进到命令窗口安装） npm install mockjs -D （只在开发环境使用） 安装完之后，会在package.jso...
Vue3+Element-Plus+JWT技术栈云盘项目开发实战指南
1. Vue 3：Vue.js是目前最流行的前端JavaScript框架之一，用于构建用户界面和单页应用（SPA）。Vue 3是其最新的主要版本，提供了组件化开发、数据绑定、指令系统等核心功能，还引入了Composition API等新特性，以更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值