189 8069 5689

【瑞吉外卖之前后端分离开发】-创新互联

此笔记内容为黑马瑞吉外卖项目的前后端分离开发部署部分。

目前成都创新互联公司已为成百上千家的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、鼓楼网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

目录

问题分析

前后端分离开发

介绍

开发流程 

前端技术栈

Yapi

介绍

使用

Swagger

介绍

使用方式

测试

常用注解

项目部署 

部署架构

部署环境说明

部署前端项目

部署后端项目

问题分析

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

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

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

开发流程 

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

前端技术栈

开发工具

  • Visual Studio Code
  • hbuilder

技术框架

  • nodejs
  • VUE
  • ElementUI
  • mock
  • webpack
Yapi
介绍

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

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

源码地址: GitHub - YMFE/yapi: YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台

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

使用

使用YApi可以执行下面操作

  • 添加项目
  • 添加分类
  • 添加接口
  • 编辑接口
  • 查看接口

Swagger
介绍

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

官网:API Documentation & Design Tools for Teams | Swagger

使用方式

操作步骤:

1、导入knife4j的maven坐标

com.github.xiaoyminknife4j-spring-boot-starter3.0.2

2、导入knife4j相关配置类

在配置包下的WebMvcConfig文件下

主要是加入@EnableSwagger2和@EnableKnife4j两个注解，还有创建Docket 对象，这个对象是swagger给我们提供的，来描述接口文档的信息。

@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
  @Bean
  public 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();
  }
}

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

在config包WebMvcConfig类下的addResourceHandlers方法里加上

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

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

"/doc.html",
"/webjars/**",
"/swagger-resources",
"/v2/api-docs"

//定义不需要拦截的路径
        String[] urls=new String[]{
                "/employee/login",
                "/employee/logout",
                "/backend/**",
                "/front/**",
                "/common/**",
                "/user/login",
                "/user/sendMsg",

                "/doc.html",
                "/webjars/**",
                "/swagger-resources",
                "/v2/api-docs"
        };
测试

启动服务，localhost:8080/doc.html。doc.html是固定的

直接生成的文档注解内容并不是很完善 ，可以搭配注解使生成的文档更完善清楚。

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

部署环境说明

  • 192.168.88.129（服务器A)

    Nginx:部署前端项目、配置反向代理

    Mysql:主从复制结构中的主库

    Redis:缓存中间件

  • 192.168.88.130（服务器B)

    jdk:运行Java项目

    git:版本控制工具

    maven:项目构建工具

    jar: Spring Boot项目打成jar包基于内置Tomcat运行

    Mysql:主从复制结构中的从库

这里我把Redis放到服务器A里了

部署前端项目

第一步:在服务器A中安装Nginx，将课程资料中的dist目录上传到Nginx的html目录下

第二步:修改Nginx配置文件nginx.conf

server{
  listen 80;
  server_name localhost;

  location /{
    root html/dist;
    index index.html;
  }

  location ^~ /api/{
          rewrite ^/api/(.*)$ /$1 break;
          proxy_pass http://192.168.88.130:8080;
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html{
      root html;
  }
}

前端页面发送过来的请求路径中有带api，而我们后端的请求路径中没有api，所以使用nginx反向代理在转发时重写它的url。 利用到了正则，最后截取$1也就是api后的路径

部署后端项目

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

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

reggieStart.sh文件具体内容

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

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

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_take_out

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

第三步:执行reggieStart.sh脚本文件，自动部署项目

注意:在Linux下和Windows下的路径是不一样的,记得修改图片路径,然后把图片放到你写的目录。

ps:本人是利用IDEA打包手动部署上去运行的，感觉更方便点😁。

完结？不可能！只要学不死就往死里学，冲！！！

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧


网站栏目：【瑞吉外卖之前后端分离开发】-创新互联
文章地址：http://cdxtjz.cn/article/ddcsee.html

其他资讯