【项目】小帽外卖（十五）

小帽外卖第十五章前后端分离

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

一、前后端分离开发 1. 介绍

前后端分离开发，就是在项目开发过程中，对于前端代码的开发由专门的前端开发人员负责，后端代码则由后端开发人员负责，这样可以做到分工明确、各司其职，提高开发效率，前后端代码并行开发，可以加快项目开发进度。
目前，前后端分离开发方式已经被越来越多的公司所采用，成为当前项目开发的主流开发方式。
前后端分离开发后，从工程结构上也会发生变化，即前后端代码不再混合在同一个maven工程中，而是分为前端工程和后端工程。

2. 开发流程

前后端分离开发后，面临一个问题，就是前端开发人员和后端开发人员如何进行配合来共同开发一个项目？可以按照如下流程进行：
接口(API接口)就是一个http的请求地址，主要就是去定义：请求路径、请求方式、请求参数、响应数据等内容。

3. 前端技术栈

开发工具
- Visual Studio Code
- hbuilder
技术框架
- nodejs
- VUE
- ElementUI
- mock
- webpack

二、YApi 1. 介绍

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。
YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。
源码地址：https://github.com/YMFE/yapi
要使用YApi，需要自己进行部署。

2. 使用方式

使用YApi，可以执行下面操作：
- 添加项目
- 添加分类
- 添加接口
- 编辑接口
- 查看接口

三、Swagger 1. 介绍

使用Swagger你只需要按照它的规范去定义接口及接口相关的信息，再通过Swagger衍生出来的一系列项目和工具，就可以做到生成各种格式的接口文档，以及在线接口调试页面等等。
官网：https://swagger.io/
knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。


   com.github.xiaoymin
   knife4j-spring-boot-starter
   3.0.2

2. 使用方式

操作步骤：

导入knife4j的maven坐标


   com.github.xiaoymin
   knife4j-spring-boot-starter
   3.0.2

导入knife4j相关配置类
设置静态资源，否则接口文档页面无法访问

@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
    
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("开始进行静态资源映射...");
        registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars
    @Override
    protected void extendMessageConverters(List> converters) {
        log.info("扩展消息转换器...");
        // 创建消息转换器对象
        MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
        // 设置对象转换器，底层使用Jackson将Java对象转为json
        messageConverter.setObjectMapper(new JacksonObjectMapper());
        // 将上面的消息转换器对象追加到mvc框架的转换器集合中
        converters.add(0, messageConverter);
    }

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

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

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

@WebFilter(filterName = "loginCheckFilter", urlPatterns = "
    public boolean check(String[] urls, String requestURI) {
        for(String url : urls) {
            boolean match = PATH_MATCHER.match(url, requestURI);
            if(match) {
                return true;
            }
        }
        return false;
    }
}

3. 常用注解

四、项目部署 1. 部署架构

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：缓存中间件

3. 部署前端项目

第一步：在服务器A中安装Nginx，将dist目录上传到Nginx的html目录下
第二步：修改Nginx配置文件nginx.conf

4. 部署后端项目

第一步：在服务器B中安装jdk、git、maven、MySQL，使用git clone命令将git远程仓库的代码克隆下来
第二步：将lemonStart.sh文件上传到服务器B，通过chmod命令设置执行权限
第三步：执行reggieStart.sh脚本文件，自动部署项目
第四步：将本地存放图片的img目录整体上传至服务器B的/usr/local目录下
第五步：修改IDEA中的配置文件并推送至git远程仓库，重新执行lemonStart.sh脚本完成部署

【项目】小帽外卖（十五）

Linux相关栏目本月热门文章