SPA项目之主页面--数据表格的增删改查

SPA项目之主页面--数据表格的增删改查

  • 一.增删改查
  • 1.样式准备
  • 2.增加
  • 3.删除
  • 4.修改
  • 5.查询
  • 二.表单验证
    • 1.在表单中使用验证规则

一.增删改查

1.样式准备

<template><div class="books" style="padding: 20px;"><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-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button><el-button type="primary" @click="open">增加</el-button></el-form-item></el-form><el-table :data="tableData" stripe style="width: 100%"><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="价格"></el-table-column><el-table-column prop="booktype" label="书籍类别"></el-table-column></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.$index, scope.row)">删除</el-button></template></el-table-column></el-table><span class="demonstration">完整功能</span><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><el-dialog :title="title" :visible.sync="dialogFormVisible" @close='clear'><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="书籍名称" :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="dosuib">确 定</el-button></div></el-dialog></div></template>

2.增加

为了代码的简洁性封装了一个clear的方法

clear() {this.dialogFormVisible = false;this.book = {id: '',bookname: '',price: '',booktype: ''}

后面会使用到

dosuib() {this.$refs['book'].validate((valid) => {if (valid) {let url = this.axios.urls.BOOK_ADD;if (this.title == '编辑窗体') {let	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(r => {console.log(r)this.clear();this.query({});}).catch(e => {})} else {console.log('error submit!!');return false;}});},clear() {this.dialogFormVisible = false;this.book = {id: '',bookname: '',price: '',booktype: ''}this.title = '新增窗体';},

在这里插入图片描述

3.删除

del(idx, row) {this.$confirm('此操作将删除该记录, 是否继续?', '提示', {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: '已取消删除'});});},

在这里插入图片描述

4.修改

open(idx, row) {this.dialogFormVisible = true;if (row) {this.title = '编辑窗体';this.book.bookname = row.bookname;this.book.price = row.price;this.book.booktype = row.booktype;this.book.id = row.id;}},

在这里插入图片描述

5.查询

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) {let params = {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {let params = {bookname: this.bookname,rows: this.rows,page: p}this.query(params);}},

在这里插入图片描述
#所有代码

<template><div class="books" style="padding: 20px;"><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-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button><el-button type="primary" @click="open">增加</el-button></el-form-item></el-form><el-table :data="tableData" stripe style="width: 100%"><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="价格"></el-table-column><el-table-column prop="booktype" label="书籍类别"></el-table-column></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.$index, scope.row)">删除</el-button></template></el-table-column></el-table><span class="demonstration">完整功能</span><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><el-dialog :title="title" :visible.sync="dialogFormVisible" @close='clear'><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="书籍名称" :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="dosuib">确 定</el-button></div></el-dialog></div></template><script>export default {data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,title: '新增',dialogFormVisible: false,formLabelWidth: '100px',types: [],book: {id: '',bookname: '',price: '',booktype: ''},rules: {bookname: [{required: true,message: '请输入书籍名称',trigger: 'blur'},{min: 4,max: 11,message: '长度在 3 到 5 个字符',trigger: 'blur'}],price: [{required: true,message: '请输入书籍名称',trigger: 'blur'}],booktype: [{required: true,message: '请输入书籍名称',trigger: 'blur'}]}}},methods: {del(idx, row) {this.$confirm('此操作将删除该记录, 是否继续?', '提示', {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: '已取消删除'});});},dosuib() {this.$refs['book'].validate((valid) => {if (valid) {let url = this.axios.urls.BOOK_ADD;if (this.title == '编辑窗体') {let	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(r => {console.log(r)this.clear();this.query({});}).catch(e => {})} else {console.log('error submit!!');return false;}});},clear() {this.dialogFormVisible = false;this.book = {id: '',bookname: '',price: '',booktype: ''}this.title = '新增窗体';},open(idx, row) {this.dialogFormVisible = true;if (row) {this.title = '编辑窗体';this.book.bookname = row.bookname;this.book.price = row.price;this.book.booktype = row.booktype;this.book.id = row.id;}},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) {let params = {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {let params = {bookname: this.bookname,rows: this.rows,page: p}this.query(params);}},created() {this.query({});this.types = [{id: 1,name: '爽文',},{id: 2,name: '伦理',},{id: 3,name: '仙侠',},{id: 4,name: '玄幻',},]}}
</script><style>
</style>
-

url

