前后端分离——瑞吉外卖

文章目录

[1. 前后端分离开发](#1. 前后端分离开发)
- [1.1 介绍](#1.1 介绍)
- [1.2 开发流程](#1.2 开发流程)
- [1.3 前端技术栈](#1.3 前端技术栈)
[2. Yapi](#2. Yapi)
- [2.1 介绍](#2.1 介绍)
- [2.2 使用](#2.2 使用)
[3. Swagger](#3. Swagger)
- [3.1 介绍](#3.1 介绍)
- [3.2 使用方式](#3.2 使用方式)
- - 1、导入knife4j的maven坐标
  - 2、导入knife4j相关配置类
- [3.3 常用注解](#3.3 常用注解)
[4. 项目部署](#4. 项目部署)
- [4.1 部署架构](#4.1 部署架构)
- [4.2 部署环境说明](#4.2 部署环境说明)
- [4.3 部署前端项目](#4.3 部署前端项目)
- [4.4 部署后端项目](#4.4 部署后端项目)

1. 前后端分离开发

1.1 介绍

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

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

1.2 开发流程

前后端分离开发后，面临一个问题，就是前端开发人员和后端开发人员如何进行配合来共同开发一个项目?可以按照如下流程进行:

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

1.3 前端技术栈

开发工具
Visual Studio Code
hbuilder
技术框架
nodejs
Vue
ElementUl
mock
webpack

2. Yapi

2.1 介绍

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

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

源码地址:https://github.com/YMFE/yapi

2.2 使用

要使用YApi，需要自己进行部署:

参考教程：https://blog.csdn.net/hxj0323/article/details/121160198
替代工具
Apifox:https://apifox.com/

3. Swagger

3.1 介绍

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

官网:https://swagger.io/

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

3.2 使用方式

1、导入knife4j的maven坐标

xml 复制代码

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

2、导入knife4j相关配置类

在WebMvcConfig中

引入注解
java 复制代码
```
@EnableSwagger2
@EnableKnife4j
```

引入代码

java 复制代码

@Bean
   public Docket createRestApi() {
       // 文档类型
       return new Docket(DocumentationType.SWAGGER_2)
               .apiInfo(apiInfo())
               .select()
               .apis(RequestHandlerSelectors.basePackage("com.ljytest.reggieorder.controller"))
               .paths(PathSelectors.any())
               .build();
   }

   private ApiInfo apiInfo() {
       return new ApiInfoBuilder()
               .title("瑞吉外卖")
               .version("1.0")
               .description("瑞吉外卖接口文档")
               .build();
   }

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

添加搭配WebMvcConfig的addResourceHandlers方法中

java 复制代码

registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");

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

java 复制代码

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

访问http://localhost:8080/doc.html

3.3 常用注解

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

4. 项目部署

4.1 部署架构

4.2 部署环境说明

服务器:

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

4.3 部署前端项目

将打包好的前端代码上传到html文件夹下

修改nginx.conf

java 复制代码

server {
	listen	80;
	server_name	localhost;

	location /	{
		root	html/dist;
		index	index.html;
	}
	#反向代理配置
	location ^~ /api/{
		rewrite ^/api/(.*)$ /$1 break; #url重写
		proxy_pass http://192.168.74.128:8080;
	}
	 error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   html;
     }
}

启动Nginx服务使用如下命令:

bash 复制代码

./nginx

停止Nginx服务使用如下命令:

bash 复制代码

./nginx -s stop

启动完成后可以查看Nginx进程:

bash 复制代码

ps -ef | grep nginx

重新加载配置文件

bash 复制代码

./nginx -s reload

4.4 部署后端项目

第一步

在服务器B中安装jdk、git、maven、MySQL，使用git clone命令将git远程仓库的代码克隆下来
bash 复制代码
```
git clone -b v1.2 git@gitee.com:l-jia-ying/regie_project.git 
```

第二步

将资料中提供的reggieStart.sh文件上传到服务器B，通过chmod命令设置执行权限

bash 复制代码

#!/bin/sh
echo =================================
echo  自动化部署脚本启动
echo =================================

echo 停止原来运行中的工程
APP_NAME=regie_project

tpid=`ps -ef|grep $APP_NAME|grep -v grep|grep -v kill|awk '{print $2}'`
if [ ${tpid} ]; then
    echo 'Stop Process...'
    kill -15 $tpid
fi
sleep 2
tpid=`ps -ef|grep $APP_NAME|grep -v grep|grep -v kill|awk '{print $2}'`
if [ ${tpid} ]; then
    echo 'Kill Process!'
    kill -9 $tpid
else
    echo 'Stop Success!'
fi

echo 准备从Git仓库拉取最新代码
cd /usr/local/javaapp/regie_project

echo 开始从Git仓库拉取最新代码
git pull origin v1.2
echo 代码拉取完成

echo 开始打包
output=`mvn clean package -Dmaven.test.skip=true`

cd target

echo 启动项目
nohup java -jar reggie_order-0.0.1-SNAPSHOT.jar &> reggie_order.log &
echo 项目启动完成

bash 复制代码

chmod 777 reggieStart.sh

bash 复制代码

./reggieStart.sh

访问192.168.74.130