Javaweb之前后台分离开发介绍的详细解析

2.1 前后台分离开发介绍

在之前的课程中,我们介绍过,前端开发有2种方式:前后台混合开发前后台分离开发

前后台混合开发,顾名思义就是前台后台代码混在一起开发,如下图所示:

这种开发模式有如下缺点:

  • 沟通成本高:后台人员发现前端有问题,需要找前端人员修改,前端修改成功,再交给后台人员使用

  • 分工不明确:后台开发人员需要开发后台代码,也需要开发部分前端代码。很难培养专业人才

  • 不便管理:所有的代码都在一个工程中

  • 不便维护和扩展:前端代码更新,和后台无关,但是需要整个工程包括后台一起重新打包部署。

所以我们目前基本都是采用的前后台分离开发方式,如下图所示:

我们将原先的工程分为前端工程和后端工程这2个工程,然后前端工程交给专业的前端人员开发,后端工程交给专业的后端人员开发。前端页面需要数据,可以通过发送异步请求,从后台工程获取。但是,我们前后台是分开来开发的,那么前端人员怎么知道后台返回数据的格式呢?后端人员开发,怎么知道前端人员需要的数据格式呢?所以针对这个问题,我们前后台统一指定一套规范!我们前后台开发人员都需要遵循这套规范开发,这就是我们的接口文档。接口文档有离线版和在线版本,接口文档示可以查询今天提供资料/接口文档示例里面的资料。那么接口文档的内容怎么来的呢?是我们后台开发者根据产品经理提供的产品原型和需求文档所撰写出来的,产品原型示例可以参考今天提供资料/页面原型里面的资料。

那么基于前后台分离开发的模式下,我们后台开发者开发一个功能的具体流程如何呢?如下图所示:

  1. 需求分析:首先我们需要阅读需求文档,分析需求,理解需求。

  2. 接口定义:查询接口文档中关于需求的接口的定义,包括地址,参数,响应数据类型等等

  3. 前后台并行开发:各自按照接口文档进行开发,实现需求

  4. 测试:前后台开发完了,各自按照接口文档进行测试

  5. 前后段联调测试:前段工程请求后端工程,测试功能

2.2 YAPI

2.2.1 YAPI介绍

前后台分离开发中,我们前后台开发人员都需要遵循接口文档,所以接下来我们介绍一款撰写接口文档的平台。

YApi 是高效、易用、功能强大的 api 管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。

其官网地址:http://yapi.smart-xwork.cn/

YApi主要提供了2个功能:

  • API接口管理:根据需求撰写接口,包括接口的地址,参数,响应等等信息。

  • Mock服务:模拟真实接口,生成接口的模拟测试数据,用于前端的测试。

2.2.2 接口文档管理

接下来我们演示一下YApi是如何管理接口文档的。

首先我们登录YAPI的官网,然后使用github或者百度账号登录,没有的话去注册一个,如下图所示:

登录进去后,在个人空间中,选择项目列表->添加测试项目,效果如图所示:

然后点击创建的项目,进入到项目中,紧接着先添加接口的分类,如下图所示

然后我们选择当前创建的分类,创建接口信息,如下图所示:

紧接着,我们来到接口的编辑界面,对接口做生层次的定制,例如:接口的参数,接口的返回值等等,效果图下图所示:

添加接口的请求参数,如下图所示:

添加接口的返回值,如下图所示:

然后保存上述设置,紧接着我们可以来到接口的预览界面,查询接口的信息,其效果如下图所示:篇幅有限,只截取部分

最后,我们还可以设置接口的mock信息,

来到接口的Mock设置窗口,如下图所示:

紧接着我们来到接口的预览界面,直接点击Mock地址,如下图所示:

我们发现浏览器直接打开,并返回如下数据:

如上步骤就是YAPI接口平台中对于接口的配置步骤。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/165244.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用vcpkg安装库失败的解决方法

1、前言 vcpk是是一款开源的c/c库管理工具,尤其是在windows平台,可以帮助我们很好的管理各种依赖包。 在windows环境做c/c开发的人应该都深有体会,有时候编译需要下载一堆依赖库,导致搭建编译环境特别麻烦。但是,通过v…

前端 vue 面试题(二)

文章目录 如何让vue页面重新渲染组件间通信vue为什么要mutation、 action操作插槽、具名插槽、作用域插槽vue编译使用的是什么库?vue怎么实现treeshakingwebpack实现treeshaking为什么只有es module 能支持 tree shaking mixin 的作用mixin的底层原理nexTick原理vue…

预处理机制

跟着肯哥(不是我)学预处理机制 预处理类别 宏定义:#define 将文本替换为表达式或语句 条件编译:#ifdef、#ifndef和#if、#elif、#endif 根据标识符是否被定义选择编译代码 头文件包含:#include 将其他文件&#x…

Jmeter怎么实现接口关联?

