前后端分离

黎明230
391 阅读3分钟

一、介绍

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

目前，前后端分俩开发方式已经被越来越多的公司所采用，成为当前项目开发的主流开发方式。

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

二、开发流程

前后端分离开发后，面临一个问题，就是前端开发人员和后端开发人员如何进行配合来共同开发一个项目？

可以按照如下流程进行：

image-20230419110709720.png

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

三、前端技术栈

开发工具

Visual Studio Code

Hbuilder

技术框架

nodejs

VUE

ElementUI

mock

webpack

四、YApi

1、介绍

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

YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。

源码地址：github.com/YMFE/yapi

要使用YApi，需要自己进行部署。

2、使用方式

使用YApi，可以执行下面操作：

添加项目

添加分类

添加接口

编辑接口

查看接口

五、Swagger

1、介绍

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

官网：swagger.io/

Knife4j是为Java MVC框架继承Swagger生成Api文档的增强解决方案。

<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-spring-boot-starter</artifactId>
    <version>3.0.2</version>
</dependency>
2.使用方式

操作步骤:

1、导入Knife4j的maven坐标

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

2、导入Knife4j相关配置类

@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
​
    @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();
    }
}

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

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

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

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

"/doc.html",
"webjars/**",
"/swagger-resources",
"/v2/api-docs"
3、常用注解
注解说明
@Api用在请求的类上，例如Controller，表示对类的说明
@ApiModel用在类上，通常是实体类，表示一个返回响应数据的信息
@ApiModelProperty用在属性上，描述响应类的属性
@ApiOperation用在请求的方法上，说明方法的用途、作用
@ApilmplicitParams用在请求的方法上，表示一组参数说明
@ApilmplicitParam用在@ApilmplicitParams注解中，指定一个请求参数的各个方面
avatar
文章
阅读
粉丝