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

最新推荐文章于 2023-07-11 16:22:11 发布
最新推荐文章于 2023-07-11 16:22:11 发布
阅读量90 收藏
点赞数
分类专栏： vue spa
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46220187/article/details/108304174
版权
vue 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
spa
3 篇文章 0 订阅
订阅专栏

文章目录

表单验证

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

编辑窗体：


		<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>

表单校验：


        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 = this.axios.urls.SYSTEM_MENU_TREE;
            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);
              this.clearData();
              this.search();
            }).catch(function(error) {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

CRUD

/* 新增 */
			handleAdd() {
				this.clearData();
				this.editFormVisible = true;
				this.title = "新增文章"
			},
			/* 修改 */
			handleEdit(index,row){
				this.editFormVisible = true;
				this.title = "编辑文章";
				this.editForm.id=row.id;
				this.editForm.title=row.title;
				this.editForm.body=row.body;
			},
			/* 删除 */
			handleDelete(index,row){
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL
				this.axios.post(url, {id:row.id}).then((response) => {
					console.log(response);
					alert('删除成功');
					//操作成功后关闭框,并自动刷新
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},

界面完整代码：

<template>
	<div>
		<!-- 搜索框 -->
		<el-form :inline="true" :model="formInline">
			<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" @click="search">查询</el-button>
				<el-button size="small" type="primary" @click="handleAdd">新增</el-button>
			</el-form-item>

		</el-form>
		<!-- 表格数据 -->
		<el-table size="small" :data="listData" style="width: 100%">
			<el-table-column align="center" type="selection" min-width="1">

			</el-table-column>
			<el-table-column prop="id" label="文章id" min-width="1">
			</el-table-column>
			<el-table-column prop="title" label="文章标题" min-width="2">
			</el-table-column>
			<el-table-column prop="body" label="文章内容" min-width="3">
			</el-table-column>
			 <el-table-column 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="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 
			分页条
			current-page=传输当前页
			page-sizes=传输的页码
			
		 -->
		<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 {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				total: 0,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				/* 是否打开窗体，默认关闭 */
				editFormVisible: false,
				title: '',
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入文章内容',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			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.total = response.data.pageBean.total;
				}).catch(function(error) {
					console.log(error);
				});
			},
			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();
			},
			search() {
				this.doSearch(this.formInline);
			},
			closeDialog() {
				
			},
			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;
						}
						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;
					}
				});
			},
			/* 新增 */
			handleAdd() {
				this.clearData();
				this.editFormVisible = true;
				this.title = "新增文章"
			},
			/* 修改 */
			handleEdit(index,row){
				this.editFormVisible = true;
				this.title = "编辑文章";
				this.editForm.id=row.id;
				this.editForm.title=row.title;
				this.editForm.body=row.body;
			},
			/* 删除 */
			handleDelete(index,row){
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL
				this.axios.post(url, {id:row.id}).then((response) => {
					console.log(response);
					alert('删除成功');
					//操作成功后关闭框,并自动刷新
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},
			/* 清空数据 */
			clearData(){
				this.editFormVisible = false;
				this.title = "";
				this.editForm.id=0;
				this.editForm.title='';
				this.editForm.body='';
			}
		},

		created() {
			this.doSearch({});

		}

	}
</script>

