前后端分离------后端创建笔记(10)用户修改

本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客

仅用于学习和讨论,如有侵权请联系

源码:https://gitee.com/green_vegetables/x-admin-project.git
素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c
项目概述笔记:https://blog.csdn.net/m0_37613503/article/details/128961102
数据库笔记:https://blog.csdn.net/m0_37613503/article/details/128961401
前端笔记:https://blog.csdn.net/m0_37613503/article/details/128961447
后端笔记:https://blog.csdn.net/m0_37613503/article/details/128961569

1、新增一个修改操作功能 

2、我们找到后端的控制器里面

3、修改的请求是put请求,给他改一下方法名:updateUser

4、注意修改的情况我是不需要修改密码的,你可以在个人信息界面这里给他弄一个密码修改的内容

5、这里给他写一个null

5.1 这个方法给他改过来,把user给他传过来

6、修改接口就写好了

7、来到前端我们要怎么办呢!一个是修改,一个是删除,加两个按钮

8、点击修改按钮后可以弹出一个对话框

9、实际上我们就是重用这个新增的对话框

10、这里要改成修改按钮 

10.1

11、修改的核心在于能够根据id,将这里面数据给查到 

12、我们通过get请求,带个(“/{id}”)过来,通过id可以查到单个的用户数据

13 里面放user就好了

13.1 我们需要拿到那个id,通过PathVariable注解去拿到id 

14、我们那个id   Integer id

15、userService里面有个getById方法

16、把User返回给他,我们后端接口就返回给他了,这样后端接口就写好了

17、现在我们返回前端,写两个按钮

18、回到框架官网,直接拿来用就行

19、找到修改按钮,给他复制一下

20、找到我们user.vue里,来到我们的操作类里 

21、注意你在使用框架的时候,你不能直接写到哪里,复制框架代码之前先写一个template

22 再写一个作用域插槽

22.1 再添加一个删除的作用域插槽

23、我们目前的效果

24、如果你觉得这里的icon图标太大,那么你可以让他变的大一点,添加size,可以使icon图标变小

25、点编辑按钮,能够出来对话框 

26、我们后端的接口已经定义好了,所以我们现在要来到

userManger.js中把后端给定义好 

26.1

27 写一个新的方法,传一个id,拼接一个id

28、路径的一种更好的写法,用左上角的波浪符号,这里可以用美元符号,引用id

29、遇到复杂拼接,就不会显得那么凌乱

29.1 这里不需要携带什么数据,因此将数据给删掉

30 再添加一个修改,这里方式改成put

31、弄好之后,回到我们Vue文件

32、我们之前绑定了一个方法,但是如果绑定了这个方法,那么点击修改的按钮和+的按钮没有什么区别,我们想要他有区别,因此我想传入一个id

33、我们怎么取这个id,就取当前行这个id

34、上面新增我们也给他传入一个值,这样比较容易做判断

35、现在回到我们之前写的方法,我们可以做改动

36、我们要做个判断,新增

37 根据id查询用户

37.1 刚才前面已经写好了,工作,这里用getUserById方法查询id

38、这里把数据扔给他就行

38.1 他要返回我们的数据

39 现在数据修改看一下效果,修改已经能够全部展示了

40、因为我不想修改密码,这里我将密码注释掉 

41、userForm.id 这里我们要做一个判断,满足这些条件就意味着我们在做新增

42、回到我们接口,这里接口意味着我们的字段是不会更新

43、默认你传入的字段为空,是不会更新的

44、修改没密码了

45、但现在仍然暴露了一个问题,新增按钮,如果提交,数据库里还会多一条数据,因为目前方法是共享,会调用这个方法,此时这里应该加一个判断

46、我这里想在userManger.js中新增一个方法,后期在Vue中调方法就行

47、在这里写一个方法就行

48、如果判断为null我就做新增的处理

49、代码写到这个地方,代码显得更加精简

50、其他方法不用动,这里改成save就好了

51、看一下修改结果,修改模块成功

, 

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

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

相关文章

React源码解析18(7)------ 实现事件机制(onClick事件)

