前后端项目分离开发

问题说明：

开发人员同时负责前端和后端代码开发，分工不明确
开发效率低
前后端代码混合在一个工程中，不便于管理
对开发人员要求高，人员招聘困难

解决方法：

前后端分离开发

介绍

前后端分离开发，就是在项目开发过程中，对于前端代码的开发由专门的前端开发人员负责，后端代码则由后端开发人员负责，这样可以做到分工明确、各司其职，提高开发效率，前后端代码并行开发，可以加快项目开发进度。目前，前后端分离开发方式已经被越来越多的公司所采用，成为当前项目开发的主流开发方式。

前后端分离开发后，从工程结构上也会发生变化，即前后端代码不再混合在同一个maven工程中，而是分为前端工程和后端工程。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjorPE12-1690517333551)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230610165746303.png)]$

开发流程

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WTggTjQj-1690517297033)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230610165938839.png)]$

接口(API接口)就是一个http的请求地址，主要就是去定义：请求路径、请求方式、请求参数、响应数据等内容。

举例：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0EesL8M-1690517297034)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230610170543719.png)]$

YApi

介绍：

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。

YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。

源码地址：

https://github.com/YMFE/yapi   //使用YApi，需要自己进行部署

使用：

Swagger

介绍

使用Swagger你只需要按照它的规范去定义接口及接口相关的信息，再通过Swagger衍生出来的一系列项目和工具，就可以做到生成各种格式的接口文档，以及在线接口调试页面等等。

官网：http://swagger.io/

knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。

使用方式：

导入knife4j的maven坐标

<dependency><groupId>com.github.xiaomin</groupId><artifactId>knife4j-spring-boot-starter></artifactId><version>3.0.2</version>
</dependency>

导入knife4j相关配置类

    @Beanpublic Docket createRestApi() {//文档类型return new Docket(DocumentationType.SWAGGER_2).apiInfo(apiInfo()).select().apis(RequestHandlerSelectors.basePackage("com.itheima.reggie.controller")).paths(PathSelectors.any()).build();}private ApiInfo apiInfo() {return new ApiInfoBuilder().title("瑞吉外卖").version("1.0").description("瑞吉外卖接口文档").build();}

设置静态资源，否则接口文档页面无法访问

    @Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {log.info("开始进行静态资源映射...");registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars");registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");}

在LoginCheckFilter中设置不需要处理的请求路径

        //定义不需要处理的请求路径String[] urls = new String[]{"/employee/login","/employee/logout","/user/sendMsg","/user/login","/backend/**","/front/**","/doc.html","/web.jars/**","/swagger-resources","/v2/api-docs"};

常用注解：

注解	说明
@Api	用在请求的类上，例如Controller，表示对类的说明
@ApiModel	用在类上，通常是实体类，表示一个返回响应数据的信息
@ApiOperation	用在请求的方法上，说明方法的用途、作用
@ApiImplcitParams	用在请求的方法上，表示一组参数说明
@ApiImplicitParam	用在@ApiImpliciParams注解中，指定一个请求参数的各个方面
@ApiModelProperty	用在属性上，描述响应类的属性

项目部署

部署架构

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C2RjTDNK-1690517297035)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230611155507456.png)]$

部署环境说明

服务器：

192.168.163.128(服务器ubuntu)
- Nginx：部署前端项目、配置反向代理
- Mysql：主从复制结构中的主库
192.168.168.129(101)(服务器centos7)
- jdk：运行Java项目
- git：版本控制工具
- maven：项目构建工具
- jar：Spring Boot项目打包成jar包基于内置Tomcat运行
- Mysql：主从复制结构中的从库
127.0.0.1(服务器C)
- Redis：缓存中间件
部署前端项目

上传文件到nginx/html下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYoV9tx2-1690517297036)(C:\Users\HUAWEI\AppData\Roaming\Typora\typora-user-images\image-20230611170112614.png)]$