基于Vue+ELement实现增删改查案例与表单验证（附源码）

news/2024/10/18 18:27:14/

🎉🎉欢迎来到我的CSDN主页！🎉🎉

🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

🌟推荐给大家我的专栏《ELement》。🎯🎯

👉点击这里，就可以查看我的主页啦！👇👇

Java方文山的个人主页

🎁如果感觉还不错的话请给我点赞吧！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖

请添加图片描述

目录

一、前言

二、增删改查案例

2.1.查询功能 

2.2.新增功能

2.3.修改功能

2.4.删除功能

三、表单验证 

一、前言

首先，Vue是一种流行的JavaScript框架，它提供了一种简洁易用的方式来构建用户界面。通过Vue的数据绑定和组件化思想，我们可以轻松地管理和更新用户界面的状态。

其次，Element UI是一套基于Vue.js的组件库，提供了丰富的UI组件，包括表单、按钮、弹窗等。我们可以利用Element UI的组件来快速搭建出整洁美观的用户界面。

在这个前端应用中，我们将使用Vue和Element UI来实现增加、删除、修改、查询等功能。通过Vue的双向数据绑定，我们可以实时更新用户输入的数据，并将其展示在界面上。同时，利用Element UI提供的表单验证功能，我们可以对用户的输入进行合法性验证，保证数据的正确性。

总之，通过结合Vue和Element UI，我们可以轻松地构建一个功能完善、易于使用的前端应用，实现增删改查和表单验证的需求。

二、增删改查案例

基于上一篇文章我们所编写的数据表格实现增删改查，看过上篇文章的都知道，结合Vue+ELement实现功能还是比较简单的，今天主要是围绕上篇内容进行增删改查操作，如果文中有不动的地方可以看看上一篇文章或是往期内容介绍，先看看我们目前的效果。

2.1.查询功能 

查询功能就不过多介绍了，在上一篇已经实现了，这里直接上源码

