SPA项目开发之CRUD+表单验证增删改查

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量106 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54067126/article/details/121282454
版权

1，表单验证

一 编辑界面布局（把rules加到表单验证里面去）

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

二 定义属性方法及表单校验规则

data() {
      return {
        listData: [],
        // 窗体名字
        title: '',
        // 默认关闭
        editFormVisible: false,
        formInline: {
          page: 1,
          rows: 10,
          total: 0,
          title: ''
        },
        editForm: {
          title: '',
          body: '',
          id: 0
        },
        rules: {
          title: [{
              required: true,
              message: '请输入文章标题',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: '请输入文章内容',
            trigger: 'blur'
          }],
        }

效果
在这里插入图片描述

2，增删改功能的实现

一 增加相对应的按钮和方法

<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
<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>

二 方法

清空，新增，编辑，删除（index：当前页的第几条数据 row：获取当前行的数据）

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((resp) => {
							this.closeDialog();
							this.dosearch('')
						});
					} else {
						return false;
					}
				});
			},
			oppenDialog() {
				this.editFormVisible = true;
				this.editForm.title = '';
				this.editForm.body = '';
				this.editForm.id = 0;
				this.title = '新增界面'
			},
			xg(index, row) {
				if (row) {
					this.editFormVisible = true;
					this.title = '编辑界面';
					this.editForm.title = row.title;
					this.editForm.body = row.body;
					this.editForm.id = row.id;
				}
			},
			sc(index, row) {
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
						this.axios.post(url, row.id).then((resp) => {
							this.search({})
						});
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			}
		}

总代码

<template>
	<div>
		<template>
			<br>
			<el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: center;">
				<el-form-item label="文章标题">
					<el-input v-model="formInline.title" placeholder="文章标题"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="dosearch">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="text" @click="oppenDialog">新增</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="id" label="文章id" width="180">
				</el-table-column>
				<el-table-column prop="title" label="文章标题" width="180">
				</el-table-column>
				<el-table-column prop="body" label="文章内容">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="xg(scope.$index,scope.row)">修改</el-button>
						<el-button type="text" @click="sc(scope.$index,scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" style="text-align: center;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formInline.page"
				 :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			<el-dialog :title="title" :visible.sync="editFormVisible" width="60%" @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('editForm')">确定</el-button>
				</div>
			</el-dialog>
		</template>
	</div>
</template>

