前后端分离——瑞吉外卖

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坐标

<dependency>
	<groupId>com.github.xiaoymingroupId>
	<artifactId>knife4j-spring-boot-starterartifactId>
	<version>3.0.2version>
dependency>

2、导入knife4j相关配置类

在WebMvcConfig中

• 引入注解

  @EnableSwagger2
  @EnableKnife4j
  

• 引入代码

  @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方法中

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

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

  /定义不需要处理的请求路径
  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 常用注解

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

  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服务使用如下命令:

  ./nginx
  

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

  ./nginx -s stop
  

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

  ps -ef | grep nginx
  

  重新加载配置文件

  ./nginx -s reload
  

4.4 部署后端项目

• 第一步
  在服务器B中安装jdk、git、maven、MySQL，使用git clone命令将git远程仓库的代码克隆下来

  git clone -b v1.2 git@gitee.com:l-jia-ying/regie_project.git 
  

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

  #!/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 项目启动完成
  

  chmod 777 reggieStart.sh
  

  ./reggieStart.sh
  

• 访问192.168.74.130