前后端分离------后端创建笔记(06)新增接口页面布局

本文章转载于【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、做一个新增接口,先来到控制器中,新增用post请求

 

1.1

2、你可以把拿到数据成功返回

2.1

3、返回空也行,因为我们要的是一个返回成功的数据

 

3.1

4、前端需要用户传入成功的参数传入过来

4.1

5、我们需要一个user来对接封装,但是这样我拿不到,因为前端跟后端不是直接的表单提交

 

5.1

6、前后交互是两个系统里面,现在他传过来是一个json数据,这里我要加入一个注解,@RequestBody来进行转换,这样就可以实现user转化为json对象:

 

6.1

7、新增暂时很简单,这里只要调用一个保存的方法就能够实现,后期我们需要一个优化。

 

7.1

8、数据库中的密码不允许以明文的形式保存到数据库里

 

8.1

9、用户虽然看不到,任何一家公司都有生产环境的运维人员,他们可以直接看到数据的,他们有权限。 

9.1

10、比如银行,银行的运维如果可以直接看到表中的数据,那么就可以盗钱了,因此数据库的密码要采取加密处理

 

10.1

11、新增接口处理好了,这时我们要重新启动一下

 

11.1

12、点击新增要触发一个窗口,有输入框,姓名和邮件

12.1

13、我们继续回到ELEMENT框架

 

13.1

14、找一个合适的对话框

 

14.1

15、把这一段给复制过来

15.1

16、这个复制到user.vue里

 

16.1

17、这里面的东西要改,不改的话会报错

 

17.1

18、标题加上新增 

18.1

19、这里新增和修改我想用一个对话框

19.1

20、这里用 :来进行代替,使用属性绑定来替代

21、这里我用title来进行代替,在数据中写

22、:Visible的意思是是否可见

23、控制对话框是否可见

24、这里有个表单的数据模型,给他改一下数据模型userForm,

24.1

25、在我们data里定义userform

26、第一个表单项输入用户名

27、label-width,这里的label-width的意思是什么

28、这里面的lable-width:指的是这里面的宽度

29、这里的宽度写死130px

30、具体的输入项,你要绑定的数据

31、这里的按钮主要是将他转换为false

32、这里点击按钮,不能将方框给弹出来,如何解决,将那个false转为true

33、我们在这个新增的按钮里面,给他绑定一个click方法 

34、这样方法一被调用,这样对话框就能够被调用了

 34.1

35、出来了

36、不过我们要给他改断一点

37、修改样式,用id或class都可以

38 这里我直接用的是他的属性

39 他的后代元素是

40 给他写一个宽度,85%就行

41、给他再写一个

42、绑定指令给他再修改一下

43、用户状态就是可用,或者不可用,这里不用输入或者输出框

44、找到Switch 开关组件

 

44.1

45、复制代码

46、这里的颜色给他删掉,因为即使删掉,也会有一个默认颜色

47、这里的v-model,给他绑定一下我们的status

48、这里激活的值,你得写上,第一个是激活的值 

49、这里要写: 

50、样式样子

51、这里遗漏了输入密码的输入框,给他改成不明文输入

52、最后写个email

53、新增对话框基本成形了

 

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

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

相关文章

Azure添加网络接口

添加网络接口的意义 在 Azure 上,为虚拟机添加网络接口的意义包括以下几个方面: 扩展网络带宽:通过添加多个网络接口,可以增加虚拟机的网络带宽,提高网络传输速度和数据吞吐量。实现网络隔离:每个网络接口…

zabbix-6.4 监控 MySQL

目录 1、rpm安装zabbix_agentd服务 2、编写zabbix_agentd.conf文件 3、编写模板文件 4、创建mysql用户并赋权限 5、创建.my.cnf文件 6、将规则添加到SELinux策略中 注意: 若模板无法读取.my.cnf 信息,从而导致监控报错,可以尝试修改模…

别人直播的时候怎么录屏?分享一些录屏方法

​随着互联网的快速发展,直播已经成为人们日常生活中不可或缺的一部分。但是,有时候我们可能会错过某些重要的直播内容,这时候就需要录屏来保存和观看。那么,如何录屏别人的直播呢?本文将分享一些录屏方法和技巧&#…

【Python机器学习】实验11 神经网络-感知器

文章目录 人工神经网络感知机二分类模型算法 1. 基于手写代码的感知器模型1.1 数据读取1.2 构建感知器模型1.3 实例化模型并训练模型1.4 可视化 2. 基于sklearn的感知器实现2.1 数据获取与前面相同2.2 导入类库2.3 实例化感知器2.4 采用数据拟合感知器2.5 可视化 实验1 将上面数…

SpringBoot复习:(50)TransactionManager是哪里来的?是什么类型的?

运行结果: 可见它的类型是DataSourceTransactionManager.它是通过自动配置创建的。

