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

一、添加  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.xdnf.cn/news/148961.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

力扣第102题 广度优先搜索 二叉数 c++

力扣第102题 广度优先搜索 二叉数 c++

题目 102. 二叉树的层序遍历 中等 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20…
阅读更多...
CSDN博主粉丝数突破10万：坚持分享的力量与收获

CSDN博主粉丝数突破10万：坚持分享的力量与收获

今天&#xff0c;我在CSDN上看到了一位好友的统计数据&#xff0c;他统计了CSDN上所有粉丝数量排名靠前的博主的排名。虽然这个统计可能存在一些误差&#xff0c;但大体上应该是准确的。我惊讶地发现&#xff0c;截止到2023年10月4日&#xff0c;我的粉丝数量已经达到了101,376…
阅读更多...
uniapp项目实践总结(二十五)苹果 ios 平台 APP 打包教程

uniapp项目实践总结(二十五)苹果 ios 平台 APP 打包教程

导语：当你的应用程序开发完成后，在上架 ios 应用商店之前，需要进行打包操作，下面就简单介绍一下打包方法。 目录 准备工作注册账号生成证书打包配置准备工作 在打包之前，请保证你的 uniapp 应用程序编译到 ios 模拟器或者是真机调试基座环境下是可以正常运行的，苹果打包…
阅读更多...
二叉树题目：路径总和 II

二叉树题目：路径总和 II

文章目录 题目标题和出处难度题目描述要求示例数据范围 前言解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;路径总和 II 出处&#xff1a;113. 路径总和 II 难度 4 级 题目描述 要求 给你二叉树的根结点 root \tex…
阅读更多...
基于三平面映射的地形纹理化【Triplanar Mapping】

基于三平面映射的地形纹理化【Triplanar Mapping】

你可能遇到过这样的地形&#xff1a;悬崖陡峭的一侧的纹理拉伸得如此之大&#xff0c;以至于看起来不切实际。 也许你有一个程序化生成的世界&#xff0c;你无法对其进行 UV 展开和纹理处理。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 三平面映射&#xff08;Trip…
阅读更多...
侯捷 C++ STL标准库和泛型编程 —— 9 STL周围

侯捷 C++ STL标准库和泛型编程 —— 9 STL周围

最后一篇&#xff0c;完结辽&#xff01;&#x1f60b; 9 STL周围 9.1 万用Hash Function Hash Function的常规写法&#xff1a;其中 hash_val 就是万用Hash Function class CustumerHash { public:size_t operator()(const Customer& c) const{ return hash_val(c.fna…
阅读更多...
DevEco Studio设置Nodejs提示路径只能包含英文、数字、下划线等

DevEco Studio设置Nodejs提示路径只能包含英文、数字、下划线等

安装DevEco Studio 3.1.1 Release 设置Nodejs路径使用nodejs默认安装路径 &#xff08;C:\Program Files\nodejs&#xff09; 提示只能包含英文、数字、下划线等 , 不想在安装nodejs请往下看 nodejs默认路径报错 修改配置文件 1、退出DevEco Studio 2、打开配置文件 cmd控制台…
阅读更多...
Visopsys 0.92 发布

Visopsys 0.92 发布

Visopsys 是一个 PC 机的操作系统&#xff0c;系统小型、快速而且开源。有着丰富的图形界面、抢先式多任务机制以及支持虚拟内存。Visopsys 视图兼容很多操作系统&#xff0c;但并不是他们的克隆版本。Visopsys 0.92 现已发布&#xff0c;此维护版本引入了多任务处理程序、文件…
阅读更多...
卸载无用Mac电脑软件应用程序方法教程

卸载无用Mac电脑软件应用程序方法教程

如何在Mac电脑卸载应用程序&#xff1f;Mac OS系统的用户卸载软件时&#xff0c;大部分会选择直接将软件图标拖进废纸篓清倒。这种操作会留下大量程序残余文件占据磁盘空间&#xff0c;手动清理又怕误删文件&#xff0c;有时还会遇到无法移除的恶意/流氓软件。小编今天分享3种可…
阅读更多...
zookeeper选举机制

zookeeper选举机制

全新集群选举 zookeeper 全新集群选举机制网上资料很多说法很模糊&#xff0c;仔细思考了一下&#xff0c;应该是这样 得到票数最多的机器>机器总数半数 具体启动过程中的哪个节点成为 leader 与 zoo.cfg 中配置的节点数有关&#xff0c;下面以3个举例 选举过程如下 server…
阅读更多...
540. 有序数组中的单一元素

540. 有序数组中的单一元素

链接&#xff1a; 540. 有序数组中的单一元素 代码&#xff1a; 方法一&#xff1a;全数组的二分查找 思路和算法 假设只出现一次的元素位于下标 xxx&#xff0c;由于其余每个元素都出现两次&#xff0c;因此下标 xxx 的左边和右边都有偶数个元素&#xff0c;数组的长度是奇…
阅读更多...
【2023年11月第四版教材】第18章《项目绩效域》(第一部分)

