前后端分离------后端创建笔记(上)

本文章转载于【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、第一步创建一个新项目:用Maven或者Spring Initializr都行

前后端分离------后端创建笔记(上)_第1张图片1.1 随便填一下前后端分离------后端创建笔记(上)_第2张图片

 Project SDK就是JDK的版本 

1.2 java版本选8

前后端分离------后端创建笔记(上)_第3张图片

 1.3 设置springBoot版本

前后端分离------后端创建笔记(上)_第4张图片

 1.4 打开Maven项目 ,添加一个spring的启动器和测试的启动器

前后端分离------后端创建笔记(上)_第5张图片

 1.5 将笔记的配置依赖粘贴上去,等一会找到笔记

前后端分离------后端创建笔记(上)_第6张图片

 1.6 找到笔记,配置依赖

前后端分离------后端创建笔记(上)_第7张图片

 1.7 看一下配置,第一个是web场景的解放器,因为我们做的是web项目吗?:

前后端分离------后端创建笔记(上)_第8张图片

1.7.1第二个是Mysql的坐标,因为我们用的是Mysql

前后端分离------后端创建笔记(上)_第9张图片

 1.7.2 往下我们用的是Mybatis-plus

前后端分离------后端创建笔记(上)_第10张图片

 1.7.3 因为生成器要用,我们导入freemWork,因为生成器要用,所以我们导入这个: 导入lombok,是为了简化我们的代码,比如我们创建一个实体类:

前后端分离------后端创建笔记(上)_第11张图片

1.7.4 加一下redis的配置和依赖

前后端分离------后端创建笔记(上)_第12张图片

前后端分离------后端创建笔记(上)_第13张图片

 1.7.5 这里要修改一下配置文件

前后端分离------后端创建笔记(上)_第14张图片

 1.7.6 我们先配置一下后端端口,前端端口和后端端口不在一起,后端端口我们放在9999上面

前后端分离------后端创建笔记(上)_第15张图片

 1.7.7 使用他的数据源

前后端分离------后端创建笔记(上)_第16张图片使用用户名和密码:

前后端分离------后端创建笔记(上)_第17张图片

1.7.8 配置数据库的url

前后端分离------后端创建笔记(上)_第18张图片

 1.7.9 这里我们不用写连接池,因为springBoot有属于自己的连接池

前后端分离------后端创建笔记(上)_第19张图片

如果你项目之中有特殊要求,要求替换,那么你就替换,那时你就要指定type属性,限定一下类

前后端分离------后端创建笔记(上)_第20张图片

1.7.10 我刚才配置一下redis的依赖,因此我要配置一下端口 

前后端分离------后端创建笔记(上)_第21张图片

 1.7.11 我的文件都在com.lantu这个文件下:下面这句话的意思是我们项目中debug信息都会打印出来。

前后端分离------后端创建笔记(上)_第22张图片

 1.7.12 完成项目之后,我们跑一下项目,测试一下能不能用,这样就部署成功了

前后端分离------后端创建笔记(上)_第23张图片

2、我们接下来做代码生成,Mybatis-plus的官网

前后端分离------后端创建笔记(上)_第24张图片

2.1 到Mybatis-plus的官网(看样子,得看Mybatis-plus的视频)

前后端分离------后端创建笔记(上)_第25张图片

 2.2 我们直接用,这里复制快速生成的代码,复制完代码之后,我们要创建一个类

前后端分离------后端创建笔记(上)_第26张图片

2.3 我们要创建这个类,不能放到目录中,因为放到目录中,就会被打包到目录里:

前后端分离------后端创建笔记(上)_第27张图片

2.4 放到test当中,而不是放到这个类当中,这里我创建的是一个CodeGenerator

前后端分离------后端创建笔记(上)_第28张图片

 2.4.1 就写一个main方法,然后把这段代码copy过去,然后把Mybatis-plus的代码给复制过去

前后端分离------后端创建笔记(上)_第29张图片

 2.4.2 alt + insert 导入一下包

前后端分离------后端创建笔记(上)_第30张图片

 2.4.3 数据库的内容

前后端分离------后端创建笔记(上)_第31张图片

 2.4.4 如果你想要提出一个参数,你可以提前设置一个参数,方便后期进行修改