<template><div><!--搜索栏--><el-form :inline="true" class="form-search" style="padding: 30px;"><el-form-item label="书籍名称"><el-input v-model="bookname" placeholder="请输入书籍名称"></el-input></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" @click="query()">查询</el-button></el-form-item></el-form><!-- 数据表格--><el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"><el-table-column prop="id" label="编号" width="180"></el-table-column><el-table-column prop="bookname" label="书籍名称" width="180"></el-table-column><el-table-column prop="price" label="书籍价格" width="180"></el-table-column><el-table-column prop="booktype" label="书籍类别" ></el-table-column></el-table><!-- 分页栏--><div class="block"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page":page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div>
</template><script>export default {data() {return {bookname: "",tableData: [],rows: 10,page: 1,total: 0,}},methods: {//封装查询方法list(params) {let url = this.axios.urls.BOOK_LIST;this.axios.get(url, {params: params}).then(r => {console.log(r)this.tableData = r.data.rowsthis.total = r.data.total}).catch(e => {})},//模糊查询方法query() {let params = {bookname: this.bookname}this.list(params)},//当页发生变化会触发handleSizeChange(r) {let params = {bookname: this.bookname,rows: this.rows,rows: r}this.list(params)},//当前页数发生变化会触发handleCurrentChange(p) {let params = {bookname: this.bookname,rows: this.rows,page: p}this.list(params)}},created() {//加载页面先去后端拿数据let params = {bookname: this.bookname}this.list()}}
</script><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style>

2.2.新增功能

1)在action.js配置我们的后端接口

'BOOK_ADD': '/book/addBook', //书籍新增

2）新增一个新增按钮

  <el-button type="primary" icon="el-icon-search" @click="add()">新增</el-button>

3）根据资料查找相应代码进行修改

 这个是我找的素材仅供大家参考

<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose"><!-- form表单 --><el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">...</el-form><div slot="footer" class="dialog-footer"><el-button type="danger" @click="dialogFormVisible = false" icon="el-icon-close">取 消</el-button><el-button type="primary" @click="doSubmit" icon="el-icon-edit-outline">保 存</el-button></div>
</el-dialog><script>export default {name:"BookList",data:function(){return {dialogFormVisible:false,   //是否显现对话框}},methods:{//关闭对话框时触发的事件dialogClose(){}}}
</script>

 我们将上面的代码进行修改得到了下面的结果

 <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear"><el-form :model="book"><el-form-item label="书籍ID" :label-width="formLabelWidth" v-show="hidden"><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="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>

在data中定义变量

    data() {return {bookname: "",tableData: [],rows: 10,page: 1,total: 0,title: "新增窗口",//对话框标题dialogFormVisible: false,//对话框是否显示book: {id: null,bookname: null,price: '',booktype: null},//书籍字段formLabelWidth:'100px',types:[],//书籍类别hidden:false//id输入框是否隐藏}}

在methods中定义方法

//提交新增/修改表单dosub(){let url = this.axios.urls.BOOK_ADD;if(this.title=="编辑窗口"){url=this.axios.urls.BOOK_EDIT;}let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}this.axios.post(url,params).then(r => {if (r.data.success) {this.$message({message: r.data.msg,type: 'success'});this.clear()this.query()} else {this.$message.error(r.data.msg);}}).catch(e => {})},//关闭对话框clear(){this.title= "新增窗口",this.dialogFormVisible=false,this.book={id: null,bookname: null,price: '',booktype: null}},//打开对话框open(){this.dialogFormVisible=true;}

在created中获取书本类型（这里我就做个假数据模拟一下）

    created() {this.list()this.types=[{id:1,name:"爽文"},{id:2,name:"爱情"},{id:3,name:"谍战"},{id:4,name:"古装"}]}

 效果演示：

2.3.修改功能

新增完成了修改功能还远吗？还是一样的套路先去定义后端接口再去ELement找模板修改编写需求

1)在action.js配置我们的后端接口

'BOOK_EDIT': '/book/editBook', //书籍修改

2）根据资料查找相应代码进行修改

 这个是我找的素材仅供大家参考

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

scope 是插槽的作用域对象，它包含了当前循环项的相关信息。通常情况下，scope 对象会包含以下属性：

  • scope.$index：当前循环项的索引值。
  • scope.row：当前循环项的数据对象。

通过使用 scope.$index，我们可以获取当前循环项在数组中的索引位置，以便进行相应的操作。而 scope.row 则代表当前循环项的具体数据对象，可以用于显示或修改数据。

 我们将上面的代码进行修改得到了下面的结果

<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="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column>

在methods中迭代定义open方法

open(idx,row) {this.dialogFormVisible = true;//只有编辑row才不为空if(row!=null){this.title="编辑窗口";this.book.id=row.id;this.book.bookname=row.bookname;this.book.price=row.price;this.book.booktype=row.booktype;}}

 效果演示：

2.4.删除功能

轻车熟路，我们删除肯定需要有一个确认的操作所以需要找一个确认消息框

1)在action.js配置我们的后端接口

'BOOK_DEL': '/book/delBook', //书籍删除

2）根据资料查找相应代码进行修改

 这个是我找的素材仅供大家参考

 open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });}

 我们只需要将原本我们表格内的删除方法换成以上的代码加以修改即可

在methods中定义方法

  //删除数据del(idx, row) {this.$confirm('此操作将删除书籍为《'+row.bookname+'》的数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let url = this.axios.urls.BOOK_DEL;this.axios.post(url, {id:row.id}).then(r => {if (r.data.success) {this.$message({message: r.data.msg,type: 'success'});this.clear()this.query()} else {this.$message.error(r.data.msg);}}).catch(e => {})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}

效果演示：

看到这里我们的增删改查都已完成了是不是非常的丝滑呢？看完先别走，还有后续，我们增删改查看似没错，但是我们如果提交的是空的数据会有什么印象呢？我们的后端会报空指针异常，所以针对这个问题，我们还要进一步优化——>表单验证 

三、表单验证 

首先给大家把错误演示出来

其实ELement也早就想到了这个问题，我们直接“套娃”即可。

查看完官方文档后，我们得知只需要做以下几件事：

①指定表单规则:rules="rules"

②指定验证表单对象ref="book"（必须和:model="book"一致）

③为字段设置prop进行校验

④定义表单验证规则

⑤使用规则

添加表单验证后的代码

    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear"><el-form :model="book" :rules="rules" ref="book"><el-form-item label="书籍ID" :label-width="formLabelWidth" v-show="hidden"><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="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>

表单规则： 

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

在提交表单之前使用规则 

dosub() {this.$refs['book'].validate((valid) => {if (valid) {let url = this.axios.urls.BOOK_ADD;if (this.title == "编辑窗口") {url = this.axios.urls.BOOK_EDIT;}let params = {id: this.book.id,bookname: this.book.bookname,price: this.book.price,booktype: this.book.booktype}this.axios.post(url, params).then(r => {if (r.data.success) {this.$message({message: r.data.msg,type: 'success'});this.clear()this.query()} else {this.$message.error(r.data.msg);}}).catch(e => {})} else {console.log('error submit!!');return false;}});}

效果演示 ：

如果一个字段中有多个规则，不满其中一个都会拦截提交！！

请添加图片描述

到这里我的分享就结束了，欢迎到评论区探讨交流！！

💖如果觉得有用的话还请点个赞吧 💖


http://www.ppmy.cn/news/1131967.html

相关文章

webpack优化策略

webpack优化策略

这三点是webpack优化策略的一部分&#xff0c;具体解释如下&#xff1a; 优化正则匹配&#xff08;Test&#xff09;&#xff1a;在webpack的配置中&#xff0c;test属性是一个正则表达式&#xff0c;用于匹配需要应用该loader的文件的扩展名。在您提供的代码中&#xff0c;te…
阅读更多...
【C++】class的设计与使用（十）重载iostream运算符

【C++】class的设计与使用（十）重载iostream运算符

希望对某个类对象进行读写操作&#xff0c;直接cout<<类对象<<endl;或cin>>类对象;编译器会报错&#xff0c;所以我们必须提供一份重载的input/output运算符&#xff1a; 重载ostream运算符 ostream& operator<<(ostream &os, const Triangu…
阅读更多...
枚举，进制转换,char*，补码，算法，链表，位运算，NULL的含义

枚举，进制转换,char*，补码，算法，链表，位运算，NULL的含义

什么是枚举 进制转换 4个二进制位组合才能有16个状态 字符指针 补码 编码就是解决这个东西到底用哪个二进制表示 不够位数指的是比如32位&#xff0c;前面都补1 #include <iostream> #include <map> #include <vector> #include <algorithm> using na…
阅读更多...
CSS box-shadow阴影

CSS box-shadow阴影

1、语法 box-shadow: h-shadow v-shadow blur spread color inset; 值描述h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset可选。…
阅读更多...
通过code2Session接口获取openId(上）

通过code2Session接口获取openId(上）

//导入request请求工具类 import {getBaseUrl,getWxLogin,getUserProfile,requestUtil} from ../../utils/requestUtil; import regeneratorRuntime from ../../lib/runtime/runtime; Page({/*** 页面的初始数据*/data: {address:{},baseUrl:,cart:[],totalPrice:0,totalNum:0}…
阅读更多...
使用sqlmap获取数据步骤

使用sqlmap获取数据步骤

文章目录 1.使用sqlmap获取所有数据库2.使用sqlmap获取当前连接数据库3.使用sqlmap获取当前数据库下所有表名4.使用sqlmap获取当前数据库下某个表下所有列名5.使用sqlmap获取当前数据库下某个表下指定字段的数据6.脱库命令 1.使用sqlmap获取所有数据库 –dbs python sqlmap.py…
阅读更多...
【C语言】通讯录系统实现 （保姆级教程，附源码）

【C语言】通讯录系统实现 （保姆级教程，附源码）

目录 1、通讯录系统介绍 2、代码分装 3、代码实现步骤 3.1、制作菜单menu函数以及游戏运行逻辑流程 3.2、封装人的信息PeoInfo以及通讯录Contact结构体类型 3.3、初始化通讯录InitContact函数 3.4、增加联系人AddContact函数 3.5、显示所有联系人ShowContact函数 3.6、…
阅读更多...
ARM64平台jetson nano上安装PyQt5环境

ARM64平台jetson nano上安装PyQt5环境

一、前提需要安装python 嵌入式ARM64开发平台上&#xff0c;pip安装pyqt5 无法安装上&#xff0c;python安装过的可以略过这一步&#xff0c;我这安装的是python3.9 二、安装PyQt5以及SIP PyQt5版本需与SIP要对应 sip 4.19.25 下载 pyqt5 5.15.2 下载 1.源码编译需要依赖qm…
阅读更多...
最新文章

Copyright @ 2022~2023