-
-
Yapi
-
Swagger
-
项目部署
在项目中,前端代码和后端代码混合在一起,是存在问题的,存在什么问题呢?
1). 开发人员同时负责前端和后端代码开发,分工不明确
2). 开发效率低
3). 前后端代码混合在一个工程中,不便于管理
4). 对开发人员要求高(既会前端,又会后端),人员招聘困难
为了解决上述提到的问题,现在比较主流的开发方式,就是前后端分离开发,前端人员开发前端的代码,后端开发人员开发服务端的业务功能,分工明确,各司其职。我们本章节,就是需要将之前的项目进行优化改造,变成前后端分离开发的项目。
前后端分离开发,就是在项目开发过程中,对于前端代码的开发由专门的前端开发人员负责,后端代码则由后端开发人员负责,这样可以做到分工明确、各司其职,提高开发效率,前后端代码并行开发,可以加快项目开发进度。
目前,前后端分离开发方式已经被越来越多的公司所采用,成为当前项目开发的主流开发方式。
前后端分离之后,不仅工程结构变化,后期项目上线部署时,与之前也不同:
前后端分离开发后,面临一个问题,就是前端开发人员和后端开发人员如何进行配合来共同开发一个项目?可以按照如下流程进行
2). 前后端并行开发: 依据定义好的接口信息,前端人员开发前端的代码,服务端人员开发服务端的接口; 在开发中前后端都需要进行测试,后端需要通过对应的工具来进行接口的测试,前端需要根据接口定义的参数进行Mock数据模拟测试。
3). 联调: 当前后端都开发完毕并且自测通过之后,就可以进行前后端的联调测试了,在这一阶段主要就是校验接口的参数格式。
4). 提测: 前后端联调测试通过之后,就可以将项目部署到测试服务器,进行自动化测试了。
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模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
2.1 介绍
YApi让接口开发更简单高效,让接口的管理更具可读性、可维护性,让团队协作更合理。
官方文档: https://hellosean1025.github.io/yapi/
要使用YApi,项目组需要自己进行部署,在本项目中我们可以使用课程提供的平台进行测试,域名: https://mock-java.itheima.net/
2.2.1 准备
注册账号,登录平台
登录到Yapi平台之后,我们可以创建项目,在项目下创建接口分类,在对应的分类中添加接口。
1). 创建项目
在当前项目中,有针对于员工、菜品、套餐、订单的操作,我们在进行接口维护时,可以针对接口进行分类,如果没有对应的分类,我们自己添加分类。
接口基本信息录入之后,添加提交,就可以看到该接口的基本信息:
Yapi也提供了接口测试功能,当我们接口编辑完毕后,后端服务的代码开发完毕,启动服务,就可以使用Yapi进行接口测试了。
注意:如果有些接口,是需要登录后才可以访问的,所以在测试该接口时,需要先请登录接口,登录完成后,再访问该接口
在Yapi平台中,将接口文档定义好了之后,前后端开发人员就需要根据接口文档中关于接口的描述进行前端和后端功能的开发。
在Yapi平台中我们不仅可以在线阅读文档,还可以将Yapi中维护的文档直接导出来,可以导出md,json,html格式,在导出时自行选择即可 。
而在导出的html文件或md文件中,主要描述的就是接口的基本信息, 包括: 请求路径、请求方式、接口描述、请求参数、返回数据等信息。展示形式如下:
上述我们讲解了接口文档的导出,我们也可以将外部的接口文档导入到Yapi的平台中,这样我们就不用一个接口一个接口的添加了。我们可以将自己准备好的
的json格式的接口文档直接导入Yapi平台中来。
导入过程中出现的确认弹窗,选择"确认"
导入成功之后,我们就可以在Yapi平台查看到已导入的接口。
3.1 介绍
A. 使得前后端分离开发更加方便,有利于团队协作
B. 接口文档在线自动生成,降低后端开发人员编写接口文档的负担
C. 接口功能测试
使用Swagger只需要按照它的规范去定义接口及接口相关的信息,再通过Swagger衍生出来的一系列项目和工具,就可以做到生成各种格式的接口文档,以及在线接口调试页面等等。
直接使用Swagger, 需要按照Swagger的规范定义接口, 实际上就是编写Json文件,编写起来比较繁琐、并不方便, 。而在项目中使用,我们一般会选择一些现成的框架来简化文档的编写,而这些框架是基于Swagger的,如knife4j。knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案。而我们要使用kinfe4j,需要在pom.xml中引入如下依赖即可:
<dependency> <groupId>com.github.xiaoymingroupId> <artifactId>knife4j-spring-boot-starterartifactId> <version>3.0.2version> dependency>
接下来,我们就将我们的项目集成Knife4j,来自动生成接口文档。这里我们还是需要再创建一个新的分支v1.2,在该分支中进行knife4j的集成,集成测试完毕之后,没有问题,我们再将v1.2分支合并到master。
使用knife4j,主要需要操作以下几步:
1). 导入knife4j的maven坐标
-
在本文,我们将以一个可执行文件的压缩过程为例,详细讲解我在过去的两天之中时如何对它进行加壳的。就像是 ... [详细]先说应用场景,比如说前台传来一个参数,我们肯定得在后台判断一下,比如id不能为空了,电话号码不能少于11位了等等。如果在service层一个一个判断岂不是要累死个人。代码也不简洁,这时候我们肯定会想到 ... [详细]spring:1.pom.xml中的文件配置org.springframework ... [详细]SSM(spring、SpringMVC和M ... [详细]作者:Confach发表于2006-04-2821:49版权信息:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息.http:www.cnblogs.comconf ... [详细]这其实很简单就可以实现,只需要自定义一个View继承自HorizontalScrollView1,新建一个项目,再新建一个MySlideMenu继承HorizontalScroll ... [详细]本文为原创,如需转载,请注明作者和出处,谢谢!本系列教程使用的软件版本如下:Eclipse:3. ... [详细]二、集成开发环境的重要特性本章描述了Eclipse中的几个重要特性和一个对开发安卓应用有用的 ... [详细]漏洞简介受影响的BitbucketServer和DataCenter版本存在使用环境变量的命令注入漏洞,具有控制其用户名权限的攻击者可以在系统上执行任意命令。影响 ... [详细]web项目启动经过如下步骤。1.项目启动,加载依赖的jar包。2.web容器(tomcat)先提供一个全局上下文ServletCont ... [详细]文章目录1.确定接口2.创建提供者2.1pom配置2.2dubbo配置文件2.3application.properties2.4mybatis相关2.4.1配置UserMappe ... [详细]为什么是SpringBoot因为目前开发WEB应用,SpringBoot是启动Spring项目最快最流行的方式了。无论我们要构建一个什么样的应用,它都可 ... [详细]项目组成TomcatWeb应用服务器:Tomcat.Jboos,Weblogic,JettyTomcat作用:将写好的程序放到Tomcat里ÿ ... [详细]Tags | 热门标签RankList | 热门文章
- 1读《深入理解Java虚拟机》笔记(一)Jvm的内存区域
- 2hdu 5514 Frogs(容斥)
- 3vs启动进程设置环境变量
- 4html的input边框file,type=file的input框样式应该如何操作
- 5Codeforces Round #296 (Div. 2) A, B, C, D
- 6常用的系统层性能指标参考标准
- 7优酷上传的视频能不能设置私密?
- 8[转帖]电源ac和dc有什么区别_dc ac分别代表什么
- 9eclipseAn internal error occurred during: Running Android Lint
- 10C++类对象模型之内存布局
- 11tip8:CentOS8安装ftp服务器
- 12认识axure组件区域
- 13Spring bean的初始化及销毁
- 14谓词 过滤
- 15计算机体系结构基于硬件的动态预测