前后端分离------后端创建笔记(上)_第32张图片

 前后端分离------后端创建笔记(上)_第33张图片

 前后端分离------后端创建笔记(上)_第34张图片

 2.4.5 如果你最后重新运行,就会把生成代码给覆盖掉,这里的覆盖生成文件一定要注释掉。

前后端分离------后端创建笔记(上)_第35张图片

 2.4.6 输出地址是输出的路径放到D盘

前后端分离------后端创建笔记(上)_第36张图片

2.4.7复制绝对路径

前后端分离------后端创建笔记(上)_第37张图片

 2.4.8 将我们java代码输出路径写在我们刚才复制的路径里:

前后端分离------后端创建笔记(上)_第38张图片

2.4.9 父包名写在我们自己的目录中

前后端分离------后端创建笔记(上)_第39张图片

 2.4.10 模块名你是需要修改的,因为你把他抽出来,再修改会十分方便

前后端分离------后端创建笔记(上)_第40张图片

 这里替换成你给他写的目录

前后端分离------后端创建笔记(上)_第41张图片

2.4.11 写在MapperXml生成路径,这里我们要写成变量的形式,这里等于Mapper的路径等于什么:

前后端分离------后端创建笔记(上)_第42张图片

 2.4.12 这里路径要放到resource下面 

前后端分离------后端创建笔记(上)_第43张图片

2.4.13 我们复制resouce下的路径

前后端分离------后端创建笔记(上)_第44张图片

 复制都是绝对路径

前后端分离------后端创建笔记(上)_第45张图片

前后端分离------后端创建笔记(上)_第46张图片

但是这样写不好,具体老师讲的是他有一个默认的配置:

前后端分离------后端创建笔记(上)_第47张图片

 前后端分离------后端创建笔记(上)_第48张图片

如果我直接放到resouces下是跟目录配不上的

 前后端分离------后端创建笔记(上)_第49张图片

 2.4.14 把MapperLocation给替换掉

前后端分离------后端创建笔记(上)_第50张图片

 2.4.15 修改表名

前后端分离------后端创建笔记(上)_第51张图片

2.4.16 我们可以看一下源码(看源码的方法,然后按住Ctrl键,鼠标点击Random类),他做了很多重载

前后端分离------后端创建笔记(上)_第52张图片

2.4.17 可以设置排除表

前后端分离------后端创建笔记(上)_第53张图片

2.4.18 我们可以用这三个里面任何一个

前后端分离------后端创建笔记(上)_第54张图片

2.4.19 第三个表会产生一个对话分割,我路由有一张表,我可以写A表,B表,C表

前后端分离------后端创建笔记(上)_第55张图片

 2.4.20  我这里有四张表

前后端分离------后端创建笔记(上)_第56张图片

2.4.21 用户结论对照表,我将这四张表都写进去,这里看样子要学一下Mybatis

前后端分离------后端创建笔记(上)_第57张图片

2.4.22 把tables放到下面位置前后端分离------后端创建笔记(上)_第58张图片

2.4.23 X_

前后端分离------后端创建笔记(上)_第59张图片

 2.4.24 没有找到合适的驱动----这里给他注册一个更高的驱动

前后端分离------后端创建笔记(上)_第60张图片

 前后端分离------后端创建笔记(上)_第61张图片

 2.4.25 后来发现报错的原因是,url和password没有写

前后端分离------后端创建笔记(上)_第62张图片2.4.26 改成这样就行

前后端分离------后端创建笔记(上)_第63张图片

 2.4.27 接下来运行一下

前后端分离------后端创建笔记(上)_第64张图片

2.4.28 在com.lantu下面成功生成了一个模块

前后端分离------后端创建笔记(上)_第65张图片

前后端分离------后端创建笔记(上)_第66张图片

2.4.29 控制器里面写的特别少,因为他不知道你写的是哪个方法:

前后端分离------后端创建笔记(上)_第67张图片2.4.30 实体类,没有x下滑前缀,因为我们把他给过滤掉了

前后端分离------后端创建笔记(上)_第68张图片

2.4.31 类名是主键,都做了标识

