前后端分离开发

前后端分离开发

介绍

• 前后端分离开发： 就是在项目开发过程中，对于前端代码由专门的 前端开发人员 负责，后端代码则由 后端开发人员负责 ，这样可以做到分工明确，各司其职，提高开发效率，前后端代码并行开发，可以加快项目开发进度。
• 目前，前后端分离开发方式已经被越来越多的公司所采用，成为当前项目开发的主流开发方式。
• 前后端分离开发后，从工程结构上也会发生变化，即前后端代码不再混合在同一个maven工程中，而是分为 前端工程和后端工程。
  

开发流程

前后端分离开发后，面临一个问题，就是前端开发人员和后端开发人员如何进行配合来共同开发一个项目？
可以按照以下流程进行：

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

YApi

介绍

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

源码地址

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

安装

需要node.js与mongodb环境

• npm安装Yapi命令：

  // 命令输入环境：Windows系统下的 cmd 命令窗口
  npm install -g yapi-cli --registry https://registry.npm.taobao.org  // 在线安装Yapi
  

• 启动YApi

  // 命令输入环境：Windows系统下的 cmd 命令窗口
  yapi server  // 启动Yapi服务
  

  

• 浏览器打开：http://localhost:9090/，进入yapi的配置安装服务。
  

• 注意：

  • 选择需要安装的版本
  • 填写好公司的名称，可以自定义
  • 填写好管理员邮箱，也可以不填默认为[email protected]（后面可以配置）
  • 记住Yapi安装路径，如：C:\Users\Administrator\my-yapi
  • 填写好以上内容后，点击“开始部署”按钮，进行部署；部署成功后，就是node启动yapi服务啦。

• Yapi的目录结构图：

使用方式

• 访问登录：进入my-yapi目录

  node vendors/server/app.js
  

• 浏览器访问 http://localhost:3000
  

• 点击登录：账号是邮箱，密码默认ymfe.org
  

• 添加项目
  

• 添加分类
  

• 添加接口
  
  

• 编辑接口
  

• 导出接口
  

• 导入接口
  

Swagger

介绍

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

• 官网

• knife4j是为Java MVC框架集成Swagger生成API文档的增强解决方案

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

使用方式

• 操作步骤：
  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.xiaowu.reggie.controller"))  //项目包结构，用于扫描包
                     .paths(PathSelectors.any())
                     .build();
         }
         private ApiInfo apiInfo(){
             return new ApiInfoBuilder()
                     .title("瑞吉外卖")      //标题
                     .version("1.0")        //版本
                     .description("瑞吉外卖接口文档")        //描述
                     .build();
         }
     }
     

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

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

  4. 在LoginCheckFillter中设置不需要处理的请求路径
     
  5. 访问：启动项目，在浏览器中输入http://localhost:8080/doc.html
     

常用注解

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