关于一篇ElementUI之CUD+表单验证

目录

一.CUD增删改查简述

 1.1.增删改功能实现

二.表单验证

前端所有代码：

          好啦今天就分享到这了，希望能帮到你哦！！！

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

关于ElementUI之动态树+数据表格+分页实例

一.CUD增删改查简述

CUD是数据库操作中常用的四个基本操作，分别是创建(Create)、更新(Update)、删除(Delete)和查询(Query)。

  • 创建(Create)操作用于向数据库中添加新的数据记录。这可以通过插入一条新记录来完成，包括提供必要的数据和指定要插入的表。

  • 更新(Update)操作用于修改数据库中的现有数据。通过更新操作，可以更改一个或多个记录的特定字段值，以反映实际数据的变化。

  • 删除(Delete)操作用于从数据库中移除数据记录。可以通过指定特定的条件，删除满足条件的记录，或者直接删除整个表的内容。

  • 查询(Query)操作用于从数据库中检索指定数据记录或满足特定条件的数据记录。查询操作可以根据给定的条件过滤和排序数据，并返回满足条件的结果集。

这四种操作通常是关系型数据库管理系统（RDBMS）中最基本和常用的操作，用于对数据库进行增加、修改、删除和检索数据。

 1.1.增删改功能实现

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

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

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

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

<!-- 4.编辑窗体 --><el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear"><el-form :model="book" :rules="rules" ref="book"><el-form-item label="书籍编号" :label-width="formLabelWidth" prop="id"><el-input v-model="book.id" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype"><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>

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

data() {return {bookname: '',tableData: [],rows: 10,page: 1,total: 0,title: '新增窗体',dialogFormVisible: false,formLabelWidth: '100px',types: [],form: {},book: {id: '',bookname: '',price: '',booktype: ''},}},

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