前后端分离------后端创建笔记(上)_第69张图片

 2.4.32 Mapper也写好了,这样就有表的增删改查能力

前后端分离------后端创建笔记(上)_第70张图片

2.4.33 我们在serve里面就可以调方法,实现增删改查 

前后端分离------后端创建笔记(上)_第71张图片2.4.34 在控制器调增删改查控制器就全有了,等一会把Mybatis-plus过一遍:

前后端分离------后端创建笔记(上)_第72张图片2.4.35 他没有做扫描,现在我们做一下扫描,现在做*的意义在于,可能不仅只有这一个包

前后端分离------后端创建笔记(上)_第73张图片2.4.36 我们去查询所有的参数,以及得到一个集合

前后端分离------后端创建笔记(上)_第74张图片

 2.4.37 我们测试一下,遍历一下,把user给打印出来

前后端分离------后端创建笔记(上)_第75张图片2.4.38 查询语句,Mybatis帮助我们将查询语句给做好了

前后端分离------后端创建笔记(上)_第76张图片

 2.4.39 我们现在做的是测试类,但我们后期将通过控制器暴露我们的接口

前后端分离------后端创建笔记(上)_第77张图片

 2.4.40 在我们userController中进行测试

前后端分离------后端创建笔记(上)_第78张图片

 2.4.41在我们userController中装配Userservice对象

前后端分离------后端创建笔记(上)_第79张图片

2.4.42 首先我们先写一个请求查询的数据getMapping,然后将上面的路径给改一下,上面这个路径现在全部是用户的,不想用sys前缀,: 

前后端分离------后端创建笔记(上)_第80张图片

2.4.43 我用user进行开头

前后端分离------后端创建笔记(上)_第81张图片

2.4.44  想查所有的数据,因此我用的是/all,这里返回的数据是List集合,我们查一下所有的用户

前后端分离------后端创建笔记(上)_第82张图片2.4.45 这里增删改查方法全都有的,我们想查集合,调List就可以

前后端分离------后端创建笔记(上)_第83张图片

 前后端分离------后端创建笔记(上)_第84张图片

2.4.46 之后我们就可以访问到我们的后端, (“/all”),我们来测试一下,打开我们的启动类,重新运行 

前后端分离------后端创建笔记(上)_第85张图片

2.4.47 通过观察我们可以看到启动成功

前后端分离------后端创建笔记(上)_第86张图片

 3、第一次看到配置接口访问浏览器,看样子想利用接口,要掌握springBoot方面知识

前后端分离------后端创建笔记(上)_第87张图片

 3.1     404 表示我们前面是对的,后面是错的

前后端分离------后端创建笔记(上)_第88张图片

 3.2  回到配置接口的地方,老师讲这个查询已经做了,但是为什么还报错

前后端分离------后端创建笔记(上)_第89张图片

 3.3 原因是我们控制器加的注解是不正确的,这里控制器写的内容就是接口的地址,以后找接口地址找控制器就行,加了@Controller,就意味着我们这里最终返回的就是一个视图:

前后端分离------后端创建笔记(上)_第90张图片

前后端分离------后端创建笔记(上)_第91张图片

3.4 但是我们返回的List肯定不是视图,所以他找不到视图404了,我们前后端对接,对接的标准是什么,我们交互的数据时json数据,所以我们就不需要这个注解了

前后端分离------后端创建笔记(上)_第92张图片

3.5 改成RestController,标这个注解就意味着默认所有注解以返回json,处理为结局

前后端分离------后端创建笔记(上)_第93张图片前后端分离------后端创建笔记(上)_第94张图片 3.6 重启再试一下

前后端分离------后端创建笔记(上)_第95张图片

 4、六条数据都出来的样子,第一次见到接口出来数据,好开心好开心(*^▽^*)

的样子 

前后端分离------后端创建笔记(上)_第96张图片

 4.1 之后我们会做新增,删除,修改之类的方法,而每一次返回方法,每个参数都会不一样,这里就出现了一个问题,如果我们跟前端对接的话,返回的数据都不一样的话,那么还是很有问题的。

前后端分离------后端创建笔记(上)_第97张图片

 4.2 如何形成统一返回数据格式,只要格式能保持统一就行,否则就对接不上,那么我们该如何让格式保持一致

