位置: IT常识 - 正文

Vue表单数据修改与删除(vue修改表格数据)

编辑:rootadmin
Vue表单数据修改与删除

推荐整理分享Vue表单数据修改与删除(vue修改表格数据),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue表单只提交修改字段,vue表单给值做改变,vue修改表格数据,vue表单给值做改变,vue怎么修改,vue修改数据后怎么让数据更新,vue修改表格数据,vue表单只提交修改字段,内容如对您有帮助,希望把文章链接给更多的朋友!

学习来源:视频p6 书接上文

目录数据修改功能修改对话框视频教程的做法后端提供接口前端调用接口修改完成后提交数据删除功能后端开设接口前端调用最终成果展示数据修改功能

将之前的 BookManage 页面的按钮改为想要的功能 可以注意到修改按钮的标签以及绑定了事件 handleClick 点击之后其可以在控制台打印出当前行对象的内容 观看视频时,关于修改数据,弹幕分为了两派 一派认为因该直接从页面中获取现有的数据信息加以修改,再提交给后端并存储到数据库,此流程业务简单,减轻服务器负荷。 还有一派认为因该依据关键信息或唯一标识,从后台请求这一系列数据,在此基础上进行修改,再提交给后端并存储到数据库,此流程数据安全。

我认为确实应该从后端拿数据,毕竟前端显示的数据不一定是完整信息,最全最新的内容肯定是在数据库当中,所有从后端拿数据重新修订再保存到数据库更加安全严谨。

相较于视频中新增一个页面的方式,我选择以弹出框来展示修改页面,这样我认为更切合实际场景

修改对话框

其核心内容就是 dialogFormVisible 这个属性在点击关键字时改为 true(默认是false) 所以运用到原来的页面上,当点击“修改”时,把这个属性置为 true 即可

弹出的表单用原来的新增页面进行代码结合复用 将一下代码拆分放入对应位置即可