<style>
</style>
北沐辰，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CUD表单验证+增删改查
m0_47906344的博客
08-30 304
CUD表单验证 目录CUD表单验证主要内容代码部分总结 主要内容 1.后台数据接口准备 增删改接口 2.Dialog弹出框 2.1 基本结构 <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose"> <!-- form表单 --> <el-form :label-position="labelPosition" :model="bookForm" :rul
cursoANGULAR-NETCORE:CRUD Angular + Net Core +实体框架Core + SqlServer
03-29
本课程“cursoANGULAR-NETCORE: CRUD Angular + Net Core + 实体框架Core + SqlServer”专注于使用现代Web开发技术创建完整的数据管理应用程序。通过学习这个课程，你将掌握一系列关键概念和技术，包括Angular前端...
avue弹窗设置为卡片样式
weixin_44770377的博客
03-20 3080
avue弹窗设置为卡片样式，效果如下： 在js文件中设置属性card：true即可使分组达到card的阴影样式 但是搜索栏会连带阴影样式。只能人工去除
Avue属性及使用详细介绍
m0_64707449的博客
10-24 5134
Avue属性及使用详细介绍
AVUE表单/单元格校验
m0_52475208的博客
01-06 2847
AVUE中表单及单元格input等进行校验对比
avue 自定义按钮修改后触发表单自带的校验方法；avue表单提交
killerdoubie的博客
07-11 1240
avue 自定义按钮修改后触发表单自带的校验方法
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向（十二）.doc
10-22
在本篇文档中，我们将探讨如何在已有的数据库表基础上，利用 Vue 和 Quasar 框架构建的 CRUDAPI 前端SPA项目中实现数据库逆向工程，以方便管理和操作业务数据。这一过程通常被称为“dbfirst”模式，即先有数据库结构...
毕设项目：基于springboot+angularjs实现的旅游业务管理系统.zip
最新发布
12-24
7. **表单处理**：AngularJS提供了强大的表单验证和模型绑定功能。 项目中的SYTRAVEL-master可能包含了以下目录结构： - `src/main/java`：存放Java源代码，包括SpringBoot的配置和服务。 - `src/main/resources`...
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）功能，还支持用户认证和授权，如凭证...
基于vue + elementUI的管理系统模板
02-22
- **表单验证**：Element UI 提供了一些内置的表单验证规则，配合Vue的特性，可以实现动态的表单验证。 - **分页和排序**：在处理大数据时，分页和排序功能是必不可少的，Element UI的表格组件提供了这些功能。 4...
avue技术讲解文档
09-25
Avue是一个后台快速集成解决方案(curd和form快速开发组件)，它基于 Vue全家桶 和 element-ui,使用了最新 的前端技术栈，支持权限验证，第三方网站嵌套等功能。
Vue快速实现通用表单验证的方法
11-20
本文开篇第一句话，想引用鲁迅先生《祝福》里的一句话，那便是：“我真傻，真的，我单单知道后端整天都是CRUD，我没想到前端整天都是Form表单”。这句话要从哪里说起呢？大概要从最近半个月的“全栈工程师”说起。项目上需要做一个城市配载的功能，顾名思义，就是通过框选和拖拽的方式在地图上完成配载。博主选择了前后端分离的方式，在这个过程中发现：首先，只要有依赖jQuery的组件，譬如Kendoui，即使使用了Vue，依然需要通过jQuery去操作DOM。其次，只有有通过Rozar生成的DOM，譬如HtmlHelper，Vue的双向绑定就突然变得尴尬起来，更不用说，Rozar中的@语法和Vue中的@指令相
vue-crud：基于Vue.js的REST-ful CRUD系统
02-03
该项目不受支持 如果您想为此项目做出贡献，请从该项目中分叉或给我发送电子邮件以将您添加到“无聊”小组 Vue CRUD 基于Vue.js的REST-ful CRUD系统。 Vue CRUD允许创建用于管理单个表的机制，以及具有登录系统和模块的CMS或扩展CRM。 用Vue CRUD构建的应用程序是SPA（单页应用程序），因此它比基于Wordpress，Joomla等的应用程序运行得快得多。 Vue CRUD使用vue及其生态系统（Vuex，Vuetify等）。 享受世界上最流行的JS框架的好处。 该应用程序体系结构适用于REST API 功能 Vue CRUD提供了一组实用程序，您可以从中组成自己的应用程序。 由于使用了Vuex库，系统中包含的功能可以相互通信。 Vue CRUD包含以下元素： CRUD | ： 记录操作： 商店， 更新， 暂停/恢复， 删除， 多次更新 多个挂起/恢复， 多次删除 过滤： 显示有效/无效记录， 在整个表格中搜索词组， 在选定的列中搜索短语（精确，喜欢和列出模式） 项目查看版本： 客户端（小桌子）， 服务器端（大表）
VUE实现静态数据的CRUD功能
11-23
Vue实现的一个增删改查案例，打开即用，可使用spring boot+vue的形式，将静态数据变成动态数据，如要前后端分离案例资源，可关注博主，查看博主上传资源列表。
（vue）spa项目开发之CRUD&表单验证&vue的增删改查
men_ma的博客
08-28 635
转载请标明出处：https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 （vue）spa项目开发之CRUD&表单验证&vue的增删改查前言课程目标目录及一些准备工作1.表单验证2.增删改查功能实现 前言 续上几篇博客(有先后顺序): 博客名称及链接 spa项目开发之登录注册（vue）. SPA项目开发之首页导航+左侧菜单+mock.js模拟响应ajax请求+.
avue-crud组件的行内编辑实现失焦保存，在没有右侧操作栏的情况下
二三的博客
03-16 1171
cell、blulr，我在官网配置文档上并没有看到。可能是官网文档进行了升级，记得去年的时候官网配置项文档并不是如今这个样子，里面的配置项很多。不要以为官网上没有该属性的介绍就真的没有，要勇于质疑，自己可以先写着试下，总归会发现新大陆的。其次，avue 框架确实可以极大的提高开发者的效率，减少页面开发工作，但前提是你要熟悉 avue框架的各个配置项。因为它的配置项实在是太多了，如果不是太熟悉，真的不如使用 element 进行开发来的方便。
使用avue的Crud组件为某行单独设置样式并给点击单个单元格设置事件
lemon的博客
11-03 2965
使用avue的Crud组件为某行单独设置样式并给点击单个单元格设置事件
Vue使用avue-crud表格组件的用法及参数说明（超详细）
热门推荐
随便写写...
05-25 1万+
avue-crud表格组件的详细说明，补录中
Vue Element Select选择器自定义验证规则
路虽远行则将至，事虽难做则必成。
12-02 4759
在我们在做增删改查的时候，一般会遇到添加和修改的from表单需要表单验证。一般常规的from表单是有自己的验证规则，from加一个 :rules="rules"但他需要v-model值和prop值要一样，这是常规情况。我遇到的是，绑定多个负责人和对应的电话，加验证规则。实际场景1.我们在from表单绑定多个负责人就需要使用到 select 选择器，下拉的数据是点击打开弹框时发请求来的。2.点击选中的时候，数据时对象形式，id 名字 电话 绑定在一起的。选中负责人的时候，我们是把一整个对象存到数组里面。
avue-crud表单验证
07-28
在Avue-Crud中，表单验证是一个非常重要的功能。下面是一些关于Avue-Crud表单验证的相关内容： 1. 表单验证规则定义：在Avue-Crud中，可以通过在表单元素上使用`rules`属性来定义验证规则。例如，可以使用`required...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值