ELementUI之CURD及表单验证

一.CURD

1.后端CURD实现

@RequestMapping("/addBook")@ResponseBodypublic JsonResponseBody<?> addBook(Book book){try {bookService.insert(book);return new JsonResponseBody<>("新增书本成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("新增书本失败",false,0,null);}}@RequestMapping("/editBook")@ResponseBodypublic JsonResponseBody<?> editBook(Book book){try {bookService.updateByPrimaryKey(book);return new JsonResponseBody<>("编辑书本成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("编辑书本失败",false,0,null);}}@RequestMapping("/delBook")@ResponseBodypublic JsonResponseBody<?> delBook(Book book){try {bookService.deleteByPrimaryKey(book.getId());return new JsonResponseBody<>("删除书本成功",true,0,null);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("删除书本失败",false,0,null);}}@RequestMapping("/queryBookPager")@ResponseBodypublic JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){try {PageBean pageBean=new PageBean();pageBean.setRequest(req);List<Book> books = bookService.queryBookPager(book, pageBean);return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody<>("分页查询书本失败",false,0,null);}}

2.前端实现

2.1前端HTML

<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-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-buttonsize="mini"@click="open(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="del(scope.$index, 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" @close="clear()"><el-form :model="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="书籍名称" :label-width="formLabelWidth"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格" :label-width="formLabelWidth"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍类别" :label-width="formLabelWidth"><el-select v-model="book.booktype" placeholder="请选择活动区域"><el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dosub">确 定</el-button></div></el-dialog></div></template>

我们通过在ELementUI官网中获取表格样式，弹出框样式及各种界面布局

2.2 路径配置

'BOOK_ADD':'book/addBook','BOOK_UPD':'book/editBook','BOOK_DEL':'book/delBook','SYSTEM_BookList': 'book/queryBookPager', //书籍的后端数据请求

2.3 JS业务方法实现

export default {data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,title:'新增窗体',dialogFormVisible:false,formLabelWidth:'100px',types:[],book:{id:'',bookname:'',price:'',booktype:'',}}},methods: {del(idx,row){this.$confirm('是否进行删除id为'+row.id+'的数据', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let url = this.axios.urls.BOOK_DELthis.axios.post(url, {id:row.id}).then(d => {console.log(url);this.$message({type: 'success',message: '删除成功!'});this.query({});}).catch(e => {});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},dosub(){//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_ADD;console.log(this.title)if(this.title=='编辑窗体'){url = this.axios.urls.BOOK_UPD}let params = {id:this.book.id,bookname:this.book.bookname,price:this.book.price,booktype:this.book.booktype,};this.axios.post(url, params).then(d => {console.log(url);this.clear();this.query({});}).catch(e => {});},clear(){this.dialogFormVisible= false;this.title = '新增窗体';this.book={id:'',bookname:'',price:'',booktype:'',}},open(idx,row){this.dialogFormVisible= true;if(row){this.title = '编辑窗体';this.book.id = row.id;this.book.bookname = row.bookname;this.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 = [{'id':1,'name':'爽文'},{'id':2,'name':'动作'},{'id':3,'name':'爱情'},]}}

方法详解：

（1）.我们Vue.js中的钩子函数中定义初始化值和状态

  1. bookname: ''：这是一个字符串属性，表示书籍的名称，初始值为空字符串。

  2. tableData: []：这是一个数组属性，用于存储表格数据，初始值为空数组。

  3. rows: 10：这是一个数字属性，表示每页显示的行数，默认为 10。

  4. total: 0：这是一个数字属性，表示数据总数，初始值为 0。

  5. page: 1：这是一个数字属性，表示当前页数，初始值为 1。

  6. title: '新增窗体'：这是一个字符串属性，表示窗体的标题，初始值为 '新增窗体'。

  7. dialogFormVisible: false：这是一个布尔属性，表示一个对话框是否可见，初始值为 false，意味着对话框默认是隐藏的。

  8. formLabelWidth: '100px'：这是一个字符串属性，表示表单标签的宽度，初始值为 '100px'。

  9. types: []：这是一个数组属性，用于存储书籍的类型数据，初始值为空数组。

  10. book 对象：这是一个包含多个属性的对象，表示一个书籍的信息，包括 id、bookname、price 和 booktype。这些属性初始值都为空字符串或空值。

（2）del(idx,row)   :

这个方法接受两个参数 idx 和 row，其中 idx 可能是一个索引或标识，而 row 是包含书籍信息的对象。

首先，它弹出一个确认对话框，询问用户是否要删除一个具体 ID（row.id）的数据。

如果用户点击了 "确定"，则会发起一个 HTTP POST 请求，将 row.id 发送到指定的删除书籍的接口。

如果请求成功，会在控制台上打印请求的 URL，然后显示一个成功的消息，并调用 query({}) 方法来刷新数据。

如果请求失败，将会捕获错误，但似乎没有特定的处理代码。

（2）dosub()方法：

这个方法执行与书籍数据相关的提交操作。

首先，它根据 title 属性的值来确定是要执行添加书籍还是更新书籍的操作，然后设置 url 变量为相应的请求地址。

接着，它构造一个包含书籍信息的 params 对象。

然后，它发起一个 HTTP POST 请求，将 params 发送到指定的地址（可能是添加或更新书籍的接口）。

如果请求成功，会在控制台上打印请求的 URL，然后调用 clear() 方法清空表单数据，并调用 query({}) 方法刷新数据。

如果请求失败，将会捕获错误，但似乎没有特定的处理代码。

（3）clear()方法：

这个方法用于清除表单数据和重置一些状态。

它将 dialogFormVisible 属性设置为 false，隐藏对话框。

将 title 属性设置为 '新增窗体'，表示这个对话框是用于新增数据的。

清空 book 对象中的属性，使其恢复到初始状态。

（4）open()方法：

这个方法用于打开对话框，以便编辑或添加书籍信息。

它将 dialogFormVisible 属性设置为 true，以显示对话框。

如果传递了 row 参数，表示要编辑数据，因此将 title 属性设置为 '编辑窗体'。

然后，将 book 对象的属性设置为 row 对象中的属性，以便在对话框中显示原有数据，以便编辑。

这些方法一起构成了一个用于管理书籍信息的 Vue.js 组件的一部分，包括删除、提交、清除和编辑功能。它们依赖于一些状态和属性，如 title、book 和 dialogFormVisible，以实现不同的交互行为。\

（5）create()方法是生命周期钩子是 Vue.js 组件中的一个生命周期函数

  1. this.query({});：在组件被创建后立即调用 query 方法，传递一个空对象 {} 作为参数。这可能是用来初始化组件中的数据，例如加载初始的书籍数据。

  2. this.types：这是一个数组属性，包含了书籍类型的数据。在这个代码段中，它被初始化为一个包含三个对象的数组。每个对象都有两个属性：id 表示类型的唯一标识符，name 表示类型的名称。这个数组似乎是用于提供书籍类型的选项，以供用户在界面上选择。

所以，在组件被创建后，它会立即执行一个查询操作，可能是获取初始的书籍数据，同时初始化了书籍类型的选项。这样，在组件渲染完成后，它就有了初始的数据和选项，可以供用户交互和显示在界面上。

注： 

1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose" 

效果演示：

 二.表单验证

1.什么是表单验证

表单验证是一种用于检查用户输入数据的过程，以确保输入的数据符合预期的格式、要求和规则。表单验证通常用于 web 应用程序中的用户界面，以确保用户提交的数据有效、合法且安全

2.定义规则

2.1绑定表单规则属性

<el-form :model="book" :rules="rules" ref="book">

2.2在指定的字段中定义prop属性

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

2.3在data中定义规则

rules:{bookname: [{ required: true, message: '请输入书籍名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],price:[{ required: true, message: '请输入书籍价格', trigger: 'blur' },],booktype:[{ required: true, message: '请填写书籍类别', trigger: 'blur' },]}

3.提交验证规则

在我们进行提交验证时进行表单验证

dosub(){this.$refs['book'].validate((valid) => {if (valid) {//获取后台请求书籍数据的地址let url = this.axios.urls.BOOK_ADD;console.log(this.title)if(this.title=='编辑窗体'){url = this.axios.urls.BOOK_UPD}let params = {id:this.book.id,bookname:this.book.bookname,price:this.book.price,booktype:this.book.booktype,};this.axios.post(url, params).then(d => {console.log(url);this.clear();this.query({});}).catch(e => {});} else {console.log('error submit!!');return false;}});},

4.效果演示

当我们进行验证提交时必须通过验证我们写的规则才能进行提交

今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！ 

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

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

相关文章

bin-editor-next实现josn序列化

bin-editor-next实现josn序列化

线上链接 BIN-EDITOR-NEXThttps://wangbin3162.gitee.io/bin-editor-next/#/editor gitee地址bin-editor-next: ace-editor 的vue3升级版本https://gitee.com/wangbin3162/bin-editor-next#https://gitee.com/link?targethttps%3A%2F%2Funpkg.com%2Fbin-editor-next%2F 实现…
阅读更多...
23年基因蓝皮书略读

23年基因蓝皮书略读

2023年基因慧蓝皮书略读 1.发展环境1.1 宏观环境1.2 基因产业内涵 2 应用场景2.1 生育支持与生育健康筛查2.2 老龄化与肿瘤精准防控2.2.1 肿瘤早筛2.2.2 肿瘤伴随诊断2.2.3 MRD检测2.2.4 生物药研发及基因科技 3 产业发展3.1 产业图谱及产业链分析拟上市肿瘤检测公司上市基因企…
阅读更多...
大数据要怎么样学才可以到企业级实战

大数据要怎么样学才可以到企业级实战

大数据在企业级实战中扮演着重要角色&#xff0c;因此掌握大数据技术和应用是非常有价值的。下面将详细介绍学习大数据并达到企业级实战水平的步骤和方法。 一、基础知识准备 1. 数据基础知识&#xff1a;了解数据的概念、类型、结构等基本概念&#xff0c;并熟悉常见的数据处…
阅读更多...
一个命令让redis服务端所有信息无所遁形~(收藏吃灰系列)

一个命令让redis服务端所有信息无所遁形~(收藏吃灰系列)

Redis服务器是一个事件驱动程序&#xff0c;它主要处理两类事件&#xff1a;文件事件和时间事件。这些事件的处理和Redis命令的执行密切相关。下面我将以Redis服务端命令为切入点&#xff0c;深入解析其工作原理和重要性。 首先&#xff0c;我们先了解Redis服务端有哪些命令。…
阅读更多...
IDEA的使用（二）快捷键 （IntelliJ IDEA 2022.1.3版本）

IDEA的使用（二）快捷键 （IntelliJ IDEA 2022.1.3版本）

1. IDEA中的常用快捷键 1.1 通用型快捷键 1.2 提高编写速度 ctrl shift ↑或↓ 只能在方法里面移动代码。 alt shift ↑或↓ 可以向方法外移动代码。 设置过自动导包&#xff0c;所以不用批量导包啦。 1.3 类结构、查找和查看源码 1.4 查找、替换和关闭 1.5 调整格式 1.6 De…
阅读更多...
复旦管院启动科创战略，培养科技研发人才，引领未来发展！

复旦管院启动科创战略，培养科技研发人才，引领未来发展！

今年夏天&#xff0c;600多位优秀的企业家成为复旦大学EMBA 2023级新生。在疫情结束后&#xff0c;他们选择百战归来再读书&#xff0c;重新回到久违的课堂&#xff0c;共同探索科创大时代下企业的商业本质&#xff0c;开启新的学习与人生旅程。复旦大学管理学院院长陆雄文教授…
阅读更多...
解决方案｜法大大电子签助力食品行业打通内外部高效协作链路

解决方案｜法大大电子签助力食品行业打通内外部高效协作链路

对食品行业来说&#xff0c;技术是保证食品安全的重要前提和基础。数字化转型就是要将传统的食品行业与新技术相结合&#xff0c;从而达到改善传统食品生产模式、提高传统食品生产效率的目的。通过数字化技术来推动企业从原材料采购、产品设计、生产、营销、物流、合同管理等全…
阅读更多...
探馆天津车展 近距离感受“极致性能王”远航汽车

探馆天津车展 近距离感受“极致性能王”远航汽车

近年来&#xff0c;新能源汽车产业发展迅猛。得益于新能源车型在成本控制、品质、安全性等多方面的出色表现&#xff0c;消费者对新能源汽车的需求一直呈现刚性。2023年&#xff0c;虽然新能源汽车已经进入无补贴时代&#xff0c;但消费者对新能源汽车的需求依旧有增无减&#…
阅读更多...
Zabbix监控系统 自定义监控项、自动发现与自动注册

Zabbix监控系统 自定义监控项、自动发现与自动注册

Zabbix监控系统 自定义监控项、自动发现与自动注册 一、自定义监控内容部署实例二、zabbix 自动发现与自动注册部署实例2.1 部署zabbix自动发现 一、自定义监控内容部署实例 案列&#xff1a;自定义监控客户端服务器登录的人数 需求&#xff1a;限制登录人数不超过 3 个&#…
阅读更多...
LabVIEW使用ZigBee无线传感器开发住宅负载电力应用

LabVIEW使用ZigBee无线传感器开发住宅负载电力应用

LabVIEW使用ZigBee无线传感器开发住宅负载电力应用 长期以来&#xff0c;住宅客户的需求一直是电力行业的一部分。由于公用事业需要建设基础设施以满足即时和长期需求&#xff0c;因此公用事业账单既包含能源费用&#xff0c;其中衡量客户随时间消耗的总电量&#xff0c;也包含…
阅读更多...
【网络安全】如何保护IP地址？

【网络安全】如何保护IP地址？

使用防火墙是保护IP地址的一个重要手段。防火墙可以监控和过滤网络流量&#xff0c;并阻止未经授权的访问。一家网络安全公司的研究显示&#xff0c;超过80%的企业已经部署了防火墙来保护他们的网络和IP地址。 除了防火墙&#xff0c;定期更新操作系统和应用程序也是保护IP地址…
阅读更多...
在进行自动化测试，遇到验证码的问题,怎么办？

在进行自动化测试，遇到验证码的问题,怎么办？

1.找开发去掉验证码或者使用万能验证码 2.使用OCR自动识别 使用OCR自动化识别&#xff0c;一般识别率不是太高&#xff0c;处理一般简单验证码还是没问题 这里使用的是Tesseract-OCR,下载地址&#xff1a;https://github.com/A9T9/Free-Ocr-Windows-Desktop/releases 怎么使…
阅读更多...
pytorch实现经典神经网络：VGG16模型之初探

pytorch实现经典神经网络：VGG16模型之初探

文章链接 https://blog.csdn.net/weixin_44791964/article/details/102585038?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169675238616800211588158%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id16967523861680…
阅读更多...
基于Java+SpringBoot+Vue企业OA管理系统的设计与实现 前后端分离【Java毕业设计·文档报告·代码讲解·安装调试】

基于Java+SpringBoot+Vue企业OA管理系统的设计与实现 前后端分离【Java毕业设计·文档报告·代码讲解·安装调试】

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…
阅读更多...
乐鑫 ESP-Mesh-Lite在windows下的开发环境搭建（二）

乐鑫 ESP-Mesh-Lite在windows下的开发环境搭建（二）

上一篇文章的只能在例程文件夹内进行编译&#xff0c;一旦将示例程序复制到其他文件夹&#xff0c;清理后再编译时会出现编译错误。今天发现了一种的开发环境部署方法&#xff0c;实际上esp-mesh-lite文件夹里就有介绍&#xff0c;只是我还不熟悉IDF的操作&#xff0c;到今天才…
阅读更多...
第二证券：华为全液冷超充上线，高压快充概念爆发，双杰电气等涨停

第二证券：华为全液冷超充上线，高压快充概念爆发，双杰电气等涨停

受华为全液冷超充上线消息提振&#xff0c;高压快充概念9日盘中强势拉升&#xff0c;到发稿&#xff0c;双杰电气、永贵电器“20cm”涨停&#xff0c;英可瑞、易事特涨超13%&#xff0c;伊戈尔、协鑫能科、宝馨科技、日丰股份等涨停&#xff0c;万祥科技、星云股份涨近8%。 消…
阅读更多...
python中pytorch的广播机制——Broadcasting

python中pytorch的广播机制——Broadcasting

广播机制 numpy 在算术运算期间采用“广播”来处理具有不同形状的 array &#xff0c;即将较小的阵列在较大的阵列上“广播”&#xff0c;以便它们具有兼容的形状。Broadcasting是一种没有copy数据的expand 不过两个维度不相同&#xff0c;在前面插入维度1扩张维度1到相同的维…
阅读更多...
大运新能源天津车展深度诠释品牌魅力 为都市人群打造理想车型

大运新能源天津车展深度诠释品牌魅力 为都市人群打造理想车型

如今&#xff0c;新能源汽车行业发展潜力巨大&#xff0c;不断吸引无数车企入驻新能源汽车赛道&#xff0c;而赛道的持续紧缩也让一部分车企很难找到突破重围的机会。秉持几十年的造车经验&#xff0c;大运新能源凭借雄厚的品牌实力从一众车企中脱颖而出。从摩托车到重卡&#…
阅读更多...
Java基于SpringBoot的高校招生系统

Java基于SpringBoot的高校招生系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 简介系统设计思路1 数据库设计2 系统整体设计 系统详细设计1系统功能模块2. 管理员功能模块3学生…
阅读更多...
《安富莱嵌入式周报》第324期：单对以太网技术实战，IROS2023迪士尼逼真机器人展示，数百万模具CAD文件下载，闭环步进电机驱动器，CANopen全解析

《安富莱嵌入式周报》第324期：单对以太网技术实战，IROS2023迪士尼逼真机器人展示，数百万模具CAD文件下载，闭环步进电机驱动器，CANopen全解析

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 更新一期视频教程&#xff1a; 第8期ThreadX视频教程&#xff1a;应用实战&#xff0c;将裸机工程移植到RTOS的任务划分…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023