<template> <div> <el-button type="text" @click="dialogFormVisible = true">修改 Dialog</el-button> <el-dialog title="修改" :visible.sync="dialogFormVisible"> <el-form style="width: 80%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="书名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="作者" prop="author"> <el-input v-model="ruleForm.author"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </div> </el-dialog> </div></template><script> export default { data() { return { dialogFormVisible: false, formLabelWidth: '120px', ruleForm: { name: '', author: '' }, rules: { name: [ { required: true, message: '书名不能为空', trigger: 'blur' } ], author: [ { required: true, message: '作者不能为空', trigger: 'blur' } ], } }; }, methods: { submitForm(formName) { const _this = this; this.$refs[formName].validate((valid) => { if (valid) { axios.post("http://localhost:8181/book/save",this.ruleForm).then(function (resp) { if (resp.data == "success"){ _this.$alert("《"+_this.ruleForm.name+"》添加成功", '成功', { confirmButtonText: '确定', callback: action => { _this.$router.push("/BookMange"); } }); }else{ _this.$message.error("添加失败"); } }) } else { console.log('添加失败'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, } }</script>

最终效果如下

视频教程的做法

创建额外的页面,当点击修改按钮时,进行页面跳转,并用 query 传递操作的 id 信息

handleClick(row) { this.$router.push({ path: '/update', query:{ id: row.id } })},Vue表单数据修改与删除(vue修改表格数据)

在新的页面初始化地方进行接收参数,请求后端数据 需要跳转用 $router ,需要接收参数用 $route

拓展阅读 route 和 router的区别 params 和 query 传递参数的区别

后端提供接口

之前 bookRepository 继承的 JPA 接口中,也已经写好了 findById() 函数,对我们来说相当方便,只是这个接口返回的对象是 Optional 的对象,其可以把空的对象也能正常包装并返回,避免出现空指针异常导致程序崩溃,Optional讲解 再调用 get() 方法以获取到对象,结果也是能正确输出的 则下一步写入handler接口供外部调用

@GetMapping("/findById/{id}")public Book findById(@PathVariable("id") Integer id){ return bookRepository.findById(id).get();}

经测试也是可以使用的,故在前端调用

前端调用接口

当点击 修改 操作时,对调用函数 handleClick 进行修改

handleClick(row) { const _this = this; this.dialogFormVisible = true; axios.get("http://localhost:8181/book/findById/"+row.id).then(function (resp) { _this.ruleForm = resp.data; })},

即可实现点击后出现弹窗+载入修改的目录信息

修改完成后提交

将之前的立即创建改成符合业务逻辑的“修改完成” 然后对函数 submitForm 改装一下即可 其实目前实际使用看来,不改装也能满足业务逻辑需求,JPA 的save函数自动帮我们把对象存进去了 JPA是判定了当前参数是否携带主键,如果没有就存入,如果有就修改内容

但为了业务严谨,并且以后可能遇到更复杂的业务逻辑,针对修改功能还是有必要专门开辟接口的 且根据 REST 规范,更新应该使用 PUT 请求 所以直接在 handler 里面新增接口

@PutMapping("/update")public String update(@RequestBody Book book){ Book result = bookRepository.save(book); if (result != null){ return "success"; } else { return "fail"; }}

将此处的 post 改为 put ,接口网址改成 update

即可实现修改功能

数据删除功能后端开设接口@DeleteMapping("/deleteById/{id}")public void delete(@PathVariable("id") Integer id){ bookRepository.deleteById(id);}前端调用

按钮组件绑定函数

deleteBook(row){ const _this = this; axios.delete("http://localhost:8181/book/deleteById/"+row.id).then(function (resp) { if (resp.status == 200){ _this.$alert("《"+row.name+"》删除成功", '成功', { confirmButtonText: '确定并刷新', callback: action => { _this.$router.go(0); } }); }else{ _this.$message.error("删除失败"); } })},最终成果展示

主页面js代码

<script> export default { methods: { handleClick(row) { const _this = this; this.dialogFormVisible = true; axios.get("http://localhost:8181/book/findById/"+row.id).then(function (resp) { _this.ruleForm = resp.data; }) }, deleteBook(row){ const _this = this; axios.delete("http://localhost:8181/book/deleteById/"+row.id).then(function (resp) { if (resp.status == 200){ _this.$alert("《"+row.name+"》删除成功", '成功', { confirmButtonText: '确定并刷新', callback: action => { _this.$router.go(0); } }); }else{ _this.$message.error("删除失败"); } }) }, page(currentPage){ const _this = this; axios.get("http://localhost:8181/book/findPart/"+currentPage+"/3").then(function (resp) { _this.tableData = resp.data.content; _this.total = resp.data.totalElements; }) }, submitForm(formName) { const _this = this; this.$refs[formName].validate((valid) => { if (valid) { axios.put("http://localhost:8181/book/update",this.ruleForm).then(function (resp) { if (resp.data == "success"){ _this.$alert("《"+_this.ruleForm.name+"》修改成功", '成功', { confirmButtonText: '确定', callback: action => { _this.$router.go(0); } }); }else{ _this.$message.error("修改失败"); } }) } else { console.log('添加失败'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, }, created(){ const _this = this; axios.get("http://localhost:8181/book/findPart/1/3").then(function (resp) { _this.tableData = resp.data.content; _this.total = resp.data.totalElements; }) }, data() { return { total: null, tableData: null, dialogFormVisible: false, dialogFormVisible: false, formLabelWidth: '120px', ruleForm: { name: '', author: '' }, rules: { name: [ { required: true, message: '书名不能为空', trigger: 'blur' } ], author: [ { required: true, message: '作者不能为空', trigger: 'blur' } ], } } } }</script>

本文链接地址:https://www.jiuchutong.com/zhishi/290898.html 转载请保留说明!

上一篇:韦尼格罗德的圣诞市场,德国萨克森-安哈尔特州 (© Krzysztof Baranowski/Moment/Getty Images)(韦罗尼卡)

下一篇:如何在你的电脑上完成whisper的简单部署(如何在你的电脑上截图)

  • 华为下载软件权限怎么解除(华为下载软件权限密码忘了)

    华为下载软件权限怎么解除(华为下载软件权限密码忘了)

  • 华为mate20有3.5的耳机孔吗(mate20 3.5mm)

    华为mate20有3.5的耳机孔吗(mate20 3.5mm)

  • 微信更改实名会影响啥(微信更改实名会注销吗)

    微信更改实名会影响啥(微信更改实名会注销吗)

  • 不良信息停机怎么恢复(不良信息停机啥意思)

    不良信息停机怎么恢复(不良信息停机啥意思)

  • 快手申诉没短信通知(快手申诉没短信怎么办)

    快手申诉没短信通知(快手申诉没短信怎么办)

  • 荣耀v30是集成5g芯片吗(荣耀v30是集成5g吗)

    荣耀v30是集成5g芯片吗(荣耀v30是集成5g吗)

  • 手机充电一晚上对电池有没有影响(手机充电一晚上不拔有危害吗)

    手机充电一晚上对电池有没有影响(手机充电一晚上不拔有危害吗)

  • 淘宝不评价多久会自动消(淘宝不评价多久自动评价)

    淘宝不评价多久会自动消(淘宝不评价多久自动评价)

  • access数据库中可以定义格式属性的字段类型是(access数据库可以包含几个数据表)

    access数据库中可以定义格式属性的字段类型是(access数据库可以包含几个数据表)

  • 蓝牙耳机打电话麦在哪(蓝牙耳机打电话麦克风在哪)

    蓝牙耳机打电话麦在哪(蓝牙耳机打电话麦克风在哪)

  • 电视剧怎么投屏到电视(Hisense电视剧怎么投屏)

    电视剧怎么投屏到电视(Hisense电视剧怎么投屏)

  • 手机耗电比充电快怎么办(手机耗电比充电快怎么办华为)

    手机耗电比充电快怎么办(手机耗电比充电快怎么办华为)

  • 小米路由器未获取到上网模式(小米路由器未获取)

    小米路由器未获取到上网模式(小米路由器未获取)

  • 华为云空间通知怎么关掉(华为云空间 提醒)

    华为云空间通知怎么关掉(华为云空间 提醒)

  • 华为mate30是5g还是4g(华为mate30属于5g手机吗)

    华为mate30是5g还是4g(华为mate30属于5g手机吗)

  • 微信二维码收钱怎么弄(微信二维码收钱被限制是怎么回事)

    微信二维码收钱怎么弄(微信二维码收钱被限制是怎么回事)

  • 锁屏日历怎么显示农历(锁屏日历怎么显示农历vivo)

    锁屏日历怎么显示农历(锁屏日历怎么显示农历vivo)

  • mq9f2ll/a是苹果什么版(苹果mq9d2是什么版本)

    mq9f2ll/a是苹果什么版(苹果mq9d2是什么版本)

  • ipad pro有耳机孔吗(ipad pro2021耳机插孔)

    ipad pro有耳机孔吗(ipad pro2021耳机插孔)

  • vivox27人脸解锁在哪(vivox27pro人脸解锁)

    vivox27人脸解锁在哪(vivox27pro人脸解锁)

  • 红米note7有光学防抖吗(红米note7光线感应在哪)

    红米note7有光学防抖吗(红米note7光线感应在哪)

  • Windows预览体验计划显示空白怎么办?(windows预览体验计划选哪个渠道)

    Windows预览体验计划显示空白怎么办?(windows预览体验计划选哪个渠道)

  • .Net Core中间件(.net core中间件原理)

    .Net Core中间件(.net core中间件原理)

  • Win11怎么通过WinRE访问系统还原?(win11怎么通过ip连接打印机)

    Win11怎么通过WinRE访问系统还原?(win11怎么通过ip连接打印机)

  • 医疗费用收费票据
  • 带薪年假是入职就有还是要等一年以后
  • 负数发票可以作废不
  • 前一年的未分配利润属于什么科目
  • 买入空调会计分录
  • 公转法人交税
  • 代购货物的缴税情况
  • 企业内部控制调查问卷
  • 应收职工欠款属于负债吗
  • 外贸企业申报出口退税时的会计分录
  • 购买的旧机械设备怎么办
  • 投资理财产品怎么选
  • 工程预付款未按时支付
  • 购买饲料计入哪个科目?
  • 7月财务报表行次三大变化
  • 不增税、免税、零税率的差异
  • 中国电信服务
  • 水利建设基金从铁路建设基金港口建设费收入中提取5%
  • 收到财政奖励扶持资金账务处理?
  • mac上锁
  • 错误代码11-1114
  • thinkphp6调用模型的方法
  • win11安卓子系统在哪打开
  • 笔记本电脑保养常识电池
  • vue 高德地图 窗体
  • lsm.exe是什么程序
  • 商业企业积分赠商品如何计算企业所得税
  • 翡翠湾攻略
  • 税收滞纳金可以抵税吗
  • 用人单位未为劳动者缴纳社会保险费
  • 合并报表内部交易顺流逆流
  • phpcgi远程代码执行漏洞
  • 实收资本本年利润属于什么科目
  • 营改增前建筑工程需交哪些税种
  • 本年利润的会计分录有哪些
  • 进项税额转出加计抵减会计分录
  • 在建工程业务核算
  • 个人以实物出资怎么做账
  • 采购商品的运费计入成本吗
  • 客户借款怎么做账
  • 电子税务怎么绑定开票员信息
  • 现金劳务收入会计分录
  • 劳务费发票怎么入账
  • python中如何创建一个对象
  • python如何提取文件中的数据
  • etc如何取票据
  • 土地增值税扣除项目20%
  • 两个公司可以是一个注册地址吗
  • 公司处理旧车增值税怎么交
  • 什么是叫资产负债表项目
  • 销售补偿法
  • 非公司人员差旅怎么报销
  • 滴滴打车老板起源故事
  • 事业单位会计怎么做
  • 收到返还工会经费账务处理
  • 个体生产经营所得税
  • 09年前的固定资产
  • 一般纳税人的进项税额可以抵扣吗
  • 明细账怎么弄
  • sqlserver增删改查执行语句
  • win10显示请勿关闭电脑
  • 加入跨子网路由什么协议
  • fedora os
  • dwrg_repair.exe什么意思
  • windows8安装程序
  • win7全局搜索
  • win7升级win10之后视频解码能力变弱
  • 光盘pe系统
  • win10系统如何禁用触摸板
  • win7一键共享软件
  • win7系统玩英雄联盟
  • windows7更新补丁后蓝屏
  • Tree、Unformat、Vsafe命令的区别与使用说明
  • node.js介绍
  • angularjs1.5
  • 木瓜电子
  • python3.10性能
  • jquery显示隐藏div
  • 消费税申报详细流程图
  • 专用发票章盖在哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设