前后端分离开发

一、简介

前后端分离开发：在项目过程中，对于前端代码的开发由专门的前端开发人员负责，后端代码则由后端开发人员负责，这样可以做到分工明确，各司其职，提高开发效率，前后端代码并行开发，可以加快项目开发进度。

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

前后端开发人员配合共同开发一个项目：

mock数据：模拟数据

接口（API接口）就是一个http的请求地址，主要就是定义：请求路径、请求方式、请求参数、相应数据等内容。

接口规范示例：

前端技术栈：

开发工具：Visual Studio Code 、  hbuilder

技术框架：nodejs  、  VUE  、 ElementUI  、  mock   、 webpack（打包工具）

二、Yapi

是一个服务，用来定义接口。

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

YApi让接口开发更简单高效，让接口的管理更具有可读性、可维护性、让团队协作更合理。要使用YApi需要自己进行部署。

使用YApi可以执行：添加项目、添加分类、添加接口、编辑接口、查看接口。

三、Swagger

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

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

使用方式：

（1）导入knife4j的Maven坐标

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

（2）导入knife4j相关配置类（WebMvcConfig）

@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {

    @Bean
    public Docket createRestApi(){
        // 文档类型
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
        // 让框架扫描到com.wlp.reggie.controller中的接口和方法，进而生成接口文档
                .apis(RequestHandlerSelectors.basePackage("com.wlp.reggie.controller"))
                .paths(PathSelectors.any())
                .build();
    }
    private ApiInfo apiInfo(){
        return new ApiInfoBuilder()
                .title("瑞吉外卖")
                .version("1.0")
                .description("瑞吉外卖接口文档")
                .build();
    }
}

（3）设置静态资源，否则接口文档页面无法访问（WebMvcConfig中的addResourceHandlers方法）

//    设置静态资源映射
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("开始进行静态资源映射……");
//        doc.html页面展示项目中的所有接口
        registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resource/");
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resource/webjars/");
        registry.addResourceHandler("//backend/**").addResourceLocations("classpath:/backend/");
        registry.addResourceHandler("//front/**").addResourceLocations("classpath:/front/");
    }

（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

swagger框架提供的注解：

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

@ApiImplicitParams({
    @ApiImplicitParam(name = "page", value = "页码", required = true),
    @ApiImplicitParam(name = "pageSize", value = "每页记录数", required = true),
    @ApiImplicitParam(name = "name", value = "套餐名称", required = false)
})

四、项目部署

部署环境说明：

• 192.168.153.131（服务器A）

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

                MySQL：主从复制结构中的主库

• 192.168.153.129（服务器B）

                jdk：运行Java项目

                git：版本控制工具

                Maven：项目构建工具

                jar：springboot项目打成jar包基于内置Tomcat运行

                MySQL：主从复制结构中的从库

• 172.17.2.94（服务器C）

                Redis：缓存中间件

waiting…