前后端分离------后端创建笔记(上)_第98张图片

 4.3 code代表接口返回的返回码,data表示返回数据,每一个接口返回的数据是不一样的

前后端分离------后端创建笔记(上)_第99张图片

4.4 统一数据接口数据后端接口与前端接口的数据标准,我们需要创建一个类来统一这件事情

前后端分离------后端创建笔记(上)_第100张图片

 4.5 在com.lantu下创建一个类,这个类的目的,返回一个规定的数据格式:

前后端分离------后端创建笔记(上)_第101张图片

4.6 创建一个common.vo.result结果类

前后端分离------后端创建笔记(上)_第102张图片

 4.7 我要写一个状态码:

前后端分离------后端创建笔记(上)_第103张图片

 4.8 往前后端进行说明,针对客户端来进行中文的一个说明,我们就叫message,第三个参数,我们是不确定的,因此你可以选择使用object,但是你使用泛型更好,这里写成T就行,注意类上也要一个泛型

前后端分离------后端创建笔记(上)_第104张图片

 4.9 这里要加上Data注解,生成get和set方法:

前后端分离------后端创建笔记(上)_第105张图片

 4.10 补全无参和实参构造方法:

前后端分离------后端创建笔记(上)_第106张图片

 4.11 如果我们现在要用的话:我们需要返回userController

前后端分离------后端创建笔记(上)_第107张图片

 4.12 将这种格式给套上,因为我们上面用的泛型,所以得改成泛型

前后端分离------后端创建笔记(上)_第108张图片4.13 如果我要返回他我要怎么做,我得new 一个

前后端分离------后端创建笔记(上)_第109张图片

 4.14 接下来封装一下返回的数据对象

前后端分离------后端创建笔记(上)_第110张图片

4.15 首先我们回到result类当中,设置静态方法:

4.15.1 这里我们是静态的,因此用static

前后端分离------后端创建笔记(上)_第111张图片

 4.15.2 返回什么类型:Result

前后端分离------后端创建笔记(上)_第112张图片

 4.15.3 成功的方法下,我叫success,成功的情况下,我就new 一个return,new 一个result 

前后端分离------后端创建笔记(上)_第113张图片

 4.15.4 这个代码你可以再进行封装,弄一个常量类,用一个枚举类再去封装,假如我没有数据返回前端,我只要返回这个东西就行了:

前后端分离------后端创建笔记(上)_第114张图片

 4.15.6 static后面也要返回一个泛型,否则系统识别不了

前后端分离------后端创建笔记(上)_第115张图片

4.15.7 这个方法显然不能满足,因为显然我还要传入我指定的message和数据,

前后端分离------后端创建笔记(上)_第116张图片

 4.15.8 利用这个方法做一下重载:

前后端分离------后端创建笔记(上)_第117张图片

 4.15.8.1 现在我想返回一下数据,返回一个data,这样写就行

前后端分离------后端创建笔记(上)_第118张图片

4.15.8.2  现在我不仅想返回一下数据,还想带个message过去(),这里等一会一定要把笔记看一下,把软件继续设计下去,这是最优解:

前后端分离------后端创建笔记(上)_第119张图片

4.15.8.3 比如默认情况下,我返回一个失败

前后端分离------后端创建笔记(上)_第120张图片

 4.15.8.4 由于每种情况都不一样,因此我们要做相应的重载

5 你看情况, 你做个那个你就采用那个方法

前后端分离------后端创建笔记(上)_第121张图片

5.1 重新运行一下,查看一下,发现他是一个数组

前后端分离------后端创建笔记(上)_第122张图片

 5.2 通过result类我们做了一个操作

前后端分离------后端创建笔记(上)_第123张图片

 

6 接下来,我们来实现一下后端接口,首先我们看一下前端请求接口和响应的参数,F12之后,先点击netWork

6.1 看什么登录请求和地址

前后端分离------后端创建笔记(上)_第124张图片

 请求地址和方式

前后端分离------后端创建笔记(上)_第125张图片

7 PayLoad是携带的数据

前后端分离------后端创建笔记(上)_第126张图片 

 

你可能感兴趣的:(javaweb,java,spring,boot,mybatis)