/*** 对后台请求的地址的封装,URL格式如下:* 模块名_实体名_操作*/
export default {'SERVER': 'http://localhost:8080/', //服务器'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆'SYSTEM_USER_DOREG': '/user/userRegister', //注册'SYSTEM_USER_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];}
}

二.表单验证

1.在表单中使用验证规则

<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='clear'><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="书籍名称" :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="dosuib">确 定</el-button></div></el-dialog>

2.定义规则

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

在这里插入图片描述

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

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

相关文章

c++视觉处理---高斯滤波

高斯滤波处理 高斯滤波是一种常用的平滑滤波方法&#xff0c;它使用高斯函数的权重来平滑图像。高斯滤波通常用于去除噪声并保留图像中的细节。在OpenCV中&#xff0c;可以使用cv::GaussianBlur()函数来应用高斯滤波。 以下是cv::GaussianBlur()函数的基本用法&#xff1a; …

【技能树笔记】网络篇——练习题解析(五)

目录 前言 一、应用层的作用 1.1 应用层的作用 二、HTTP协议 2.1 HTTP协议 三、FTP协议 3.1 FTP协议 四、DNS协议 4.1 DNS协议 五、DHCP协议 5.1 DHCP协议 六、邮件协议 6.1 电子邮件协议 总结 前言 本篇文章给出了CSDN网络技能树中的部分练习题解析&#xff0c…

如何把“中式发音”调整到机器偏爱的口音?Elena老师带你详解突破点!

