10 前后端分离

前后端结合的话有以下问题：​

​

前后端分离开发

介绍

​​​​

开发流程

​​​​

mock 数据是模拟数据。

技术栈

​

​

yapi

介绍

​​

使用

​

​​​​

导出接口：

​​

​​

swagger

介绍

​​

使用方式

​​

​​

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

​​

在 WebMvcConfig​类加上注解：

@EnableSwagger2
@EnableKnife4j

再加上这两个方法：

    @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();
    }

​​

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

​​

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

进入 http://localhost:8080/doc.html​网站就可以看到生成的接口。

​​

常用注解

​​

项目部署

部署架构

​​

部署环境说明

​​

​192.168.100.128​：

• 主库
• nginx

​192.168.100.100​：

• 从库

部署前端项目

​​

dist 是前端 webpack 打包好的。

​​

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

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

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

​前端发送请求会多加一个 api 的前缀。

反向代理对这个 url 进行处理，保证后端能接收到正确的请求：

​​

部署后端项目

​​

​​

​​

‍

遇到一个小问题，记录一下：Git 的使用-一个分支完全替换另一个分支

‍