瑞吉外卖 10 前后端分离

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

image

前后端分离开发

介绍

image

开发流程

image

mock数据是模拟数据。

技术栈

image

yapi

介绍

image

使用

image

image

导出接口:

image

image

swagger

介绍

image

使用方式

image

image

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

image

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

image

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

image

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

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

image

常用注解

image

项目部署

部署架构

image

部署环境说明

image

192.168.100.128

  • 主库
  • nginx

192.168.100.100

  • 从库

部署前端项目

image

dist是前端webpack打包好的。

image

    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;
        }

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

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

image

部署后端项目

image

image

image

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值