添加、编辑和删除 前后端联调

一、添加  UI引入

<template><div><el-card class="box-card" style="height: 620px"><el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>&nbsp&nbsp&nbsp<el-button type="primary" @click="getUserList">查询</el-button>&nbsp<el-button type="primary"  @click="handleCreate">新增</el-button><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="phone"label="手机号"></el-table-column><el-table-columnprop="avatar"label="头像"></el-table-column><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></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="this.query.page":page-sizes="[5, 10, 20, 30]":page-size="this.query.size"layout="total, sizes, prev, pager, next, jumper":total="this.total"></el-pagination></el-card><el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center><el-form :model="form" :rules="rules" ref="foreName"><el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name"><el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="手机号" :label-width="formLabelWidth" prop="phone"><el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" :label-width="formLabelWidth" prop="sex"><el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别"><el-option label="男" value="男"></el-option><el-option label="女" value="女"></el-option></el-select></el-form-item><el-form-item label="头像" :label-width="formLabelWidth" prop="avatar"><el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary"  @click="submitForm">确 定</el-button></div></el-dialog></div></template><script>export default {name: 'HomeView',data() {return {query: {page: 1,size: 5,name: '',},total:0,currentPage4: 4,dialogFormVisible: false,formLabelWidth:'80px',form:{name:'',sex:'',phone:'',avatar:''},rules: {name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }],sex: [{ required: true, message: '请选择性别', trigger: 'change' }],phone: [//手机号格式校验规则{ required: true, message: '请填写手机号', trigger: 'blur' },{ pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur' }],avatar: [{ required: true, message: '请上传头像', trigger: 'change' }]},tableData: [],}},methods: {submitForm(){this.$refs.foreName.validate((valid)=>{if(valid){//校验成功，提交给后端，并关闭输入表单console.log('校验成功',this.form);this.dialogFormVisible = false;}})},handleCreate(){this.dialogFormVisible = true;},handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.query.size = val;this.getUserList()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.query.page = val;this.getUserList()},getUserList(){this.axios.get("http://localhost:3333/user/getList",{params:{name:this.query.name,  //参数让其等于输入框输入的namepage:this.query.page,size:this.query.size}}).then((resp)=>{console.log(resp,'resp');this.tableData = resp.data.content.list;this.total =  resp.data.content.total;});}},created() {//Vue生命周期函数，此处的目的是页面打开，就调用函数，将数据库中的数据显示出来this.getUserList();}
}
</script>

二、编辑 UI引入

<template><div><el-card class="box-card" style="height: 620px"><el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>&nbsp&nbsp&nbsp<el-button type="primary" @click="getUserList">查询</el-button>&nbsp<el-button type="primary"  @click="handleCreate">新增</el-button><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="phone"label="手机号"></el-table-column><el-table-columnprop="avatar"label="头像"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="this.query.page":page-sizes="[5, 10, 20, 30]":page-size="this.query.size"layout="total, sizes, prev, pager, next, jumper":total="this.total"></el-pagination></el-card><el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center><el-form :model="form" :rules="rules" ref="foreName"><el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name"><el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="手机号" :label-width="formLabelWidth" prop="phone"><el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" :label-width="formLabelWidth" prop="sex"><el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别"><el-option label="男" value="男"></el-option><el-option label="女" value="女"></el-option></el-select></el-form-item><el-form-item label="头像" :label-width="formLabelWidth" prop="avatar"><el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary"  @click="submitForm">确 定</el-button></div></el-dialog></div></template><script>export default {name: 'HomeView',data() {return {query: {page: 1,size: 5,name: '',},total:0,currentPage4: 4,dialogFormVisible: false,formLabelWidth:'80px',form:{name:'',sex:'',phone:'',avatar:''},rules: {name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }],sex: [{ required: true, message: '请选择性别', trigger: 'change' }],phone: [//手机号格式校验规则{ required: true, message: '请填写手机号', trigger: 'blur' },{ pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur' }],avatar: [{ required: true, message: '请上传头像', trigger: 'change' }]},tableData: [],}},methods: {submitForm(){this.$refs.foreName.validate((valid)=>{if(valid){//校验成功，提交给后端，并关闭输入表单，新增和修改都是重新用新数据去覆盖旧数据，都是post请求console.log('校验成功',this.form);this.dialogFormVisible = false;}})},handleCreate(){this.form = {};this.dialogFormVisible = true;},handleEdit(row) {console.log(row);//点击编辑我们发现，row里面是数据，那我们就可以直接把row值赋给form//这样就可以达到点击编辑，就会显示出数据的效果this.form = row;this.dialogFormVisible = true},handleDelete(index, row) {console.log(index, row);},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.query.size = val;this.getUserList()},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.query.page = val;this.getUserList()},getUserList(){this.axios.get("http://localhost:3333/user/getList",{params:{name:this.query.name,  //参数让其等于输入框输入的namepage:this.query.page,size:this.query.size}}).then((resp)=>{console.log(resp,'resp');this.tableData = resp.data.content.list;this.total =  resp.data.content.total;});}},created() {//Vue生命周期函数，此处的目的是页面打开，就调用函数，将数据库中的数据显示出来this.getUserList();}
}
</script>

三、submitForm方法

submitForm(){this.$refs.foreName.validate((valid)=>{if(valid){console.log('校验成功',this.form);//校验成功，提交给后端，并关闭输入表单，新增和修改都是重新用新数据去覆盖旧数据，都是post请求this.axios.post('http://localhost:3333/user/saveUser',this.form).then((resp)=>{let data = resp.data;//接受后端返回的数据 commonDto里的console.log(resp,'resp')if(data.success){//如果后端返回数据成功，关闭对话框，表单数据清空this.dialogFormVisible = false;this.dialogFormVisible1 = false;this.form = {};//重置表单校验状态this.$refs.foreName.resetFields();//调用初始化查询方法，因为新增或者修改了，后端会同步数据库，这时候需要重新调用getUserList方法//这样前端就直接显示出我们新增或者修改的用户数据了this.getUserList();//调用UI的message消息提示组件方法，提示操作成功this.$message({message: '恭喜你操作成功',type: 'success'});}})console.log('校验成功',this.form);this.dialogFormVisible = false;}})}

四、删除

1.后端代码

@DeleteMapping("/delete/{id}")public CommonDto deleteUser(@PathVariable Long id){CommonDto<User> commonDto = new CommonDto<>();userService.removeById(id);commonDto.setMessage("删除成功");return commonDto;}

2.前端

    handleDelete(row) {console.log(row);let id = row.id;this.axios.delete('http://localhost:3333/user/delete/'+ id).then((resp)=>{let data = resp.data;//接受后端返回的数据 commonDto里的console.log(resp,'resp')if(data.success){this.getUserList();//调用UI的message消息提示组件方法，提示操作成功this.$message({message: data.message,type: 'success'});}})},

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

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

相关文章

UWB PDOA定位原理

UWB PDOA定位原理

以下是笔记总结,内容不完全正确 1,什么是PDOA PDOA &#xff0c;英文全称是Phase-Difference-of-Arrival&#xff0c;信号到达相位差 PDOA定位算法的原理如下&#xff1a; UWB基站上放置两个相同且间隔d<λ/2的天线&#xff0c;UWB标签上的信号到达两个天线的相位差就在-180…
阅读更多...
Docker Cgroups资源控制

Docker Cgroups资源控制

Cgroup资源控制 Docker 通过 Cgroup 来控制容器使用的资源配额&#xff0c;包括 CPU、内存、磁盘三大方面&#xff0c; 基本覆盖了常见的资源配额和使用量控制。 Cgroup 是 ControlGroups 的缩写&#xff0c;是 Linux 内核提供的一种可以限制、记录、隔离进程组所使用的物理资源…
阅读更多...
无为WiFi的一批服务器

无为WiFi的一批服务器

我们在多个地区拥有高速服务器&#xff0c;保证网速给力&#xff0c;刷片无压力 嘿嘿 <?phpinclude("./includes/common.php"); $actisset($_GET[act])?daddslashes($_GET[act]):null; $urldaddslashes($_GET[url]); $authcodedaddslashes($_GET[authcode]);he…
阅读更多...
多无人机编队集群飞行

多无人机编队集群飞行

matlab2016b可直接运行 多无人机集群编队飞行&#xff08;8架无人机&#xff09;资源-CSDN文库
阅读更多...
逻辑回归评分卡

逻辑回归评分卡

文章目录 一、基础知识点(1)逻辑回归表达式(2)sigmoid函数的导数损失函数(Cross-entropy, 交叉熵损失函数)交叉熵求导准确率计算评估指标 二、导入库和数据集导入库读取数据 三、分析与训练四、模型评价ROC曲线KS值再做特征筛选生成报告 五、行为评分卡模型表现总结 一、基础知…
阅读更多...
manual control lost 飞机乱飞

manual control lost 飞机乱飞

Gazebo或jmavsim里仿真都这样&#xff0c;突然QGC会出现 manual control lost&#xff0c;然后飞机会乱飞 解决方案1&#xff1a; 把 NAV_RCL_ACT 设置为 Disable&#xff0c;相当于关闭遥控器丢失失效保护&#xff0c;默认是Return返航&#xff0c;所以会乱飞。 解决方案2&a…
阅读更多...
OceanBase 数据库入门知识

OceanBase 数据库入门知识

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…
阅读更多...
实体机 安装 centos

实体机 安装 centos

实体机 安装 centos 制作U盘的时候&#xff0c;使用的ultraISO 同样方法一个u盘制作的有问题&#xff0c; 另外一个制作的没有问题。 可能和选择 usb-hdd 或者 usb-hdd 有关 https://mirrors.tuna.tsinghua.edu.cn/centos/7.9.2009/isos/x86_64/ 参考文档&#xff1a; http:…
阅读更多...
《Python 自动化办公应用大全》书籍推荐（包邮送书五本）

《Python 自动化办公应用大全》书籍推荐（包邮送书五本）

前言 随着科技的快速发展和智能化办公的需求增加&#xff0c;Python自动化办公成为了一种趋势。Python作为一种高级编程语言&#xff0c;具有简单易学、功能强大和开放源代码等优势&#xff0c;可以帮助我们更高效地完成日常办公任务。 Python自动化办公还可以帮助我们实现更…
阅读更多...
Python150题day16

Python150题day16

3.5 int 内置函数int&#xff0c;可以将float、全是数字的字符串转换成int类型的数据&#xff0c;为了降低难度&#xff0c;这个练习题只要求你实现其中的一种功能&#xff0c;将全是数字组成的字符串转换成int类型数据&#xff0c;例如将字符此案“123”转换成整数123&#x…
阅读更多...
华为数通方向HCIP-DataCom H12-831题库(单选题：221-240）

华为数通方向HCIP-DataCom H12-831题库(单选题：221-240）

第221题 以下哪些项能被正则表达式^30.成功匹配? A、200 100 300 B、100 200 300 C、300 200 100 D、300 100 200 答案：CD 解析： 30.其中的“点”表示的是任何的一个数字，表示的是as-path的开头;所以以300开头的都是满足题目需求的。 第222题 以下哪些项的Community属性能…
阅读更多...
厌烦了iPhone默认的热点名称？如何更改iPhone上的热点名称

厌烦了iPhone默认的热点名称？如何更改iPhone上的热点名称

你对你默认的热点名称感到厌倦了吗&#xff1f;这篇文章是为你准备的。在这里&#xff0c;你可以了解如何轻松更改iPhone上的热点名称。 个人热点会将你的手机数据转换为Wi-Fi信号。手机上的个人热点使用户能够与其他用户共享其蜂窝数据连接。当你在WIFI网络之外时&#xff0c…
阅读更多...
时序预测 | MATLAB实现ICEEMDAN-IMPA-GRU时间序列预测

时序预测 | MATLAB实现ICEEMDAN-IMPA-GRU时间序列预测

时序预测 | MATLAB实现ICEEMDAN-IMPA-GRU时间序列预测 目录 时序预测 | MATLAB实现ICEEMDAN-IMPA-GRU时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 ICEEMDAN-IMPA-GRU功率/风速预测 基于改进的自适应经验模态分解改进海洋捕食者算法门控循环单元时间序列预…
阅读更多...
通过IP地址管理提升企业网络安全防御

通过IP地址管理提升企业网络安全防御

在今天的数字时代&#xff0c;企业面临着越来越多的网络安全威胁。这些威胁可能来自各种来源&#xff0c;包括恶意软件、网络攻击和数据泄露。为了提高网络安全防御&#xff0c;企业需要采取一系列措施&#xff0c;其中IP地址管理是一个重要的方面 1. IP地址的基础知识 首先&a…
阅读更多...
​企业数据泄露不断，深信服EDR助企业构建数据“安全屋”

​企业数据泄露不断，深信服EDR助企业构建数据“安全屋”

随着数字时代不断发展,数据泄露问题愈发严峻,个人信息安全面临着严重的威胁。近日,加拿大电信巨头加拿大贝尔(Bell Canada)对外披露了一起大规模数据泄露事件,该公司承认黑客入侵其系统,并窃取了190万个用户电子邮件地址以及约1700个用户姓名及活跃电话号码信息,相关损失无法估…
阅读更多...
常见弯道输送机有哪些

常见弯道输送机有哪些

提到弯道输送机您可能首先想到的就是弯道滚筒线&#xff0c;其实除了滚筒线之外&#xff0c;也有一些其他线体可以做弯道&#xff0c;下面就为您总结了4种常见的弯道输送机。 1、弯道皮带线&#xff1a;即线体转弯处设计成皮带输送机&#xff0c;这种形式的转弯设计可以实现不同…
阅读更多...
【ElasticSearch】基于 Java 客户端 RestClient 实现对 ElasticSearch 索引库、文档的增删改查操作，以及文档的批量导入

【ElasticSearch】基于 Java 客户端 RestClient 实现对 ElasticSearch 索引库、文档的增删改查操作，以及文档的批量导入

文章目录 前言一、对 Java RestClient 的认识1.1 什么是 RestClient1.2 RestClient 核心类&#xff1a;RestHighLevelClient 二、使用 Java RestClient 操作索引库2.1 根据数据库表编写创建 ES 索引的 DSL 语句2.2 初始化 Java RestClient2.2.1 在 Spring Boot 项目中引入 Rest…
阅读更多...
ChatGPT多模态升级，支持图片和语音，体验如何？

ChatGPT多模态升级，支持图片和语音，体验如何？

一、前言 9 月 25 日&#xff0c;ChatGPT 多模态增加了新的语音功能和图像功能。这些功能提供了一种新的、更直观的界面&#xff0c;允许我们与 ChatGPT 进行语音对话或展示我们正在谈论的内容。 ChatGPT 现在可以看、听、和说话了&#xff0c;而不单单是一个文本驱动的工具了。…
阅读更多...
Vue 路由跳转设置不刷新

Vue 路由跳转设置不刷新

一、问题描述 在某些情况下&#xff0c;vue项目前端有些情况下需要设置路由跳转&#xff0c;页面不刷新&#xff0c;比如: 前进导航刷新页面&#xff0c;后退不刷新&#xff0c;page1–>page2–>page3&#xff0c;每次前进到一个新页面都需要获取数据&#xff0c;而按下…
阅读更多...
Android攻城狮学鸿蒙 -- 点击事件

Android攻城狮学鸿蒙 -- 点击事件

具体参考&#xff1a;华为官网学习地址 1、点击事件&#xff0c;界面跳转 对于一个按钮设置点击事件&#xff0c;跳转页面。但是onclick中&#xff0c;如果pages前边加上“/”&#xff0c;就没法跳转。但是开发工具加上“/”才会给出提示。不知道是不是开发工具的bug。&#…
阅读更多...
最新文章

Copyright @ 2022~2023