ElementUI结合Vue完成主页的CUD(增删改)表单验证

目录

一、CUD

( 1 )  CU讲述

( 2 )  编写

1. CU

2. 删除

二、验证

前端整合代码 :

一、CUD

以下的代码基于我博客中的代码进行续写 : 

使用ElementUI结合Vue导航菜单和后台数据分页查询

( 1 )  CU讲述

在CRUD操作中，CU代表创建（Create）和更新（Update）。

1. 创建（Create）：创建操作用于在数据库中创建新的数据记录。它通常涉及向数据库中插入新的数据行或文档。例如，在关系型数据库中，可以使用INSERT语句来创建新的数据行。在文档数据库中，可以直接插入新的文档。

2. 更新（Update）：更新操作用于修改数据库中已存在的数据记录。它可以用于更改数据行或文档中的一个或多个属性的值。例如，在关系型数据库中，可以使用UPDATE语句来更新数据行的值。在文档数据库中，可以使用更新操作符来修改文档的属性。

这两个操作通常是CRUD操作中最常用的。创建操作用于添加新的数据记录，而更新操作用于修改已存在的数据记录。它们可以在应用程序中用于实现用户注册、添加新的产品、更新用户信息等功能。

( 2 )  编写

1. CU

在项目中的src文件下api中找到action.js进行配置数据访问的地址:

/*** 对后台请求的地址的封装，URL格式如下：* 模块名_实体名_操作*/
export default {'SERVER': 'http://localhost:8080/ssm', //服务器地址'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆请求'SYSTEM_USER_DOREG': '/user/userRegister', //注册请求'SYSTEM_MENU': '/module/queryRootNode', //左侧菜单导航数据请求'SYSTEM_BookList': '/book/queryBookPager', //书籍的后端数据请求'SYSTEM_BookAdd': '/book/addBook', //书籍增加的数据请求'SYSTEM_BookEdit': '/book/editBook', //书籍修改的数据请求'SYSTEM_BookDel': '/book/delBook', //书籍删除的数据请求'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用return this.SERVER + this[k];}
}

在BookList.vue组件中进行编写增加修改的代

在ElementUI里面找到弹出窗进行编写增加修改的弹窗

 <!-- 弹出的编辑及增加弹窗 --><el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="close"><el-form :model="book" :rules="rules" ref="book"><el-form-item label="书籍编号 :" :label-width="formLabelWidth"><el-input v-model="book.id" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍名称 :" prop="bookname" :label-width="formLabelWidth"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格 :" prop="price" :label-width="formLabelWidth"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍类型 :" prop="booktype" :label-width="formLabelWidth"><el-select v-model="book.booktype" placeholder="请选择书籍类型"><el-option v-for="t in types" :label="t.tname" :value="t.tname" :key="'key'+t.tid"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="close">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></div></el-dialog></div>

 在script标签中编写方法进行数据增加修改实现，在data中编写属性:

data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,formLabelWidth: '120px', //弹出窗输入框前的文字宽度title: '书籍新增', //弹出窗标题dialogFormVisible: false, //默认关闭book: {id: '',bookname: '',price: '',booktype: ''},types: [],}},

在script标签中编写方法进行数据增加修改实现，在methods中编写方法:

