前后端分离开发（包含Yapi、Swagger及前后端分离项目的部署）

一、前后端分离开发

二、Yapi

• 主要是用来定义接口，这个接口不是后端的interface，而是项目中的接口，通俗点说就是网址。前端人员和后端人员都可以依照这个接口进行开发。 
• 介绍： 
• 使用方式

三、Swagger

• 简介

• 使用方式

         1、导入依赖

        

         2、导入knife4j相关配置（webMvcConfig）              

            ​​​​​​​           3、设置静态资源映射        ​​​​​​​

         4、在LoginCheckFilter中设置不需要处理的请求路径，可以在不登陆的情况下访问到这些页面

   

        5、访问：localhost:8080/doc.html,页面中就有了文档中的各种信息。

        6、不光显示各种文档信息，还可以测试接口，简直不要太方便

• 常用注解

        

         @Api ：一般放在Controller类的上面，主要是对Controller进行说明。(告诉swagger这是一个Controller)

        @ApiModel：一般放在实体类上，表示返回一个响应数据的信息。

        @ApiModelProperty：一般放在实体类的属性上，对实体类进行说明。

        @ApiOperation：operation的意思是 操作、运转。放在请求的方法上面，说明方法的用途作用。

        @ApiLmplicitParams：用在请求的方法上，表示一组参数说明

        @ApiLmplicitParam：用在@ApiLmplicitParams注解中，指定一个请求参数的各个方面的信息

示例：

 @ApiLmPlicitParams的使用

 四、前后端分离项目的部署

• 部署架构

        大概说明一下：

                因为项目分前台（消费者）和后台（商家），后台用户和前台用户通过网络请求到前端的部署着前端页面的Nginx服务器，同时Nginx服务器还配置了反向代理，反向代理将请求转发至后端的Tomcat服务器。再往下有主从复制的数据库，还有一台做缓存的redis数据库。

• 部署环境说明

• 部署前端项目

        1、将前端的代码用webpack打包好，然后上传至服务器1中的 /usr/local/nginx/html文件夹中。（这里不知道Nginx如何安装和操作的可以去看看这篇文章

——>Nginx入门（简介、反向代理、负载均衡））

        

         2、修改Nginx的配置文件 nginx.conf

        

        解析：

        

         我们可以清楚的看到，前端发送给的请求路径中带了api这一级，这么做是为了区分开来，让Nginx知道哪些请求（一般是请求web服务器的）是需要被代理的，哪些请求（一般是请求跳转页面的）不需要被代理，Nginx直接就可以处理。简单来说，路径中加一级api，就是为了让Nginx服务器区分需不需要将请求进行转发用的。

        而反向代理的配置当中有个rewrite（路径重写），当Nginx服务器分辨出某一请求路径中包含api这一级后，需要转发到web服务器，而路径中带api的请求转发到web服务器之后没有与之匹配的请求映射（后端编写接口时路径中无api这一级），所以需要重写路径将api这一级去掉，再转发至相应的web服务器。

• 部署后端项目

        1、在192.168.80.133这台服务器上安装jdk、git、maven、mysql等软件，不知道怎么安装的可以找找我之前写的文章。

        2、使用git clone命令将git远程仓库的代码克隆下来

        

        3、编写一个shell脚本：reggieStart.sh文件，通过chmod命令设置执行权限，来实现拉取git远程仓库的最新的代码，再通过maven的命令打包，打包之后再通过java -jar的命令把springboot项目重新运行起来。（脚本如下）

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

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

echo 先查找一下springboot项目是否正在运行，若正在运行，先把项目停下来
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/reggie

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

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

cd target

echo 启动项目

nohup java -jar reggie_take_out-1.0-SNAPSHOT.jar &> reggie_take_out.log &

echo 项目启动完成

         4、进入我们的项目目录reggie，然后用maven命令进行打包

cd /usr/local/javaapp/reggie

mvn clean package -Dmaven.test.skip=true

 （输入这个命令之后，根据项目的大小，会等待1到5分钟，期间一直在下载项目所用到的各种依赖，不要慌，等就完事）

 最终打包好之后，就是上图的样子，jar包就是pom文件中项目的名字

        5、给刚写好的shell脚本设置执行权限

cd /usr/local/javaapp

chmod 777 reggieStart.sh

这样我们就有权限执行该脚本了

        6、执行reggieStart.sh脚本文件，自动部署项目。

        7、查看项目是否运行

ps -ef | grep java

         8、配合前面的Nginx服务器部署的前端项目，访问一下，成功！

        9、查看项目运行日志，看有没有启动成功，有没有报错

         10、也可以通过tail -f 命令实时的动态查看日志

tail -f reggie_take_out.log