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

这篇具有很好参考价值的文章主要介绍了前后端分离------后端创建笔记(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请求

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

 文章来源地址https://www.toymoban.com/news/detail-647954.html

1.1

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

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

2.1

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

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

 

3.1

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

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

4.1

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

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

 

5.1

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

 

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

6.1

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

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

 

7.1

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

 

8.1

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

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

9.1

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

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

 

10.1

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

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

 

11.1

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

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

12.1

13、我们继续回到ELEMENT框架

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

 

13.1

14、找一个合适的对话框

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

 

14.1

15、把这一段给复制过来

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

15.1

16、这个复制到user.vue里

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

 

16.1

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

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

 

17.1

18、标题加上新增 

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

18.1

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

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

19.1

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

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

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

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

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

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

23、控制对话框是否可见

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

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

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

24.1

25、在我们data里定义userform

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

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

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

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

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

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

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

29、这里的宽度写死130px

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

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

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

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

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

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

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

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

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

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

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

35、出来了

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

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

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

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

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

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

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

39 他的后代元素是

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

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

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

41、给他再写一个

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

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

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

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

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

44、找到Switch 开关组件

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

 

44.1

45、复制代码

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

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

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

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

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

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

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

49、这里要写: 

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

50、样式样子

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

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

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

52、最后写个email

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

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

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

 

到了这里,关于前后端分离------后端创建笔记(06)新增接口&页面布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前后端分离------后端创建笔记(09)密码加密网络安全

    本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论,如有侵权请联系 源码:https://gitee.com/green_vegetables/x-admin-project.git 素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c 项目概述笔记:https://blog.c

    2024年02月12日
    浏览(45)
  • 基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos

    通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后,实现了前后端分离,并实现了登录认证,认证成功后返回该用户相应权限范围内可见的菜单。 后端采用SpringCloud构建微服,采用SpringCloud Gateway做为服务网关,采用Nacos做为统一配置中心,并在服务网关部分解决了前端跨域调

    2024年02月12日
    浏览(52)
  • 基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos + Sentinel

    通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后,实现了前后端分离,并实现了登录认证,认证成功后返回该用户相应权限范围内可见的菜单。 后端采用SpringCloud构建微服,采用SpringCloud Gateway做为服务网关,采用Nacos做为统一配置中心,并在服务网关部分解决了前端跨域调

    2024年02月11日
    浏览(38)
  • 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端

    配套视频地址:https://www.bilibili.com/video/BV1dG4y1T7yp/ 如果您需要原版笔记,请up喝口水,可以上我的淘宝小店 青菜开发资料 购买,或点击下方链接直接购买: 源码+PDF版本笔记 源码+原始MD版本笔记 感谢支持! 创建springboot项目:2.7.8 pom依赖 yml 测试 编写代码生成器 启动类加注

    2024年02月04日
    浏览(45)
  • Spring Boot 笔记 017 创建接口_新增文章

    1.1实体类增加校验注释 1.1.1 自定义校验 1.1.1.1 自定义注解 1.1.1.2 自定义校验类 1.1.1.3 在需要的地方使用注解 1.1 Controller 1.2 Service 1.3 ServiceImpl 1.4 Mapper 1.5 Postman测试

    2024年02月20日
    浏览(32)
  • 前后端分离 后端获取不到header解决方案

    我这里只是把重要的逻辑放在里面,如果要看所有文件的话就太多了 这个案例不要拿来用,这个是有问题的,我只是讲一下问题在哪

    2024年02月12日
    浏览(55)
  • 后端SpringBoot+前端Vue前后端分离的项目(一)

    前言:后端使用SpringBoot框架,前端使用Vue框架,做一个前后端分离的小项目,需求:实现一个表格,具备新增、删除、修改的功能。 目录 一、数据库表的设计 二、后端实现 环境配置 数据处理-增删改查 model层 mapper层 XML配置 Service层 controller层 单元测试 三、前后端交互 配置

    2024年02月10日
    浏览(51)
  • 后端SpringBoot+前端Vue前后端分离的项目(二)

    前言:完成一个列表,实现表头的切换,字段的筛选,排序,分页功能。 目录 一、数据库表的设计 二、后端实现 环境配置 model层  mapper层 service层  service层单元测试 controller层 三、前端实现 interface接口 接口api层 主要代码 效果展示 引入mybatis-plus依赖 MerchandiseDetailsService文

    2024年02月09日
    浏览(39)
  • 解决前后端分离项目后端设置响应头前端无法获取

    在开发前后端分离项目中出现后端设置响应头,前端一直无法获取等问题。 后端设置响应头代码如下 在浏览器中我们是可以看到设置的响应头 Content-Disposition 属性,但是在前端接收到的响应信息中却看不到我们设置的 Content-Disposition 属性。 原来在前后端分离的项目中除了需

    2024年02月04日
    浏览(47)
  • 若依框架(前后端分离) 之IDEA中Maven后端打包

    Maven是一个跨平台的项目管理工具。作为Apache组织的一个颇为成功的开源项目,其主要服务于基于Java平台的项目创建,依赖管理和项目信息管理,是一个自动化构建工具。maven是Apache的顶级项目,解释为“专家,内行”,它是一个项目管理的工具,maven自身是纯java开发的(

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包