网站怎么做图片动态图片大全,南昌专业网站排名推广,网页版拍图搜题,seo课程培训入门目录
前言
一、前后端分离开发
1. 介绍
2. 开发流程
3. 前端技术栈
#xff08;1#xff09;开发工具:
#xff08;2#xff09;技术框架:
二、Yapi
1. 介绍
2. 使用
#xff08;1#xff09;准备
#xff08;2#xff09;定义接口
#xff08;3#x…目录
前言
一、前后端分离开发
1. 介绍
2. 开发流程
3. 前端技术栈
1开发工具:
2技术框架:
二、Yapi
1. 介绍
2. 使用
1准备
2定义接口
3导出接口文档
4导入接口文档
三、Swagger
1. 介绍
2. 使用方式
1导入knife4j的maven坐标
2导入knife4j相关配置类
3设置静态资源映射
4在LoginCheckFilter中设置不需要处理的请求路径
3. 查看接口文档
4. 常用注解
1问题说明
2注解介绍
3注解测试 前言 当前项目中前端代码和后端代码混合在一起是存在问题的存在什么问题呢 主要存在以下几点问题
(1) 开发人员同时负责前端和后端代码开发分工不明确
(2)开发效率低
(3)前后端代码混合在一个工程中不便于管理
(4)对开发人员要求高(既会前端又会后端)人员招聘困难
为了解决上述提到的问题现在比较主流的开发方式就是前后端分离开发前端人员开发前端的代码后端开发人员开发服务端的业务功能分工明确各司其职。我们本章节就是需要将之前的项目进行优化改造变成前后端分离开发的项目。
一、前后端分离开发
1. 介绍
前后端分离开发就是在项目开发过程中对于前端代码的开发由专门的前端开发人员负责后端代码则由后端开发人员负责这样可以做到分工明确、各司其职提高开发效率前后端代码并行开发可以加快项目开发进度。
目前前后端分离开发方式已经被越来越多的公司所采用成为当前项目开发的主流开发方式。
前后端分离开发后从工程结构上也会发生变化即前后端代码不再混合在同一个maven工程中而是分为 前端工程 和 后端工程 。
前后端分离之后不仅工程结构变化后期项目上线部署时与之前也不同: 之前: 前后端代码都混合在一起我们只需要将前端和后端的代码统一打成jar包直接运行就可以了。 现在: 拆分为前后端分离的项目后最终部署时后端工程会打成一个jar包运行在Tomcat中(springboot内嵌的tomcat)。前端工程的静态资源会直接部署在Nginx中进行访问。
2. 开发流程
前后端分离开发后面临一个问题就是前端开发人员和后端开发人员如何进行配合来共同开发一个项目可以按照如下流程进行 a. 定制接口: 这里所说的接口不是我们之前在service mapper层定义的interface 这里的接口(API接口)就是一个http的请求地址主要就是去定义请求路径、请求方式、请求参数、响应数据等内容。(具体接口文档描述的信息, 如上图) b. 前后端并行开发: 依据定义好的接口信息前端人员开发前端的代码服务端人员开发服务端的接口 在开发中前后端都需要进行测试后端需要通过对应的工具来进行接口的测试前端需要根据接口定义的参数进行Mock数据模拟测试。 c. 联调: 当前后端都开发完毕并且自测通过之后就可以进行前后端的联调测试了在这一阶段主要就是校验接口的参数格式。 d. 提测: 前后端联调测试通过之后就可以将项目部署到测试服务器进行自动化测试了。 3. 前端技术栈
1开发工具:
Visual Studio Code (简称VsCode)
Hbuilder
2技术框架: A. Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。(类似于java语言中的JDK)。 B. Vue : 目前最火的的一个前端javaScript框架。 C. ElementUI: 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库通过ElementUI组件可以快速构建项目页面。 D. Mock: 生成随机数据拦截 Ajax 请求前端可以借助于Mock生成测试数据进行功能测试。 E. Webpack: webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)分析你的项目结构找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言SassTypeScript等并将其转换和打包为合适的格式供浏览器使用。 二、Yapi
1. 介绍
YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 APIYApi 还为用户提供了优秀的交互体验开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。
YApi让接口开发更简单高效让接口的管理更具可读性、可维护性让团队协作更合理。
源码地址: GitHub - YMFE/yapi: YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台
官方文档: YApi 接口管理平台
要使用YApi项目组需要自己进行部署在本项目中我们可以使用课程提供的平台进行测试域名 https://mock-java.itheima.net/
2. 使用
1准备
注册账号登录平台
2定义接口
登录到Yapi平台之后我们可以创建项目在项目下创建接口分类在对应的分类中添加接口。
a. 创建项目
b. 添加分类
在当前项目中,有针对于员工、菜品、套餐、订单的操作我们在进行接口维护时可以针对接口进行分类如果没有对应的分类我们自己添加分类。
c. 添加接口
接口基本信息录入之后添加提交就可以看到该接口的基本信息
但是目前接口中我们并未指定请求参数响应数据等信息我们可以进一步点击编辑对该接口 详情进行编辑处理。
d. 运行接口
Yapi也提供了接口测试功能当我们接口编辑完毕后后端服务的代码开发完毕启动服务就可以使用Yapi进行接口测试了。
注意 由于菜品分页查询接口是需要登录后才可以访问的所以在测试该接口时需要先请求员工管理接口中的登录接口登录完成后再访问该接口。
在Yapi平台中将接口文档定义好了之后前后端开发人员就需要根据接口文档中关于接口的描述进行前端和后端功能的开发。
3导出接口文档
在Yapi平台中我们不仅可以在线阅读文档还可以将Yapi中维护的文档直接导出来可以导出mdjsonhtml格式在导出时自行选择即可 。
而在导出的html文件或md文件中主要描述的就是接口的基本信息 包括 请求路径、请求方式、接口描述、请求参数、返回数据等信息。展示形式如下
4导入接口文档
上述我们讲解了接口文档的导出我们也可以将外部的接口文档导入到Yapi的平台中这样我们就不用一个接口一个接口的添加了。我们可以将课程资料中提供的json格式的接口文档直接导入Yapi平台中来。
导入过程中出现的确认弹窗选择确认。
导入成功之后我们就可以在Yapi平台查看到已导入的接口。
三、Swagger
1. 介绍
官网API Documentation Design Tools for Teams | Swagger
Swagger 是一个规范和完整的框架用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。功能主要包含以下几点: A. 使得前后端分离开发更加方便有利于团队协作 B. 接口文档在线自动生成降低后端开发人员编写接口文档的负担 C. 接口功能测试 使用Swagger只需要按照它的规范去定义接口及接口相关的信息再通过Swagger衍生出来的一系列项目和工具就可以做到生成各种格式的接口文档以及在线接口调试页面等等。
直接使用Swagger, 需要按照Swagger的规范定义接口, 实际上就是编写Json文件编写起来比较繁琐、并不方便, 。而在项目中使用我们一般会选择一些现成的框架来简化文档的编写而这些框架是基于Swagger的如knife4j。knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。而我们要使用kinfe4j需要在pom.xml中引入如下依赖即可
dependencygroupIdcom.github.xiaoymin/groupIdartifactIdknife4j-spring-boot-starter/artifactIdversion3.0.2/version
/dependency
2. 使用方式
接下来我们就将我们的项目集成Knife4j来自动生成接口文档。这里我们还是需要再创建一个新的分支v1.2在该分支中进行knife4j的集成集成测试完毕之后没有问题我们再将v1.2分支合并到master。
使用knife4j主要需要操作以下几步:
1导入knife4j的maven坐标
dependencygroupIdcom.github.xiaoymin/groupIdartifactIdknife4j-spring-boot-starter/artifactIdversion3.0.2/version
/dependency
2导入knife4j相关配置类
这里我们就不需要再创建一个新的配置类了我们直接在WebMvcConfig配置类中声明即可。
A. 在该配置类中加上两个注解 EnableSwagger2 EnableKnife4j ,开启Swagger和Knife4j的功能。
B. 在配置类中声明一个Docket类型的bean, 通过该bean来指定生成文档的信息。
Slf4j
Configuration
EnableSwagger2
EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {/*** 设置静态资源映射* param registry*/Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {log.info(开始进行静态资源映射...);registry.addResourceHandler(/backend/**).addResourceLocations(classpath:/backend/);registry.addResourceHandler(/front/**).addResourceLocations(classpath:/front/);}/*** 扩展mvc框架的消息转换器* param converters*/Overrideprotected void extendMessageConverters(ListHttpMessageConverter? converters) {log.info(扩展消息转换器...);//创建消息转换器对象MappingJackson2HttpMessageConverter messageConverter new MappingJackson2HttpMessageConverter();//设置对象转换器底层使用Jackson将Java对象转为jsonmessageConverter.setObjectMapper(new JacksonObjectMapper());//将上面的消息转换器对象追加到mvc框架的转换器集合中converters.add(0,messageConverter);}Beanpublic 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();}
} 注意 Docket声明时指定的有一个包扫描的路径该路径指定的是Controller所在包的路径。因为Swagger在生成接口文档时就是根据这里指定的包路径自动的扫描该包下的Controller RestController RequestMapping等SpringMVC的注解依据这些注解来生成对应的接口文档。 3设置静态资源映射
由于Swagger生成的在线文档中涉及到很多静态资源这些静态资源需要添加静态资源映射否则接口文档页面无法访问。因此需要在 WebMvcConfig类中的addResourceHandlers方法中增加如下配置。
registry.addResourceHandler(doc.html).addResourceLocations(classpath:/META-INF/resources/);
registry.addResourceHandler(/webjars/**).addResourceLocations(classpath:/META-INF/resources/webjars/);
4在LoginCheckFilter中设置不需要处理的请求路径
需要将Swagger及Knife4j相关的静态资源直接放行无需登录即可访问否则我们就需要登录之后才可以访问接口文档的页面。
在原有的不需要处理的请求路径中再增加如下链接
/doc.html,
/webjars/**,
/swagger-resources,
/v2/api-docs
3. 查看接口文档
经过上面的集成配置之后我们的项目集成Swagger及Knife4j就已经完成了接下来我们可以重新启动项目访问接口文档访问链接为 http://localhost:8080/doc.html
我们可以看到在所有的Controller中提供的所有的业务增删改查的接口全部都已经自动生成了我们通过接口文档可以看到请求的url、请求方式、请求参数、请求实例、响应的参数响应的示例。 并且呢我们也可以通过这份在线的接口文档对接口进行测试。
注意 由于我们服务端的Controller中的业务增删改查的方法都是必须登录之后才可以访问的所以我们在测试时候也是需要先访问登录接口。登录完成之后我们可以再访问其他接口进行测试。
我们不仅可以在浏览器浏览生成的接口文档Knife4j还支持离线文档对接口文档进行下载支持下载的格式有markdown、html、word、openApi。
4. 常用注解
1问题说明
在上面我们直接访问Knife4j的接口文档页面可以查看到所有的接口文档信息但是我们发现这些接口文档分类及接口描述都是Controller的类名(驼峰命名转换而来)及方法名而且在接口文档中所有的请求参数响应数据都没有中文的描述并不知道里面参数的含义接口文档的可读性很差。
2注解介绍
为了解决上述的问题Swagger提供了很多的注解通过这些注解我们可以更好更清晰的描述我们的接口包含接口的请求参数、响应数据、数据模型等。核心的注解主要包含以下几个
注解位置说明Api类加载Controller类上,表示对类的说明ApiModel类(通常是实体类)描述实体类的作用ApiModelProperty属性描述实体类的属性ApiOperation方法说明方法的用途、作用ApiImplicitParams方法表示一组参数说明ApiImplicitParam方法用在ApiImplicitParams注解中指定一个请求参数的各个方面的属性
3注解测试
a. 实体类: 可以通过 ApiModel , ApiModelProperty 来描述实体类及属性 Data
ApiModel(套餐)
public class Setmeal implements Serializable {private static final long serialVersionUID 1L;ApiModelProperty(主键)private Long id;//分类idApiModelProperty(分类id)private Long categoryId;//套餐名称ApiModelProperty(套餐名称)private String name;//套餐价格ApiModelProperty(套餐价格)private BigDecimal price;//状态 0:停用 1:启用ApiModelProperty(状态)private Integer status;//编码ApiModelProperty(套餐编号)private String code;//描述信息ApiModelProperty(描述信息)private String description;//图片ApiModelProperty(图片)private String image;TableField(fill FieldFill.INSERT)private LocalDateTime createTime;TableField(fill FieldFill.INSERT_UPDATE)private LocalDateTime updateTime;TableField(fill FieldFill.INSERT)private Long createUser;TableField(fill FieldFill.INSERT_UPDATE)private Long updateUser;
}
b. 响应实体R:
Data
ApiModel(返回结果)
public class RT implements Serializable{ApiModelProperty(编码)private Integer code; //编码1成功0和其它数字为失败ApiModelProperty(错误信息)private String msg; //错误信息ApiModelProperty(数据)private T data; //数据ApiModelProperty(动态数据)private Map map new HashMap(); //动态数据//省略静态方法 ....
} c. Controller类及其中的方法: 描述Controller、方法及其方法参数可以通过注解 Api APIOperation ApiImplicitParams, ApiImplicitParam RestController
RequestMapping(/setmeal)
Slf4j
Api(tags 套餐相关接口)
public class SetmealController {Autowiredprivate SetmealService setmealService;Autowiredprivate CategoryService categoryService;Autowiredprivate SetmealDishService setmealDishService;/*** 新增套餐* param setmealDto* return*/PostMappingCacheEvict(value setmealCache,allEntries true)ApiOperation(value 新增套餐接口)public RString save(RequestBody SetmealDto setmealDto){log.info(套餐信息{},setmealDto);setmealService.saveWithDish(setmealDto);return R.success(新增套餐成功);}/*** 套餐分页查询* param page* param pageSize* param name* return*/GetMapping(/page)ApiOperation(value 套餐分页查询接口)ApiImplicitParams({ApiImplicitParam(name page,value 页码,required true),ApiImplicitParam(name pageSize,value 每页记录数,required true),ApiImplicitParam(name name,value 套餐名称,required false)})public RPage page(int page,int pageSize,String name){//分页构造器对象PageSetmeal pageInfo new Page(page,pageSize);PageSetmealDto dtoPage new Page();LambdaQueryWrapperSetmeal queryWrapper new LambdaQueryWrapper();//添加查询条件根据name进行like模糊查询queryWrapper.like(name ! null,Setmeal::getName,name);//添加排序条件根据更新时间降序排列queryWrapper.orderByDesc(Setmeal::getUpdateTime);setmealService.page(pageInfo,queryWrapper);//对象拷贝BeanUtils.copyProperties(pageInfo,dtoPage,records);ListSetmeal records pageInfo.getRecords();ListSetmealDto list records.stream().map((item) - {SetmealDto setmealDto new SetmealDto();//对象拷贝BeanUtils.copyProperties(item,setmealDto);//分类idLong categoryId item.getCategoryId();//根据分类id查询分类对象Category category categoryService.getById(categoryId);if(category ! null){//分类名称String categoryName category.getName();setmealDto.setCategoryName(categoryName);}return setmealDto;}).collect(Collectors.toList());dtoPage.setRecords(list);return R.success(dtoPage);}/*** 删除套餐* param ids* return*/DeleteMappingCacheEvict(value setmealCache,allEntries true)ApiOperation(value 套餐删除接口)public RString delete(RequestParam ListLong ids){log.info(ids:{},ids);setmealService.removeWithDish(ids);return R.success(套餐数据删除成功);}/*** 根据条件查询套餐数据* param setmeal* return*/GetMapping(/list)Cacheable(value setmealCache,key #setmeal.categoryId _ #setmeal.status)ApiOperation(value 套餐条件查询接口)public RListSetmeal list(Setmeal setmeal){LambdaQueryWrapperSetmeal queryWrapper new LambdaQueryWrapper();queryWrapper.eq(setmeal.getCategoryId() ! null,Setmeal::getCategoryId,setmeal.getCategoryId());queryWrapper.eq(setmeal.getStatus() ! null,Setmeal::getStatus,setmeal.getStatus());queryWrapper.orderByDesc(Setmeal::getUpdateTime);ListSetmeal list setmealService.list(queryWrapper);return R.success(list);}
}d. 重启服务测试:
我们上述通过Swagger的注解对实体类及实体类中的属性以及Controller和Controller的方法进行描述接下来我们重新启动服务然后看一下自动生成的接口文档有何变化。
在接口文档的页面中我们可以看到接口的中文描述清晰的看到每一个接口是做什么的接口方法参数什么含义参数是否是必填的响应结果的参数是什么含义等都可以清楚的描述出来。
总之我们要想清晰的描述一个接口就需要借助于Swagger给我们提供的注解。
