前后端分离开发

  介绍

  前后端对象 前端工程师 和后端工程师，这样分工明确，各司其职，提高速率，并行开发，目前主流的开发方式。

  工程机构上也也会发生改变，前后端不在混合在同一个maven工程中，分为前，后端工程。

 

最主要的就是前后端接口的规范  

后端自测：如 postman，swagger等

前端自测：mock数据（模拟数据）

接口：

后端人员了解即可

前端技术栈： 

开发工具 VScode hbuider

技术框架：nodejs（相当于jdk）  VUE  ElementUI（ui界面） mock（测试） webpack（打包）；

yapi介绍

相较于swagger更新一些的接口定义管理工具（还兼具postman的功能）

可以用swagger或postman批量导入

swagger 介绍及使用

简介：

swagger是后端常用的技术，可以生成相应的接口文档并使用生成的接口文档做测试

 knife4j底层继承swagger的增强框架 注入依赖即可 （单纯使用swagger会很麻烦）

操作步骤：

1，导入knife4j的maven坐标

2，导入knife4j相关配置类

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

4，在loginCheckFilter中设置不需要处理的请求路径

1.

 <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
            <version>3.0.2</version>
 </dependency>

2 3.

@Slf4j
@Configuration
@EnableSwagger2   //这里
@EnableKnife4j    //这里
public class WebMvcConfig extends WebMvcConfigurationSupport {

    /**
     * 设置静态资源映射
     * @param registry
     */
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("开始进行静态资源映射...");
        registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");//这里第三步
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");//这里第三步
        registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
        registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
    }

    /**
     * 扩展mvc框架的消息转换器
     * @param converters
     */
    @Override
    protected void extendMessageConverters(List<HttpMessageConverter<?>> 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.itbug.reggie.controller"))
                .paths(PathSelectors.any())
                .build();
    }

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

 3.

加入两段静态资源映射 以便访问 两个链接都是框架自带（展示在图二中）

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

4.

在拦截中（loginCheckFilter）加入放行 不登录即可访问

从"doc.html",开始到"/v2/api-docs"结束

String[] urls = new String[]{
                "/employee/login",
                "/employee/logout",
                "/backend/page/login/login.html",
                "/backend/page/demo/upload.html",
                "/backend/**",
                "/front/**",
                "/common/**",
                "/user/sendMsg",
                "/user/login",
                "/doc.html",
                "/web.jars/**",
                "/swagger-resources",
                "/v2/api-docs"

然后访问：http://localhost:8080/doc.html即可

 导出文档（OpenAPI 适用于yapi 得json格式）

 常用注释

 可以让接口查看的网页说明性更强 （翻译 说明等功能）

项目部署