methods: {del(idx, row) {this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let url = this.axios.urls.BOOK_DEL;this.axios.post(url, {id: row.id}).then(r => {console.log(r);this.$message({type: 'success',message: '删除成功!'});this.query({});}).catch(e => {// 处理错误});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},dosub() {this.$refs['book'].validate((valid) => {if (valid) {let url = this.axios.urls.BOOK_ADD;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};console.log(params)console.log(url)this.axios.post(url, params).then(r => {console.log(r);// 编辑/添加操作成功后，再进行查询this.query({});this.clear();}).catch(e => {// 处理错误});} else {console.log('error submit!!');return false;}});},clear() {// 初始化窗体this.dialogFormVisible = false;this.title = '新增窗体';// 清空表单this.book = {id: '',bookname: '',price: '',booktype: ''};},// 打开窗体的方法open(idx, row) {// 打开编辑窗口this.dialogFormVisible = true;// 初始化标题this.title = '新增窗体';if (row != null) {this.title = '编辑窗体';}// 如果有传入行数据，将其填充到表单字段中if (row) {this.book.id = row.id;this.book.bookname = row.bookname;this.book.price = row.price;this.book.booktype = row.booktype;}},query(params) {let url = this.axios.urls.BOOK_LIST;this.axios.get(url, {params: params}).then(r => {console.log(r);this.tableData = r.data.rows;this.total = r.data.total;}).catch(e => {})},onSubmit() {let params = {bookname: this.bookname}this.query(params);},handleSizeChange(r) {//当页大小发生变化console.log("当前页大小为：" + r);let params = {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {//当前页码发生变化console.log("当前页页码为：" + p);let params = {bookname: this.bookname,rows: this.rows,page: p}this.query(params);}},

在created中初始化数据，如下：

 created() {this.query({});this.types = [{id: 1,name: "刘勾八"},{id: 2,name: "渣渣辉"},{id: 3,name: "耗子"},{id: 4,name: "叼毛"},{id: 5,name: "耗子"}];}

实例效果：

二.表单验证

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

: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/99361.shtml

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

相关文章

北斗导航 | 位置差分、伪距差分以及载波相位平滑伪距（差分定位方法二）

北斗导航 | 位置差分、伪距差分以及载波相位平滑伪距（差分定位方法二）

===================================================== github：https://github.com/MichaelBeechan CSDN：https://blog.csdn.net/u011344545 ===================================================== 位置差分、伪距差分以及载波相位平滑伪距 位置差分伪距差分载波相位平滑…
阅读更多...
【算法练习Day14】二叉树的最大深度二叉树的最小深度完全二叉树的节点个数

【算法练习Day14】二叉树的最大深度二叉树的最小深度完全二叉树的节点个数

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 二叉树的最大深度二叉树的最…
阅读更多...
【Qt控件之QDialog】使用及技巧

【Qt控件之QDialog】使用及技巧

简介 QDialog是Qt中的一个类&#xff0c;继承自QWidget类&#xff0c;用于创建对话框窗口&#xff0c;可以显示模态&#xff08;阻塞当前窗口&#xff09;或非模态的对话框。对话框可以包含各种控件&#xff0c;如按钮、文本框等&#xff0c;用于与用户进行交互。 主要函数说…
阅读更多...
19哈希表——数组中的妙用

19哈希表——数组中的妙用

目录 LeetCode之路——202. 快乐数 分析&#xff1a; LeetCode之路——1. 两数之和 分析&#xff1a; 解法一&#xff1a;暴力枚举 解法二&#xff1a;哈希表 LeetCode之路——202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对…
阅读更多...
CocosCreator 面试题（三）JavaScript闭包原理和作用

CocosCreator 面试题（三）JavaScript闭包原理和作用

1、JavaScript闭包是什么&#xff1f; JavaScript闭包是指在函数内部创建的函数&#xff0c;它可以访问并持有创建它的父函数作用域中的变量&#xff0c;即使父函数已经执行完毕。闭包是JavaScript中强大而有用的概念&#xff0c;它可以用于创建私有变量、实现模块化和封装性&a…
阅读更多...
312.戳气球

312.戳气球

将戳气球转换到添加气球&#xff0c;记忆搜索slove(i,j)&#xff1a;在开区间(i,j)全部填满气球得到的最多硬币数&#xff0c;两端val[i]、val[j] class Solution { public:vector<vector<int>> ans;vector<int> val;int slove(int left,int right){if(left&…
阅读更多...
COCI 2021-2022 #1 - Set 题解

COCI 2021-2022 #1 - Set 题解

思路 我们将原题中的数的每一位减一&#xff0c;此时问题等价。 下面的异或都是在三进制下的异或。&#xff08;相当于不进位的加法&#xff09; 我们考虑原题中的条件&#xff0c;对于每一位&#xff0c;如果相同&#xff0c;则异或值为 0 0 0&#xff0c;如果为 1 1 1&a…
阅读更多...
【Java项目推荐之黑马头条】自媒体文章实现异步上下架（使用Kafka中间件实现）

【Java项目推荐之黑马头条】自媒体文章实现异步上下架（使用Kafka中间件实现）

自媒体文章上下架功能完成 需求分析 流程说明 接口定义 说明接口路径/api/v1/news/down_or_up请求方式POST参数DTO响应结果ResponseResult DTO Data public class WmNewsDto {private Integer id;/*** 是否上架 0 下架 1 上架*/private Short enable;}ResponseResult 自媒…
阅读更多...
设计模式 - 行为型模式：策略模式（概述 | 案例实现 | 优缺点 | 使用场景）

设计模式 - 行为型模式：策略模式（概述 | 案例实现 | 优缺点 | 使用场景）

目录 一、行为型模式 1.1、策略模式 1.1.1、概论 1.1.2、案例实现 1.1.3、优缺点 1.1.4、使用场景 一、行为型模式 1.1、策略模式 1.1.1、概论 策略模式设计的每一个算法都封装了起来&#xff0c;使他们可以相互替换&#xff0c;通过一个对象委派不同的算法给相应的客户…
阅读更多...
3.3.OpenCV技能树--二值图像处理--图像形态学操作

3.3.OpenCV技能树--二值图像处理--图像形态学操作

文章目录 1.图像形态学运算简介2.图像开运算处理2.1.图像开运算处理简介2.2.图像开运算处理代码2.3.图像开运算处理效果 3.图像闭运算处理3.1.图像闭运算处理简介3.2.图像闭运算处理代码3.3.图像闭运算处理效果 4.图像形态学梯度处理4.1.图像形态学梯度处理简介4.2.图像形态学梯…
阅读更多...
考研人考研魂——英语单词篇(20231009)

考研人考研魂——英语单词篇(20231009)

下一站&#xff0c;上岸 consoleconsistentconsistconstituteconstitutionconstituentconstructdistinctdistinguishdistinctionconstantconstrainfruitfulfulfillfundfunctionfrustrateevidencefundamentalevilevidentenvironmententertainmententertainenterprisemonotonousm…
阅读更多...
Gap Year Plan

Gap Year Plan

Gap Year Plan gap year 几个大方向 健康 60 KG10 新朋友 钱 5W RMB基本常识、社会机制补齐开网店 英语 TOELF日常交流 & 面试 口语Science Research Writing 2nd 课程 科研常识CMU 15-445MIT 6.824CMU 15-721Full Stack OpenDDIA 实习 GSOC 2024 PostgreSQL / …
阅读更多...
docker虚拟网桥和业务网段冲突处理

docker虚拟网桥和业务网段冲突处理

ifconfig查看docker虚拟网桥ip地址 docker inspect --format{{.Name}} - {{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} $(docker ps -aq)查询所有容器的ip 修改docker-compose networks networks xxx-network: driver: bridge ipam: c…
阅读更多...
redis,mongoDB,mysql,Elasticsearch区别

redis,mongoDB,mysql,Elasticsearch区别

Redis&#xff1a; Redis是一种高性能键值存储数据库&#xff0c;基于内存操作&#xff0c;支持数据持久化&#xff0c;支持数据类型丰富灵活&#xff0c;如字符串、哈希、列表、集合、有序集合等。Redis还提供了订阅/发布、事务、Lua脚本、主从同步等功能&#xff0c;适用于访…
阅读更多...
深入理解Docker：简化部署与管理的利器

深入理解Docker：简化部署与管理的利器

文章目录 引言Docker简介Docker的背景和发展Docker的优势和特点 Docker的基本概念和架构镜像&#xff08;Image&#xff09;容器&#xff08;Container&#xff09;仓库&#xff08;Repository&#xff09;Docker架构 Docker的常用命令和操作Docker的安装和配置Docker镜像的管理…
阅读更多...
Linux通过QQ邮箱账号使用mailx发送邮件

Linux通过QQ邮箱账号使用mailx发送邮件

Linux通过QQ邮箱账号使用mailx发送邮件 第一步&#xff1a;安装mailx 第二步&#xff1a;获取邮箱的授权码 第三步&#xff1a;配置mailx服务 第四步&#xff1a;添加数字证书 第五步&#xff1a;发送邮件测试&#xff01; 第一步&#xff1a;安装mailx # 安装mailx yum…
阅读更多...
Appium问题及解决：打开Appium可视化界面，点击搜索按钮，提示inspectormoved

Appium问题及解决：打开Appium可视化界面，点击搜索按钮，提示inspectormoved

打开Appium可视化界面&#xff0c;点击搜索按钮&#xff0c;提示inspectorMoved&#xff0c;那么如何解决这个问题呢&#xff1f; 搜索了之后发现&#xff0c;由于高版本Appium&#xff08;从1.22.0开始&#xff09;的服务和元素查看器分离&#xff0c;所以还需要下载Appium In…
阅读更多...
六大核心原则，引领自动化正确实施

六大核心原则，引领自动化正确实施

自动化在我们的日常工作中发挥着至关重要的作用&#xff0c;是涉及技术、合作伙伴和行业的自动化方案。尽管自动化如今已在各行业内迅速推广&#xff0c;但很大一部分企业仍在努力完善整个组织的自动化战略。 这里的困难在于&#xff0c;自动化通常是从组织内部的较低级别开始…
阅读更多...
YOLOv5全新Neck改进：BiSPAN 结构独一无二，为目标检测打造全新融合网络，增强定位信号，对于小目标检测的定位具有重要意义

YOLOv5全新Neck改进：BiSPAN 结构独一无二，为目标检测打造全新融合网络，增强定位信号，对于小目标检测的定位具有重要意义

💡本篇内容：YOLOv5全新Neck改进：BiSPAN 结构升级版，为目标检测打造全新融合网络，增强定位信号，对于小目标检测的定位具有重要意义 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv5 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式：二次创新，YOLOv…
阅读更多...
unity操作_Camera c#

unity操作_Camera c#

观察场景中Main Camera 的清除背景Clear Flags 第一种&#xff1a;Skybox天空盒渲染 制作3D游戏使用 第二种&#xff1a;Solid Color 制作2D游戏 第三种&#xff1a;Depth only 多个摄像机叠加渲染 相对重点学会多个摄像机设置Depth only使…
阅读更多...
最新文章

Copyright @ 2022~2023