目录 1.元音辅音不清晰 2.无重音式发音→缺少word stress(听起来有气无力&#xff0c;声音很慵懒/lazy) 3.拖音式发音拖音节来强调重音 4.机器人式无情感朗读→缺乏句子重音(念经式读法&#xff0c;没有节奏感) 带收音有话筒耳机 拿手机无话筒录 事实证明很多时候&#xf…

ChatGLM2-6B微调实践-Lora方案

ChatGLM2-6B微调实践-Lora方案 环境部署Lora微调项目部署准备数据集修改训练脚本adapter推理模型合并与量化合并后的模型推理 微调过程中遇到的问题参考&#xff1a; 环境部署 申请阿里云GPU服务器&#xff1a; CentOS 7.6 64Anaconda3-2023.07-1-Linux-x86_64Python 3.11.5G…

中小学生用护眼台灯好不好?好用不伤眼的台灯推荐

在现代社会&#xff0c;人们越来越注重眼睛的健康问题&#xff0c;尤其是对于在电子产品前工作或学习的人来说&#xff0c;护眼灯的需求变得越来越重要。护眼台灯专为保护眼睛而设计&#xff0c;具有多种功能和特点。当然市面上的台灯大同小异&#xff0c;但是在选择台灯时还是…

排序算法——选择排序

一、介绍&#xff1a; 选择排序就是按照一定的顺序从选取第一个元素索引开始&#xff0c;将其储存在一个变量值中&#xff0c;根据排序规则比较后边每一个元素与这个元素的大小&#xff0c;根据排序规则需要&#xff0c;变量值的索引值进行替换&#xff0c;一轮遍历之后&#x…

STM32 Cube项目实战开发过程中--调用Freemodbus通信出现异常问题原因分析--ADC DMA初始化顺序导致串口数据异常问题解决办法

文章目录 1.ADC与DMA初始化顺序导致使用Freemodbus串口通信异常&#xff1a;2.通信异常时串口初始化的顺序为&#xff1a;3.重新调整初始化位置后&#xff0c;通信问题解决&#xff1a;5.重新调整初始化位置后&#xff0c;通信正常&#xff1a;总结&#xff1a;Cube开发库系统默…

Linux虚拟机克隆之后使用ip addr无法获取ip地址

Linux虚拟机克隆之后使用ip addr无法获取ip地址 因为克隆得到的虚拟机&#xff0c;与原先的linux系统是一模一样的包括MAC地址和IP地址。需要修改信息。 设置IP地址&#xff1a; 使用vi命令打开linux的网卡 //ifcfg-enth0是虚拟网卡的名称&#xff0c;如果你的不叫这个名字&a…

Redis(六) 内存策略

文章目录 Redis内存回收一、过期策略Redis是如何知道一个key是否过期的&#xff1f;是不是TTL到期就立即删除呢&#xff1f; 二、淘汰策略 Redis内存回收 一、过期策略 Redis是如何知道一个key是否过期的&#xff1f; 利用两个Dict分别记录key-value对及key-ttl对 是不是TTL到…

linux中Crontab定时参数

注&#xff1a;图片转载于 点我进入图片出处 * * * * * sh /data/var/test.sh >> test_crontab_log.log分钟 0~59 0表示没分周 小时 0~23 0表示每小时 天 1~31 *表示每天 月 1~12 *表示每月 周 0~7 */0/7表示每周

4D5D影院设备发展前景7D互动影院体验馆应用

5D影院设备发展前景广阔。随着科技的不断进步&#xff0c;5D影院设备在电影行业中的应用越来越广泛。5D影院设备以其独特的沉浸式体验和互动性&#xff0c;吸引了大量观众。未来&#xff0c;随着技术的不断创新和成本的降低&#xff0c;5D影院设备将会得到更多的应用和推广。 首…

微信小程序抓包

https://github.com/water-kid/WeChatOpenDevTools 抓包工具 第一次安装成功了&#xff0c;公众号能抓&#xff0c;&#xff0c;小程序报错&#xff0c;&#xff0c;卸载后安装不起了 方法二&#xff1a; 将version.dll 放入 微信所在目录 E:\Program Files\Tencent\WeChat\[…

黑盒测试方法:原理+实战

目录 一、如何设计测试用例 二、黑盒测试常用方法 1、基于需求进行测试用例的设计 2、等价类 3、边界值 4、判定表分析法&#xff08;因果分析法&#xff09; 5、正交表 6、场景设计法 三、案例补充 1、使用Fiddler模拟弱网 2、针对一个接口该如何测试 一、如何设计测试…

2023Node.js零基础教程(小白友好型),nodejs新手到高手,(二)NodeJS入门——buffer模块、计算机基础、fs模块、path模块

就算步子乱了又如何&#xff0c;接着跳下去就好了。——《闻香识女人》 开始 011_Buffer_介绍与创建 hello&#xff0c;大家好&#xff0c;我们来学习一下buffer。首先来看看 buffer 是一个什么东东。buffer&#xff0c;中文译为缓冲区&#xff0c;是一个类似于数组的对象&am…

视频通话中的Camera操作

视频通话也有打开本地摄像头预览的场景&#xff0c;但打开本地Camera预览逻辑&#xff0c;并非在Dailer APP中实现&#xff0c;具体流程图如下。 Dialer app中只调用 1、setCamera用于打开摄像头 相关动作在Ims apk中实现&#xff0c;open函数最后调用了VTSource.java中的doOp…

“比特币震荡中的秘密信号?技术分析揭示最近走势的关键!“

技术分析 比特币维持在 27,000 美元的支撑位&#xff0c;甚至在此价格水平上形成了新的更高低点。这标志着一个非常有利的发展&#xff0c;表明每小时和每日时间框架上的看涨趋势。 然而&#xff0c;当考虑每周和每月的观点时&#xff0c;我们仍然遇到阻力&#xff0c;这可以…

文本编辑器去除PDF水印

用文本编辑器打开pdf&#xff0c;搜索水印的特殊文字&#xff0c;全部替换。 另外一个水印字母间有空格。 替换完后保存。 重新打开pdf&#xff1a;

基于 ACK Fluid 的混合云优化数据访问(一):场景与架构

作者&#xff1a;车漾&#xff08;必嘫&#xff09; 本系列文章将介绍如何基于 ACK Fluid 支持和优化混合云的数据访问场景。 概述 在 AI 和大数据时代&#xff0c;算力即正义&#xff0c;强大的算力推动了源源不断的创新。然而&#xff0c;企业自建的算力集群存在资源容量和…

浏览器插件开发爬虫记录

常用爬虫有各种各样的反爬限制&#xff0c;而如果是小数据量并且该网站反爬手段非常厉害的前提下&#xff0c;可以考虑使用浏览器插件作为爬虫手段 基本代码来源于这位博主分享的插件代码&#xff0c; 主要在他的基础上加了 请求代理、管理面板、脚本注入拦截到的请求数据和管…

最新AI智能创作系统源码AI绘画系统/支持GPT联网提问/支持Prompt应用

AI绘图专业设计 不得将程序用作任何违法违纪内容&#xff0c;不要让亲人两行泪 界面部分图解构&#xff1a; 前台show&#xff1a; 前端部署&#xff1a; 安装pm2管理器 点击设置 选择v16.19.1版本-切换版本 再新建一个网站 点击设置 添加反向代理-代理名称随便…