前后端分离
前后端分离图片
- 黑马的瑞吉项目是个齐纳后端不分离开发
前后端开发流程图
-
定制接口: 这里所说的接口不是我们之前在service， mapper层定义的interface； 这里的接口(API接口)就是一个http的请求地址，主要就是去定义：请求路径、请求方式、请求参数、响应数据等内容。(具体接口文档描述的信息, 如上图)
-
前后端并行开发: 依据定义好的接口信息，前端人员开发前端的代码，服务端人员开发服务端的接口； 在开发中前后端都需要进行测试，后端需要通过对应的工具来进行接口的测试，前端需要根据接口定义的参数进行Mock数据模拟测试。
-
联调: 当前后端都开发完毕并且自测通过之后，就可以进行前后端的联调测试了，在这一阶段主要就是校验接口的参数格式。
4). 提测: 前后端联调测试通过之后，就可以将项目部署到测试服务器，进行自动化测试了。
前端技术框架
-
Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。(类似于java语言中的JDK)。
-
Vue : 目前最火的的一个前端javaScript框架。
-
ElementUI: 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，通过ElementUI组件可以快速构建项目页面。
-
Mock: 生成随机数据，拦截 Ajax 请求，前端可以借助于Mock生成测试数据进行功能测试。
-
Webpack: webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
ApiFox
- ApiFox概述：通常是前端开发者，用于管理和调试API的工具
- 我的Mac中有安装，后端开发不常用，可以去大致了解下教程
- 可以自定义请求接口，或者批量导入，可以由Swagger生成的OpenAPI文件进行导入
Swagger
介绍：Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。
- 功能主要包含以下几点:
-
- 使得前后端分离开发更加方便，有利于团队协作
-
- 接口文档在线自动生成，降低后端开发人员编写接口文档的负担
-
- 接口功能测试
使用Swagger
- 使用前概述：
- 直接使用Swagger, 需要按照Swagger的规范定义接口, 实际上就是编写Json文件，编写起来比较繁琐、并不方便, 。而在项目中使用，我们一般会选择一些现成的框架来简化文档的编写，而这些框架是基于Swagger的，如knife4j。
- knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。
1. 添加knife4依赖
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-spring-boot-starter</artifactId>
<version>3.0.2</version>
</dependency>
2. 导入knife4相关配置类
@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
/**
* 设置静态资源映射
* @param registry
*/
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
log.info("开始进行静态资源映射...");
registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
/*
由于Swagger生成的在线文档中，涉及到很多静态资源，这些静态资源需要添加静态资源映射，否则接口文档页面无法访问。
因此需要在 WebMvcConfig类中的addResourceHandlers方法中增加如下配置。
下面这些文件在knife4的jar包中已经提供
*/
registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
@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("版本号")
.description("项目名称接口文档说明")
.build();
}
}
注意：注意： Docket声明时，指定的有一个包扫描的路径，该路径指定的是Controller所在包的路径。因为Swagger在生成接口文档时，就是根据这里指定的包路径，自动的扫描该包下的@Controller， @RestController， @RequestMapping等SpringMVC的注解，依据这些注解来生成对应的接口文档。
3. 添加不需要过滤处理的路径（用于访问Swagger）
// 不需要过滤的路径有以下
"/doc.html",
"/webjars/**",
"/swagger-resources",
"/v2/api-docs"
- LoginCheckFilter.class
String[] urls = new String[]{
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**",
"/common/**",
"/user/sendMsg",
"/user/login",
//需要将Swagger及Knife4j相关的静态资源直接放行，无需登录即可访问
"/doc.html",
"/webjars/**",
"/swagger-resources",
"/v2/api-docs"
};
4.启动项目 访问http://localhost:8080/doc.html
- 可以参看接口、测试、导出各种形式
- 我们可以看到，在所有的Controller中提供的所有的业务增删改查的接口，全部都已经自动生成了，我们通过接口文档可以看到请求的url、请求方式、请求参数、请求实例、响应的参数，响应的示例。 并且呢，我们也可以通过这份在线的接口文档，对接口进行测试。
Swagger注解
为什么需要使用Swagger呢？
- 因为在访问localhost:8080/doc.html时，对controller类，controller类中方法参数，实体类，实体类中参数等，说明的不够详细，我们需要直接添加注解进行说明，也方便导出给开发人员查看
注解说明：
| 注解 | 位置 | 说明 |
|---|---|---|
| @Api | 类 | 加载Controller类上,表示对类的说明 |
| @ApiModel | 类（实体类） | 描述实体类的作用 |
| @ApiModelProperty | 实体类属性 | 描述实体类的属性 |
| @ApiOperation | 加载controller方法 | 说明方法的用途、作用 |
| @ApiImplicitParams | 加载controller方法 | 表示一组参数说明 |
| @ApiImplicitParam | 加载controller方法 | 用在@ApiImplicitParams注解中，指定一个请求参数的各个方面的属性 |
注解使用例子：
实体类：
@Data
@ApiModel(value = "套餐实体类")
public class Setmeal implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "套餐id")
private Long id;
Controller类：
@Slf4j
@RestController
@RequestMapping("/setmeal")
@Api(tags = "套餐相关接口")
public class SetmealController {
@Autowired
private SetmealService setmealService;
@Autowired
private SetmealDishService setmealDishService;
@Autowired
private CategoryService categoryService;
@GetMapping("/page")
@ApiOperation(value = "套餐分页接口")
@ApiImplicitParams({
@ApiImplicitParam(name = "page",value = "页码",required = true),
@ApiImplicitParam(name = "pageSize",value = "每页记录数",required = true),
@ApiImplicitParam(name = "name",value = "套餐名称",required = false)
}
)
public R<Page> page(int page, int pageSize, String name) {
log.info("套餐分页方法被调用:page{},pageSize{},name{}", page,pageSize,name);
//构造分页器
Page<Setmeal> setmealPage = new Page<>(page, pageSize);
Page<SetmealDto> setmealDtoPage = new Page<>();
//构造条件构造器
LambdaQueryWrapper<Setmeal> setmealLambdaQueryWrapper = new LambdaQueryWrapper<>();
//添加过滤条件
setmealLambdaQueryWrapper.like(name != null, Setmeal::getName, name);
//添加排序条件
setmealLambdaQueryWrapper.orderByDesc(Setmeal::getUpdateTime);
//执行分页查询
setmealService.page(setmealPage, setmealLambdaQueryWrapper);
//对象拷贝(不要复制page中的records属性)
BeanUtils.copyProperties(setmealPage, setmealDtoPage, "records");
List<Setmeal> records = setmealPage.getRecords();
List<SetmealDto> setmealDtoList = records.stream().map((item) -> {
SetmealDto setmealDto = new SetmealDto();
//对象拷贝
BeanUtils.copyProperties(item, setmealDto);
//获取到当前setmeal的categoryId用于查询categoryName
Long categoryId = item.getCategoryId();
Category category = categoryService.getById(categoryId);
if (category != null) {
//设置categoryName
setmealDto.setCategoryName(category.getName());
//返回setmealDto
}
return setmealDto;
}).collect(Collectors.toList());
setmealDtoPage.setRecords(setmealDtoList);
return R.success(setmealDtoPage);
}
使用注解后的Swagger 示例：
可见对类、方法、参数有了具体的描述，同样导出的接口文件也会有描述
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
