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

最新推荐文章于 2024-04-17 01:47:45 发布
最新推荐文章于 2024-04-17 01:47:45 发布
阅读量111 收藏
点赞数
分类专栏： Vue ElementUI 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65345936/article/details/126860225
版权

目录

一、表单验证

二、增删改查功能实现

增加和编辑功能

 删除

一、表单验证

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

编辑和增加界面

<!-- 编辑/增加界面 -->
		<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>

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条

 

 

完整代码：
 

<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="handleEdit()">添加</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="5">
			</el-table-column>
			 <el-table-column align="center" label="操作" min-width="3">
				<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>
		
		<!-- 编辑界面 -->
		<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>
		
	</div>
</template>

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

			handleSizeChange(rows) {
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				this.formInline.page = page;
				this.search();
			},
			// 是为了代码复用
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';

				this.axios.post(url, params)
				.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);
			},
			closeDialog(){
				// 关闭窗体
				this.clearData();
			},
			clearData(){
				// 清除编辑窗体的缓存数据
				 this.editForm.title='';
				 this.editForm.id = 0;
				 this.editForm.body = '';
				 this.title = '';
				 this.editFormVisible = false;
			},
			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) {
				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: '已取消删除'
				  });          
				});
			},
			 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;
					}
				});
			}
		},
		created() {
			this.doSearch({});
		}
	}
</script>

<style>

</style>

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

Aur ora
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java的ssm框架curd项目.zip
01-28
java项目
ELementUI之CURD及表单验证
ChatYU的博客
10-09 629
表单验证是一种用于检查用户输入数据的过程，以确保输入的数据符合预期的格式、要求和规则。表单验证通常用于 web 应用程序中的用户界面，以确保用户提交的数据有效、合法且安全
elementui-vue实现curd 及安装nodejs服务器 ， 安装vue脚手架--vue-cli
m0_73809543的博客
04-16 259
element-ui + axios后台获取数据写好的vue工程 --- 把我们的工程部署到该服务器上。== 注意：不要安装到中文目录下或者空格目录下==node服务器安装验证是否成功创建好vue工程后进入如下界面。
SPA项目开发之登录注册
m0_75280563的博客
04-07 227
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取// 请求拦截器});自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
SPA项目开发之表单验证+CRUD
oyang的博客
09-13 293
2.通过点击 新增/编辑将表单对应窗口弹出。1.出现表单组件 el-form。3.给表单设置规则 rules。4.当表单提交时要校验规则。给表单设置规则 都放入。判断是弹出新增还是编辑。保障编辑窗体的正常弹出。
Vue3+Vite+Element-Plus实现CRUD常见表单项目
Linlietao0587的博客
01-30 3642
效果有 查询，增加，表格，删除，编辑其实CRUD，就是一个管理项目最常见的功能C增加 (Create)R读取 (Read)U更新 (Update)D删除 (Delete)
Vue入门之Web端CURD前端项目示例
GeekAaron的博客
10-18 2971
Vue入门之Web端CURD前端示例 随着vue.js越来越火，很多不太懂前端的小伙伴想要入坑。而入坑最好的办法就是上手实际操作，因此本文将重点放在实际操作上，对理论不做过多解释，不明白的地方小伙伴们可以去看官方文档或者相关书籍。 目录 一、安装npm 二、安装vue-cli 三、使用vue-cli创建项目 本文的示例项目操作环境如下： 平台/工具 说明 操作系统 Mac OS...
搭建MyBatis开发环境及基本的CURD介绍
08-18
主要介绍了搭建MyBatis开发环境及基本的CURD,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
el-table树形表格表单验证(列表生成序号)
11-20
首先需要生成一个序号用来确定表单验证的目标row，通过广度优先遍历，以1，1.1，1.1.1的规则对树形列表生成确定唯一值的索引，因为列表自身可以做CURD，因此需要每次列表的item增加或减少时重新调用生成索引的方法。...
thinkphp的CURD和查询方式介绍
10-26
主要介绍了thinkphp的CURD和查询方式，有需要的朋友可以参考一下
毕设&课设&项目&实训-基于laravel+layui的PHP快速开发工具.zip
02-09
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
element-curd-template:基于element ui的curd模板
04-28
element-curd-template 基于element ui的curd模板 构建步骤 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 主要依赖 vue vue-router vuex axios less mockjs normalize.css element-ui 目录说明 . ├── App.vue 根实例 ├── api HTTP API ├── components 组件 ├── config 配置 ├── main.js 入口js ├── mock mo
Vue的SPA单页面开发
Miketutu的博客
02-05 726
Vue的SPA单页面开发
Vue之路由（SPA开发模式）
m0_52681702的博客
11-02 1098
一、什么是SPA 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取 的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 优势；...
预约SPA管理系统开发（JAVA搭建）
2301_79072569的博客
09-14 117
同时，该系统也可以为SPA中心提供更准确的数据分析和统计功能，帮助中心做出更好的决策和规划。用户需求：了解SPA中心的运营模式、用户群体以及用户需求，以便为不同类型的用户提供满意的服务。模块开发：根据系统设计，分别实现用户模块、管理模块、预约模块、支付模块和评价模块的功能。接口设计：为了实现各个模块之间的数据交互，需要设计合适的接口，并编写对应的代码。用户模块：用户可以通过此模块注册账号、登录系统，以及浏览和预订SPA服务。功能需求：确定系统的基本功能，如用户注册、预约、支付、评价等。
SPA项目开发（CRUD&表单验证）
m0_62604616的博客
09-13 645
拷入后会报错，将title和editFormVisible、editForm赋值。①、将以下拷入Articles.vue中分页条下面。然后更改doSearch中的以下代码，改成第二个代码。关闭窗体方法和handleEdit中调用以上该方法。然后先加入一个方法closeDialog。2、通过点击 新增/编辑将表单对应窗口弹出。②、 写一个方法 handleEdit。handleEdit方法中加入以下代码。1、拷入表单组件 el-from。写个方法：clearData。在关闭窗体方法中加入以下代码。
SPA富应用开发
qq_64662981的博客
03-15 1618
此命令执行后，需注销，重新登录，才生效。sudo usermod -aG docker $USER # $USER 是当前登录的用户。（PS：在执行完docker version之后，应当显示docker的版本类型）、# 使用阿里 docker 镜像，提高镜像拉取速度。# 以非 root 用户身份使用 docker。初始化操作：gitbook init。ifconfig查看虚拟机的ip地址。
SPA项目开发之首页导航+左侧菜单(1)
最新发布
2301_79655496的博客
04-17 243
Main// 导入组件// 导出模块data(){return {},// 注册组件**/* 折叠 *//* 在CSS中，通过对某一样式声明!important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */important;/* 不折叠 */important;topNav:定义变量**data(){return{// 不折叠时需显示的图片}**LeftNav:记得将不用的因素清掉导航一分组一选项1选项2。
编写一个SpringBoot项目CURD
03-29
我是一名AI语言模型，无法编写SpringBoot项目CURD，但我可以给您提供一个示例。 示例代码如下： 1. 创建一个SpringBoot项目，并...以上是一个简单的SpringBoot项目CURD示例，您可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值