摘要 在上一篇中,我们实现了useState的hook,但由于没有实现事件机制,所以我们只能将setState挂载在window上。 而这一篇主要就是来实现事件系统,从而实现通过点击事件进行setState。 而在React中,虽然我们是将事件绑…

3.利用matlab计算不定积分和定积分(matlab程序 )

1.简述 不定积分 首先,通过符号变量创建一个符号函数,然后调用积分命令来计算函数的积分,示例如下: 注意:matlab中计算的不定积分结果中没有写上常数C,读者需要自己在使用的时候记得加上常数部分。 通常情…

【设计模式】装饰器模式

装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。 装饰器模式通过将对象包装在装饰器类中,以便动态地修改其行为…

七. 定时器

定时器 1. EPIT定时器(1) 特征&#xff1a;(2) 结构&#xff1a;(3) 工作模式&#xff1a;(4) 寄存器(5) 配置步骤(6) 定时器消抖 2. GPT 定时器(1) 特征(2) 结构(3) 工作模式(4) 寄存器<1> GPTx_CR 配置<2> GPTx_PR 分频<3> GPTx_SR 状态<4> GPTx_CNT…

一个简单的协议定制

目录 补充概念&#xff1a;三次握手&#xff0c;四次挥手 再谈协议 网络版计算器 准备工作 makefile log.hpp calServer.hpp calServer.cc calClient.hpp calClient.cc 服务端 新建文件与接口 Protocol.hpp 1.0服务端的一个流程 1.1创建一个回调方法 1.2保证你…

一站式自动化测试平台-Autotestplat

3.1 自动化平台开发方案 3.1.1 功能需求 3.1.3 开发时间计划 如果是刚入门、但有一点代码基础的测试人员&#xff0c;大概 3 个月能做出演示版(Demo)进行自动化测试&#xff0c;6 个月内胜任开展工作中项目的自动化测试。 如果是有自动化测试基础的测试人员&#xff0c;大概 …

NGINX负载均衡及LVS-DR负载均衡集群

目录 LVS-DR原理搭建过程nginx 负载均衡 LVS-DR原理 原理&#xff1a; 1. 当用户向负载均衡调度器&#xff08;Director Server&#xff09;发起请求&#xff0c;调度器将请求发往至内核空间 2. PREROUTING链首先会接收到用户请求&#xff0c;判断目标IP确定是本机IP&#xff…

grafana 的 ws websocket 连接不上的解决方式

使用了多层的代理方式&#xff0c;一层没有此问题 错误 WebSocket connection to ‘wss://ip地址/grafana01/api/live/ws’ failed: 日志报错 msg“Request Completed” methodGET path/api/live/ws status403 解决方式 # allowed_origins is a comma-separated list of o…

基于Java+SpringMVC+Mybaties+layui+Vue+elememt基于协同过滤的电影推荐系统的设计与实现

一.项目介绍 基于协调过滤的电影推荐系统的设计与实现 本系统分为普通用户以及管理员两类 普通用户&#xff1a; 登录系统查看最新推荐电影、收藏、评论、查看电影信息、 对电影进行评分、浏览电影资讯信息、查看个人信息以及浏览收藏…

二.net core 自动化发布到docker (Jenkins安装之后向导)

目录 ​​​​​​​​​​​​​​ 参考资料&#xff1a;https://www.jenkins.io/doc/book/installing/docker/#setup-wizard Post-installation setup wizard.(安装后安装向导) 基于上一篇文章安装&#xff0c;在安装并运行Jenkins&#xff08;不包括使用Jenkins Opera…

同步、异步、协程

目录 同步异步https 异步请求&#xff1a; 协程1.为什么会要协程?2.异步的运行流程是什么3.协程的原语操作4.协程的定义?5.调度器的定义?6.调度的策略?7. api封装, hook8.多核的模式?9.协程的性能?10.要有哪些案例?nty_servernty_ mysql_client.cnty_ mysql oper.cnty_ …

网络编程555

上传代码 #include <stdio.h>//客户端 #include <string.h> #include <stdlib.h> #include<sys/types.h> #include<sys/socket.h> #include<arpa/inet.h> #include<head.h> #define PORT 69 #define IP "192.168.124.57"…