submit() {//获取值let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}console.log(params);//获取配置的方法请求地址let url = this.axios.urls.SYSTEM_BookAdd;//如果是书籍编辑就将请求地址修改为书籍修改的请求地址if (this.title == '书籍编辑') {url = this.axios.urls.SYSTEM_BookEdit;}//请求后端地址进行书籍的新增或修改this.axios.post(url, params).then(d => {// console.log(url);// console.log(d);this.close();this.query({});}).catch(e => {});},//弹出窗取消，值初始化close() {this.book = {id: '',bookname: '',price: '',booktype: ''};this.dialogFormVisible = false;},//打开弹出窗，进行书籍的编辑open(index, row) {this.dialogFormVisible = true;if (row) {this.title = '书籍编辑';this.book.id = row.id;this.book.bookname = row.booknamethis.book.price = row.price;this.book.booktype = row.booktype;}},

在created中初始化数据

created() {this.query({});//初始书籍类型的书籍this.types = [{tid: 1,tname: '玄幻'}, {tid: 2,tname: '爽文'}, {tid: 3,tname: '爱情'}, {tid: 4,tname: '动作'}, {tid: 5,tname: '都市'}];}

增加表格操作 ：

      <el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="open(scope.$index,scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="Del(scope.row)">删除</el-button></template></el-table-column>

增加效果 :

修改效果 : 

2. 删除

在script标签中编写方法进行数据删除实现，在methods中编写方法:

     //书籍删除的方法Del(r) {this.$confirm('你确定将编号为' + r.id + '的书籍永久删除, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//获取配置的书籍删除方法请求地址let url = this.axios.urls.SYSTEM_BookDel;//请求后端地址进行书籍的新增或修改this.axios.post(url, {id: r.id}).then(d => {this.$message({type: 'success',message: '书籍删除成功!'});this.query({});}).catch(e => {});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}

删除效果 ： 

二、验证

在表单中增加以下两个属性 ：

:rules="rules" ref="book"

 在script标签中编写方法进行数据增加修改实现，在data中编写属性:

data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,formLabelWidth: '120px', //弹出窗输入框前的文字宽度title: '书籍新增', //弹出窗标题dialogFormVisible: false, //默认关闭book: {id: '',bookname: '',price: '',booktype: ''},types: [],//增加表单验证rules: {bookname: [{required: true,message: '请输入书籍的名称',trigger: 'blur'},{min: 2,max: 10,message: '书籍名称长度在 2 到 10 个字符',trigger: 'blur'}],price: [{required: true,message: '请填写书籍价格',trigger: 'blur'}],booktype: [{required: true,message: '请选择书籍类型',trigger: 'blur'}]}}},

在script标签中编写方法，在methods中编写submit()方法:

 submit() {//获取值let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}console.log(params);//获取配置的方法请求地址let url = this.axios.urls.SYSTEM_BookAdd;//如果是书籍编辑就将请求地址修改为书籍修改的请求地址if (this.title == '书籍编辑') {url = this.axios.urls.SYSTEM_BookEdit;}//请求前必须通过表单验证this.$refs['book'].validate((valid) => {console.log(valid);if (valid) {//请求后端地址进行书籍的新增或修改this.axios.post(url, params).then(d => {// console.log(url);// console.log(d);this.close();this.query({});}).catch(e => {});} else {this.$message('有必输入项或者没有按要求输入，请正确填写！！');return false;}});}

表单验证的效果  :

前端整合代码 :

BookList.vue 所有代码如下  :

<template><div class="Book" style="padding: 30px;"><!-- 输入框搜索 --><el-form :inline="true" class="demo-form-inline"><el-form-item label="书籍名称 : "><el-input v-model="bookname" placeholder="书籍名称"></el-input></el-form-item><el-form-item><el-button type="primary" plain @click="onSubmit">查询</el-button></el-form-item><el-form-item><el-button type="primary" plain @click="open">新增</el-button></el-form-item></el-form><!-- 书籍的书籍表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="书籍ID"></el-table-column><el-table-column prop="bookname" label="书籍名称"></el-table-column><el-table-column prop="price" label="书籍价格"></el-table-column><el-table-column prop="booktype" label="书籍类型"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="open(scope.$index,scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="Del(scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页 --><div class="block" style="padding: 20px;"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div><!-- 弹出的编辑及增加弹窗 --><el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="close"><el-form :model="book" :rules="rules" ref="book"><el-form-item label="书籍编号 :" :label-width="formLabelWidth"><el-input v-model="book.id" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍名称 :" prop="bookname" :label-width="formLabelWidth"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格 :" prop="price" :label-width="formLabelWidth"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍类型 :" prop="booktype" :label-width="formLabelWidth"><el-select v-model="book.booktype" placeholder="请选择书籍类型"><el-option v-for="t in types" :label="t.tname" :value="t.tname" :key="'key'+t.tid"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="close">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></div></el-dialog></div></template><script>export default {data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,formLabelWidth: '120px', //弹出窗输入框前的文字宽度title: '书籍新增', //弹出窗标题dialogFormVisible: false, //默认关闭book: {id: '',bookname: '',price: '',booktype: ''},types: [],//增加表单验证rules: {bookname: [{required: true,message: '请输入书籍的名称',trigger: 'blur'},{min: 2,max: 10,message: '书籍名称长度在 2 到 10 个字符',trigger: 'blur'}],price: [{required: true,message: '请填写书籍价格',trigger: 'blur'}],booktype: [{required: true,message: '请选择书籍类型',trigger: 'blur'}]}}},methods: {//书籍删除的方法Del(r) {this.$confirm('你确定将编号为' + r.id + '的书籍永久删除, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//获取配置的书籍删除方法请求地址let url = this.axios.urls.SYSTEM_BookDel;//请求后端地址进行书籍的新增或修改this.axios.post(url, {id: r.id}).then(d => {this.$message({type: 'success',message: '书籍删除成功!'});this.query({});}).catch(e => {});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},submit() {//获取值let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}console.log(params);//获取配置的方法请求地址let url = this.axios.urls.SYSTEM_BookAdd;//如果是书籍编辑就将请求地址修改为书籍修改的请求地址if (this.title == '书籍编辑') {url = this.axios.urls.SYSTEM_BookEdit;}//请求前必须通过表单验证this.$refs['book'].validate((valid) => {console.log(valid);if (valid) {//请求后端地址进行书籍的新增或修改this.axios.post(url, params).then(d => {// console.log(url);// console.log(d);this.close();this.query({});}).catch(e => {});} else {this.$message('有必输入项或者没有按要求输入，请正确填写！！');return false;}});},//弹出窗取消，值初始化close() {this.book = {id: '',bookname: '',price: '',booktype: ''};this.dialogFormVisible = false;},//打开弹出窗，进行书籍的编辑open(index, row) {this.dialogFormVisible = true;if (row) {this.title = '书籍编辑';this.book.id = row.id;this.book.bookname = row.booknamethis.book.price = row.price;this.book.booktype = row.booktype;}},handleSizeChange(r) {//当页大小发生变化let params = {bookname: this.bookname,rows: r,page: this.page}// console.log(params)this.query(params);},handleCurrentChange(p) {//当前页码大小发生变化let params = {bookname: this.bookname,rows: this.rows,page: p}// console.log(params)this.query(params);},query(params) {//获取后台请求书籍数据的地址let url = this.axios.urls.SYSTEM_BookList;this.axios.get(url, {params: params}).then(d => {// console.log(url)this.tableData = d.data.rows;this.total = d.data.total;}).catch(e => {});},onSubmit() {let params = {bookname: this.bookname}// console.log(params)this.query(params);this.bookname = ''}},created() {this.query({});//初始书籍类型的书籍this.types = [{tid: 1,tname: '玄幻'}, {tid: 2,tname: '爽文'}, {tid: 3,tname: '爱情'}, {tid: 4,tname: '动作'}, {tid: 5,tname: '都市'}];}}
</script><style>
</style>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/98125.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2034. 股票价格波动

2034. 股票价格波动

给你一支股票价格的数据流。数据流中每一条记录包含一个 时间戳 和该时间点股票对应的 价格 。 不巧的是&#xff0c;由于股票市场内在的波动性&#xff0c;股票价格记录可能不是按时间顺序到来的。某些情况下&#xff0c;有的记录可能是错的。如果两个有相同时间戳的记录出现…
阅读更多...
大数据架构设计（四十五）

大数据架构设计（四十五）

大数据架构有Lambda架构和Kappa架构。 大数据可以解决的问题? 处理非结构化和半结构化数据。大数据复杂性、不确定性特征描述和刻画方法以及大数据系统建模。数据易构性 与 决策易购性的关系。&#xff08;数据易构性主要是不同的数据库种类&#xff09; 大数据处理系统系统特…
阅读更多...
系统架构设计：5 论软件的可靠性设计

系统架构设计：5 论软件的可靠性设计

目录 一 可靠性设计 1 可靠性 2 影响可靠性的因素 3可靠性设计技术 （1）避错技术
阅读更多...
设备搭建（waf、蜜罐、ids和ips）

设备搭建（waf、蜜罐、ids和ips）

文章目录 防火墙waf网闸蜜罐idsips 防火墙 DMZ区域叫非军事化区减&#xff0c;DMZ有web服务或者MySQL服务&#xff0c;从互联网到dmz的流量一般不拦截&#xff08;因为需要互联网用户访问web服务&#xff09;&#xff0c;如果dmz沦陷&#xff0c;攻击者想要继续横向移动到内网…
阅读更多...
Vue中实现自定义编辑邮件发送到指定邮箱(纯前端实现)

Vue中实现自定义编辑邮件发送到指定邮箱(纯前端实现)

formspree里面注册账号 注册完成后进入后台新建项目并且新建表单 这一步完成之后你将得到一个地址 最后就是在项目中请求这个地址 关键代码如下&#xff1a; submitForm() {this.fullscreenLoading true;this.$axios({method: "post",url: "https://xxxxxxx…
阅读更多...
什么是数据库锁（Lock）？有哪些类型的锁

什么是数据库锁（Lock）？有哪些类型的锁

数据库锁&#xff08;Lock&#xff09;&#xff1a;保护数据完整性与并发性的关键 数据库锁&#xff08;Lock&#xff09;是在数据库管理系统中用于管理并发访问数据的重要机制。它们确保了多个用户或事务可以同时访问数据库&#xff0c;同时保护数据的完整性。在本文中&#…
阅读更多...
7.wifi开发【智能家居：终】，实践总结：智能开关，智能采集温湿，智能灯。项目运行步骤与运行细节，技术归纳与提炼，项目扩展

7.wifi开发【智能家居：终】，实践总结：智能开关，智能采集温湿，智能灯。项目运行步骤与运行细节，技术归纳与提炼，项目扩展

一。项目运行步骤与运行细节 1.项目运行步骤&#xff08;一定有其他的运行方式&#xff0c;我这里只提供一种我现在使用的编译方式&#xff09; &#xff08;1&#xff09;项目运行使用软件与技术&#xff1a; 1.Virtual linux 使用这个虚拟机进行程序的编译 2.Makefile与shl…
阅读更多...
2023年下学期《C语言》作业0x02-分支 XTU OJ 1068 1069 1070 1071 1072

2023年下学期《C语言》作业0x02-分支 XTU OJ 1068 1069 1070 1071 1072

第一题 #include<stdio.h>int main() {int a;scanf("%d",&a);if(a>90&&a<100) printf("A");else printf("B");return 0; } 没有换行&#xff0c;不然会格式错误 第二题 #include<stdio.h>int main() {int a;s…
阅读更多...
数字人直播系统源码交付，数字人直播软件下载迎来普及化

数字人直播系统源码交付，数字人直播软件下载迎来普及化

随着数字人直播行业的蓬勃发展&#xff0c;铭顺科技数字人直播系统成为了行业中的一大亮点。通过一次性买断和源码级交付的模式&#xff0c;数字人直播正迎来普及化的浪潮&#xff0c;这种创新的交付方式带来了许多好处&#xff0c;为数字人直播的推广和应用提供了强有力的支持…
阅读更多...
【Navicat】win 10 / win 11：Navicat 15 安装完整教程（navicat 连接 mysql 出现 2059 报错问题解决）

【Navicat】win 10 / win 11：Navicat 15 安装完整教程（navicat 连接 mysql 出现 2059 报错问题解决）

目录 一、Navicat 连接 mysql 出现 2059 报错问题解决 二、Navicat 15 的下载 三、Navicat 15 的安装 四、Navicat 15 的使用 一、Navicat 连接 mysql 出现 2059 报错问题解决 之前使用的是完整版本 navicat 12&#xff0c;但是随着 MySQL 的升级&#xff0c;再连接 MySQL…
阅读更多...
【SpringCloud】认识微服务

【SpringCloud】认识微服务

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 认识微服务 一、 服务架构演变1.1 单体架构…
阅读更多...
库存管理与策略模式

库存管理与策略模式

库存管理是个难题&#xff0c;涉及到采购、销售、仓储、门店、网站订单各个环节&#xff0c;实物库存和系统库存很难保证完全一致&#xff0c;记得系统刚上线第一天&#xff0c;因为实物库存与导入系统的库存有差异&#xff0c;系统又做了限制系统库存必须大于0才允许销售普通订…
阅读更多...
Spring的beanName生成器AnnotationBeanNameGenerator

Spring的beanName生成器AnnotationBeanNameGenerator

博主介绍&#xff1a;✌全网粉丝4W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…
阅读更多...
软件测试面试题

软件测试面试题

一、JMeter进行接口测试步骤 JMeter是一款功能强大的开源负载和性能测试工具&#xff0c;也可以用于接口测试。以下是使用JMeter进行接口测试的基本步骤&#xff1a; &#xff08;1&#xff09;创建测试计划&#xff1a;在JMeter中&#xff0c;您需要创建一个测试计划来组织您…
阅读更多...
软件设计原则 1小时系列 （C++版）

软件设计原则 1小时系列 （C++版）

文章目录 前言基本概念 Design Principles⭐单一职责原则(SRP) Single Responsibility PrincipleCode ⭐里氏替换原则(LSP) Liskov Substitution PrincipleCode ⭐开闭原则(OCP) Open Closed PrincipleCode ⭐依赖倒置原则(DIP) Dependency Inversion PrincipleCode ⭐接口隔离…
阅读更多...
【Oracle】Oracle系列十九--Oracle的体系结构

【Oracle】Oracle系列十九--Oracle的体系结构

文章目录 往期回顾前言1. 物理结构2. 内存结构2.1 SGA2.2 后台进程 3. 逻辑结构 往期回顾 【Oracle】Oracle系列之一–Oracle数据类型 【Oracle】Oracle系列之二–Oracle数据字典 【Oracle】Oracle系列之三–Oracle字符集 【Oracle】Oracle系列之四–用户管理 【Oracle】Or…
阅读更多...
acwing算法基础之基础算法--前缀和算法

acwing算法基础之基础算法--前缀和算法

目录 1 知识点2 模板 1 知识点 前缀后下标尽量从1开始&#xff0c;当然不从1开始也是ok的。 a 1 , a 2 , a 3 , . . . , a n a_1,a_2,a_3,...,a_n a1​,a2​,a3​,...,an​ S 1 , S 2 , S 3 , . . . S n S_1,S_2,S_3,...S_n S1​,S2​,S3​,...Sn​ S i S_i Si​&#xff1…
阅读更多...
linux基础64——abrtd总结

linux基础64——abrtd总结

安装与启动 # 安装abrt图形用户界面 yum install abrt-desktop# 安装abrt客户端 yum -y install abrt-cli# 接收关于 ABRT 检测到的崩溃的电子邮件通知(默认情况下&#xff0c;它会在本地计算机上向 root 用户发送通知。电子邮件目标可以在 /etc/libreport/plugins/mailx.conf…
阅读更多...
Java使用WebSocket(基础)

Java使用WebSocket(基础)

准备一个html页面 <!DOCTYPE HTML> <html> <head><meta charset"UTF-8"><title>WebSocket Demo</title> </head> <body><input id"text" type"text" /><button onclick"send()&…
阅读更多...
基于springboot实现人职匹配推荐管理系统演示【项目源码+论文说明】分享

基于springboot实现人职匹配推荐管理系统演示【项目源码+论文说明】分享

基于springboot实现人职匹配推荐管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于人职匹配推荐系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了…
阅读更多...
最新文章

Copyright @ 2022~2023