用于接口测试时,后一个接口经常需要用到前一次接口返回的结果,应该如何获取前一次请求的结果值,应用于后一个接口呢,拿一个登录的例子来说明如何获取。 1、打开jmeter,新建一个测试计划,在测试计划里新建一…

将所有图片居中对齐

Ctrl h 调出替换框 ^g表示所有图片 格式里面选择段落 全部替换

winlogbeat采集windows日志

下载链接 https://www.elastic.co/cn/downloads/past-releases/winlogbeat-7-16-2 配置文件 # ---------------------------- Elasticsearch Output ---------------------------- output.elasticsearch:# Array of hosts to connect to.hosts: ["192.168.227.160:9200&…

Vue3中如何响应式解构 props

目录 1,前言2,解决2.1,利用插件,实现编译时转换2.2,toRef 和 toRefs 1,前言 Vue3 中为了保持响应性,始终需要以 props.x 的方式访问这些 prop。这意味着不能够解构 defineProps 的返回值&#…

Navicat 技术指引 | 适用于 GaussDB 的数据迁移工具

Navicat Premium(16.2.8 Windows版或以上) 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结构同步、协同合作、数据迁移等),这…

Cesium 展示——地球以及渲染数据导出(下载)为图片或 pdf

文章目录 需求分析新加需求分析第一种方式第二种方式需求 将 Cesium 球体以及渲染数据导出为 jpg/png/pdf 分析 获取场景 scene 信息,转为image 的 octet-stream 流 进行下载为图片 /*** @todo canvas 导出图片* @param {string} dataurl - 地址* @return {Blob}*/ functio…

设备健康管理平台助力锂电企业实现可持续发展

随着锂电池产业的快速发展,设备的稳定运行和精准维护对于锂电企业来说至关重要。传统的设备维护方式在效率和全面性方面存在局限,无法满足锂电行业对设备管理的需求。然而,通过设备健康管理平台的引入,锂电企业现在可以充分发挥其…

【LeetCode:1410. HTML 实体解析器 | 模拟+哈希表+字符串+库函数】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

【C语言】中,输入一个数组,实现将输入的n个数字按照从大到小的顺序输出。【通俗简单易懂】

本篇文章中,我们将讲述在C语言中,输入一个数组,如何用for循环实现将输入的n个数字按照从大到小输出。 一.定义数组并初始化 首先,我们定义一个整形的数组并将其初始化。输入n,来决定数组中整数的个数。 然后用for循…

通过HTML网页对mysql数据库进行增删改查(CRUD实例)

首先我们得了解一下大致的架构 ,如下: 我们采用自底向上的方式进行开发, 一、先写mysql数据库 二、再写java后端(Spring MVC架构)(这个是什么东西不懂不要紧,跟着步骤做就行了) 三、最后写前端页面(HTML) 一、 Mysql数据库部分 我们要通过网页对数据库进行开发,…

解决:Gitee + PicGo配置图床失败

解决:Gitee PicGo配置图床失败 PicGo安装插件的时候选择:gitee-uploader,不要选择gitee! 在Gitee新建的图床仓库中设置一个images文件夹,用来保存上传的图片,但是要注意在PicGo中的path中要写上路径/img…

数据库基础入门 — SQL运算符

我是南城余!阿里云开发者平台专家博士证书获得者! 欢迎关注我的博客!一同成长! 一名从事运维开发的worker,记录分享学习。 专注于AI,运维开发,windows Linux 系统领域的分享! 本…

linux的基础命令

文章目录 linux的基础命令一、linux的目录结构(一)Linux路径的描述方式 二、Linux命令入门(一)Linux命令基础格式 三、ls命令(一)HOME目录和工作目录(二)ls命令的参数1.ls命令的-a选…

基于yolov2深度学习网络的喝水行为检测系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、YOLOv2网络原理 4.2、基于YOLOv2的喝水行为检测 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 clc; clear; close all; warning off;…

PPT思维导图怎么做?这2个思维导图工具墙裂推荐!

在日常学习和工作中,我们常常会面临需要处理大量信息的情况,这时候,一种叫做思维导图的工具可能会成为你的救星。 不同于传统的线性记录方式,思维导图以其独特的视觉表现力和结构化的信息处理方式,使得人们能够更加有…

Flutter学习(四)如何取消listview的越界效果

背景 在flutter的开发过程中,ListView是很常见的一个组件,但是,由于ListView的某些自带的体验,导致不太好的用户体验。例如ListView中,滑动到顶部或者底部的时候,再次滑动,会有越界的效果&…

2023年亚太地区数学建模大赛 问题A

采果机器人的图像识别技术 中国是世界上最大的苹果生产国,年产量约为3500万吨。与此同时,中国也是世界上最大的苹果出口国,全球每两个苹果中就有一个,全球超过六分之一的苹果出口自中国。中国提出了一带一路倡议(BRI&…