【2023年11月第四版教材】第18章《项目绩效域》(第一部分)

第18章《项目绩效域》&#xff08;第一部分&#xff09; 1 章节内容2 干系人绩效域2.1 绩效要点2.2 执行效果检查2.3 与其他绩效域的相互作用 3 团队绩效域3.1 绩效要点3.2 与其他绩效域的相互作用3.3 执行效果检查3.4 开发方法和生命周期绩效域 4 绩效要点4.1 与其他绩效域的相…
阅读更多...
新版校园跑腿独立版小程序源码 多校版本，多模块，适合跑腿，外卖，表白，二手，快递等校园服务

新版校园跑腿独立版小程序源码 多校版本，多模块，适合跑腿，外卖，表白，二手，快递等校园服务

最新校园跑腿小程序源码 多校版本&#xff0c;多模块&#xff0c;适合跑腿&#xff0c;外卖&#xff0c;表白&#xff0c;二手&#xff0c;快递等校园服务 此版本为独立版本&#xff0c;不需要** 直接放入就可以 需要自己准备好后台的服务器&#xff0c;已认证的小程序&#xf…
阅读更多...
MyBatisPlus（九）模糊查询

MyBatisPlus（九）模糊查询

说明 模糊查询&#xff0c;对应SQL语句中的 like 语句&#xff0c;模糊匹配“要查询的内容”。 like /*** 查询用户列表&#xff0c; 查询条件&#xff1a;姓名包含 "J"*/Testvoid like() {String name "J";LambdaQueryWrapper<User> wrapper ne…
阅读更多...
讲讲项目里的仪表盘编辑器（二）

讲讲项目里的仪表盘编辑器（二）

应用场景 正常来说&#xff0c;编辑器应用场景应该包括&#xff1a; 编辑器-预览 编辑器 最终运行时 怎么去设计 上一篇推文&#xff0c;我们已经大概了解了编辑器场景。接下来&#xff0c;我们来看预览时的设计 编辑器-预览 点击预览按钮&#xff0c;执行以…
阅读更多...
Spring Cloud Loadbalancer 实现客户端负载均衡

Spring Cloud Loadbalancer 实现客户端负载均衡

针对 ribbon 负载均衡组件&#xff0c; 官方提出的替换解决方案是 Spring Cloud Loadbalancer。本次主要通过学习示例介绍了 Spring Cloud Loadbalancer 的基础使用。 1&#xff0c;引入pom <dependency><groupId>org.springframework.cloud</groupId><…
阅读更多...
React18入门（第一篇）——JSX、TSX语法详解

React18入门（第一篇）——JSX、TSX语法详解

文章目录 一、JSX 语法简介二、和 HTML 标签的几点不同三、JSX 属性四、JSX 事件4.1 简单点击事件4.2 类型限制4.3 带参数&#xff0c;箭头函数 五、插入 JS 变量六、JSX 中使用条件判断七、循环 一、JSX 语法简介 JSX - 是 JS 的扩展&#xff0c;写在 JS 代码里面&#xff0c…
阅读更多...
ROS（0）命令及学习资源汇总

ROS（0）命令及学习资源汇总

ROS安装命令 参考&#xff1a;Ubuntu20.04.4安装ROS Noetic详细教程 - 知乎 安装C和Python3 sudo apt-get install g sudo apt-get install python3 ROS运行小海龟仿真器 roscore确定ROS是否运行成功rosrun turtlesim turtlesim_node运行小海龟仿真器rosrun turtlesim turtle_…
阅读更多...
【微信小程序开发】一文学会使用CSS控制样式布局与美化

【微信小程序开发】一文学会使用CSS控制样式布局与美化

引言 在微信小程序开发中&#xff0c;CSS样式布局和美化是非常重要的一部分&#xff0c;它能够为小程序增添美感&#xff0c;提升用户体验。本文将介绍如何学习使用CSS进行样式布局和美化&#xff0c;同时给出代码示例&#xff0c;帮助开发者更好地掌握这一技巧。 一、CSS样式布…
阅读更多...
星宿UI2.4资源付费变现小程序源码 支持流量主

星宿UI2.4资源付费变现小程序源码 支持流量主

第一个小程序为星宿小程序 目前是最新版2.0 搭建星宿需要&#xff1a;备用域名 服务器 微信小程序账号 功能&#xff1a;文章展示 文章分类 资源链接下载 轮播图 直接下载附件功能 很多 很适合做资源类分享 源码下载&#xff1a;https://download.csdn.net/download/m0_6604…
阅读更多...
最新文章

Copyright @ 2022~2023