<script>
	export default {
		name: 'Articles',
		data() {
			return {
				tableData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				editForm: {
					title: '',
					body: '',
					id: 0
				},
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}, {
						min: 3,
						max: 5,
						message: '长度为3到5',
						trigger: 'blur'
					}],
					body: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				},
				editFormVisible: false,
				title: '',
				total: 1
			}
		},
		methods: {
			search(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				//箭头函数解决了指针污染的问题>=
				this.axios.post(url, params).then((resp) => {
					this.tableData = resp.data.result;
					this.total = resp.data.pageBean.total
				});
			},
			handleSizeChange(rows) {
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.dosearch();
			},
			handleCurrentChange(page) {
				this.formInline.page = page;
				this.dosearch();
			},
			dosearch() {
				this.search(this.formInline)
			},
			closeDialog() {
				this.editFormVisible = false
			},
			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((resp) => {
							this.closeDialog();
							this.dosearch('')
						});
					} else {
						return false;
					}
				});
			},
			oppenDialog() {
				this.editFormVisible = true;
				this.editForm.title = '';
				this.editForm.body = '';
				this.editForm.id = 0;
				this.title = '新增界面'
			},
			xg(index, row) {
				if (row) {
					this.editFormVisible = true;
					this.title = '编辑界面';
					this.editForm.title = row.title;
					this.editForm.body = row.body;
					this.editForm.id = row.id;
				}
			},
			sc(index, row) {
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
						this.axios.post(url, row.id).then((resp) => {
							this.search({})
						});
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			}
		},
		created() {
			this.search({})
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

效果

在这里插入图片描述

在这里插入图片描述

迟早嘚秃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Springboot 整合Mybatis +thymeleaf 实现增删改查，包含前端HTML页面
09-21
为了给初学者一些快速上手的前后端都包含的demo，特意以最简单的方式实现这个实例。 里面包含的有后端的增删改查代码以及html页面去调用接口实现前后端交互。
SPA项目开发之CRUD增删改查+表单验证
小宝的宝呢的博客
11-12 1190
目录 一，增加 1，增加窗体代码 2，定义窗体 3，校验表单 ①，将rules控件放入form表单 ②，定义规则 ③，调用校验规则 二，修改功能 1，区分新增和修改的窗体 2，数据回显 3，为新增窗体清空数据 ①清空数据的方法 ②，调用清空窗体的方法 4，数据交互 三，删除功能 定义删除的方法，根据id删除 article.vue完整代码如下 一，增加 1，增加窗体代码 一定要放在div里面 <!-- 编辑界面 --> <el-d...
SPA项目开发之CRUD+表单验证
wx1762813417的博客
09-30 175
SPA项目开发之CRUD+表单验证 和上一篇博客连在一起的：spa动态树和数据表格 1、表单验证 我这里用到是Dialog嵌套表单 在Articles.vue 中改动， <!-- 搜索 --> <el-form :inline="true" :model="formInline" class="user-search"> <el-form-item labe...
SPA项目开发之CRUD增删改查+表单验证(1)
2401_84092143的博客
05-13 939
rules表示表单规则，相当于正则// 校验表单rules: {title: [{message: ‘请输入活动名称’,},min: 3,max: 5,message: ‘长度在 3 到 5 个字符’,],body: [{message: ‘请选择文章内容’,}],message: ‘删除成功’,});});},article.vue完整代码如下这是文章列表组件搜索筛选。
SPA项目开发之CRUD增删改查+表单验证(2)
java_dazhuzhu的博客
04-29 230
rules表示表单规则，相当于正则// 校验表单rules: {title: [{message: ‘请输入活动名称’,},min: 3,max: 5,message: ‘长度在 3 到 5 个字符’,],body: [{message: ‘请选择文章内容’,}],message: ‘删除成功’,});});},article.vue完整代码如下这是文章列表组件搜索筛选。
SPA项目开发之CRUD + 表单验证
断雨的博客
08-14 176
文章目录表单验证 + crudArticle.vue 在上一篇的博文 动态树 + 数据表格 + 分页 中，我们实现了左侧导航菜单（动态树）、数据表格 以及 分页。今天我们在上篇的基础上继续完善功能，这次我们要完成的功能是实现对文章的中增删改查，其中我们要对数据进行验证（表单验证），接下来进入正题。 表单验证 + crud Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验...
spa项目开发之CRUD&表单验证&vue的增删改查
m0_58525944的博客
11-12 619
前言：即前三篇博客的基础上在进行开发，本篇是第四篇 spa项目开发之动态树功能&&右侧文章的分页查询功能 （2）spa项目开发之动态树功能&&右侧文章的分页查询功能 （1）SPA项目开发之登录注册 今日目标： 1，表单验证 2，增删改功能的实现 准备工作：在组件中对该表进行增删改查开发 四个与后台交互获取数据库中的数据 目标效果： 一，表单验证 一 编辑界面布局（把rules加到表单验证里面去） &...
（vue）spa项目开发之CRUD&表单验证&vue的增删改查
m0_60375943的博客
11-12 368
1. 表单验证 Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则， 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form-item label="活动名称" prop="name"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" 注1：有多个表单，怎么在提交进行区分？ 我们在rules这里写了对表单的验证规则，...
spa项目如何实现CRUD+表单验证
月亮投递员的博客
08-29 210
CUD+表单验证的实现前言1、后台数据接口准备 前言 这篇博客也是在之前博客的基础上进行增加了增删改的功能，当然也可以看看我的上一篇博客啦！ 首页左侧动态树+数据表格+分页 1、后台数据接口准备 增删改查的dao方法 增删改查的Action方法 ...
spa项目crud+表单验证
weixin_45111741的博客
10-10 152
spa项目crud+表单验证1.表单验证2.增删改查添加修改删除 1.表单验证 Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则， 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form-item label="活动名称" prop="name"> <el-form :model="ruleForm" :rules=...
SpringBoot+MyBatisPlus+Thymeleaf 增删改查CRUD
12-03
SpringBoot+MyBatisPlus+Thymeleaf 增删改查CRUD 功能
Spring+mybatis+layui实现增删改查，分页，导入导出功能源代码
04-10
本套源代码实现了Spring 和 mybatis 和 layui 集成情况下的基础操作，包括： 增删改查、分页、导入导出等功能。数据库为mysql，脚本在源代码根目录下，mybatis_crud.sql
基于Html的crud-express-mongodb增删改查设计源码
04-11
本源码提供了一个基于Html的crud-express-mongodb增删改查设计。项目包含1586个文件，其中...这个项目是一个基于crud-express-mongodb的增删改查系统，可能包括数据的增删改查等功能，适合用于需要进行数据操作的场景。
ssm-crud.rar_SSM CRUD_ssm增删改查_ssm整合_ssm项目
09-23
使用maven构建项目，实现对部门员工的增删改查
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
springcloud+ thymeleaf +mybatis-plus增删改查
10-23
SpringCloud是一个基于Spring框架的开发工具集合，可以用于...通过SpringCloud、Thymeleaf、MyBatis-Plus的结合使用，我们可以方便地实现对数据库的增删改查操作，并将数据展示在前端页面上，实现一个完整的CRUD功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值