pdf怎么压缩?一分钟学会文件压缩方法

PDF文件过大一般主要原因就是内嵌大文件、重复的资源或者图片比较多,随之而来的问题就是占用存储空间、被平台限制发送等等,这时候我们可以通过压缩的方法缩小PDF文件大小,下面就一起来看看具体的操作方法吧。 方法一:嗨格式压缩大…

【系统架构设计专业技能 · 软件工程之系统分析与设计(二)【系统架构设计师】

系列文章目录 系统架构设计专业技能 软件工程(一)【系统架构设计师】 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA(一)【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估(…

推断统计(独立样本t检验)

这里我们是采用假设检验中的独立样本t 检验来比较两个独立正态总体均值之间是否存在显著性差异,以比较城市与农村孩子的心理素质是否有显著差异为例 。 这里我们首先是假设城市孩子与农村孩子心理素质无显著差异,但是此时方差是否齐性是未知的&#xff0…

【MySQL】MySQL不走索引的情况分析

未建立索引 当数据表没有设计相关索引时,查询会扫描全表。 create table test_temp (test_id int auto_incrementprimary key,field_1 varchar(20) null,field_2 varchar(20) null,field_3 bigint null,create_date date null );expl…

ffmpeg命令行是如何打开vf_scale滤镜的

前言 在ffmpeg命令行中,ffmpeg -i test -pix_fmt rgb24 test.rgb,会自动打开ff_vf_scale滤镜,本章主要追踪这个流程。 通过gdb可以发现其基本调用栈如下: 可以看到,query_formats()中创建的v…

maven install

maven install maven 的 install 命令,当我们的一个 maven 模块想要依赖其他目录下的模块时,直接添加会找不到对应的模块,只需要找到需要引入的模块,执行 install 命令,就会将该模块放入本地仓库,就可以进…

Vue3 setup tsx 子组件向父组件传值 emit

需求:Vue3 setup 父组件向子组件传值,子组件接收父组件传入的值;子组件向父组件传值,父组件接收的子组件传递的值。 父组件:parent.tsx: import { defineComponent, ref, reactive } from vue; import To…

Server - 文字转语音 (Text to Speech) 的在线服务 TTSMaker

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/132287193 TTSMaker 是一款免费的文本转语音工具,提供语音合成服务,支持多种语言,包括英语、法语、德语、西班…

Exams/ece241 2013 q4

蓄水池问题 S3 S2 S1 例如:000 代表 无水 ,需要使FR3, FR2, FR1 都打开(111) S3 S2 S1 FR3 FR2 FR1 000 111 001 011 011 001 111 000 fr代表水变深为…

快手商品详情数据API 抓取快手商品价格、销量、库存、sku信息

快手商品详情数据API是用来获取快手商品详情页数据的接口,请求参数为商品ID,这是每个商品唯一性的标识。返回参数有商品标题、商品标题、商品简介、价格、掌柜昵称、库存、宝贝链接、宝贝图片、商品SKU等。 接口名称:item_get 公共参数 名…

【PostgreSQL的CLOG解析】

同样还是这张图,之前发过shared_buffer和os cache、wal buffer和work mem的文章,今天的主题是图中的clog,即 commit log,PostgreSQL10之前放在数据库目录的pg_clog下面。PostgreSQL10之后修更名为xact,数据目录变更为pg_xact下面&…

WPF 本地化的最佳做法

WPF 本地化的最佳做法 资源文件英文资源文件 en-US.xaml中文资源文件 zh-CN.xaml 资源使用App.xaml主界面布局cs代码 App.config辅助类语言切换操作类资源 binding 解析类 实现效果 应用程序本地化有很多种方式,选择合适的才是最好的。这里只讨论一种方式&#xff0…

pytorch单机多卡后台运行

nohup sh ./train_chat.sh > train_chat20230814.log 2>1&参考资料 Pytorch单机多卡后台运行的解决办法

kafka-2.12使用记录

kafka-2.12使用记录 安装kafka 2.12版本 下载安装包 根据你的系统下载rpm /deb /zip包等等, 这里我使用的是rpm包 安装命令 rpm -ivh kafka-2.12-1.nfs.x86_64.rpm启动内置Zookeeper 以下命令要写在同一行上 /opt/kafka-2.12/bin/zookeeper-server-start.sh /opt/kafka-2…

实验二十八、三角波发生电路参数的确认

一、题目 利用 Multisim 确定图1所示电路中各元件的参数,使输出电压的频率为 500 Hz 500\,\textrm{Hz} 500Hz、幅值为 6 V 6\,\textrm{V} 6V 的三角波。 图 1 三角波发生电路 图1\,\,三角波发生电路 图1三角波发生电路 2、仿真电路 A 1 \textrm A_1 A1​ 采用…