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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 2.1 前后台分离开发介绍在之前的课程中,我们介绍过,前端开发有2种方式:前后台混合开发和前后台分离开发。前后台混合开发,顾名思义就是前台后台代码混在一起开发,如下图所示:

2.1 前后台分离开发介绍

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

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

60023d3cba624417bbd00cda7dde4060.png

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


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


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


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


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


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

8b1495a62ea249e8b4999e22eb867ade.png

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


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

3d972e2d28044b9f8c2a71449f7aaea7.png

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


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


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


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


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

2.2 YAPI

2.2.1 YAPI介绍

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

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

YApi主要提供了2个功能:

  • API接口管理:根据需求撰写接口,包括接口的地址,参数,响应等等信息。
  • Mock服务:模拟真实接口,生成接口的模拟测试数据,用于前端的测试。

2.2.2 接口文档管理

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

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

5483f724b2d84046889f7be74ff97fa0.png

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


7a239437f337415fbad2def33e6a297f.png


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

9afd2aa79d6b4ef2825da7f0fff2259e.png


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

6a120385819f41f89ecebea347616642.png

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

f952725adeff45818b8c7402162f10cd.png

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

8aa9ef0f1b4f420fb21d38efea6e0e0e.png


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

29e4e923dfa5453a85d50db617ace0d8.png

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

7855d9985f4546a697f8b31fab66b77c.png

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

4aa4e5a3337a45908b8b83a5bad0211c.png

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

38c2ea742ce344129f16b696dc03ab7e.png


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

1b4b64c5f7bc45b98680762f1ef960a8.png

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

1a32292b24ff4377a7746fa1370a678c.png

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

相关文章
|
21天前
|
设计模式 Java 关系型数据库
【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析
本文是“Java学习路线”专栏的导航文章,目标是为Java初学者和初中高级工程师提供一套完整的Java学习路线。
176 37
|
6天前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
3天前
|
JSON JavaScript 前端开发
Javaweb中Vue指令的详细解析与应用
Vue指令提供了一种高效、声明式的编码方式,使得开发者可以更专注于数据和业务逻辑,而不是DOM操作的细节。通过熟练使用Vue指令,可以极大地提高开发效率和项目的可维护性。
10 3
|
9天前
|
JavaScript 前端开发 UED
Javaweb中Vue指令的详细解析与应用
Vue指令是Vue框架中非常强大的特性之一,它提供了一种简洁、高效的方式来增强HTML元素和组件的功能。通过合理使用这些指令,可以使你的JavaWeb应用更加响应用户的操作,提高交互性和用户体验。而且,通过创建自定义指令,你可以进一步扩展Vue的功能,使其更贴合你的应用需求。
11 1
|
1月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
17 1
|
1月前
|
自然语言处理 前端开发 JavaScript
Javaweb之javascript的详细解析
通过明确JavaScript的定位,掌握其核心概念和相关技术栈,在实现交互丰富的Web应用时,JavaScript就能够发挥它不可替代的作用。随着前后端分离趋势的推进,JavaScript在现代 Web 开发中变得更加重要,不仅限于传统的 JavaWeb 应用,而是广泛应用于各种类型的前端项目。
15 0
|
1月前
|
JavaScript 前端开发 API
探索移动应用的世界:从开发到操作系统的深入解析
【8月更文挑战第31天】本文将带你走进移动应用的世界,从开发到操作系统,深入探讨移动应用的开发过程、移动操作系统的工作原理以及它们之间的交互。我们将通过代码示例,让你更好地理解移动应用的开发和运行机制。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和知识。
|
1月前
|
图形学 iOS开发 Android开发
从Unity开发到移动平台制胜攻略:全面解析iOS与Android应用发布流程,助你轻松掌握跨平台发布技巧,打造爆款手游不是梦——性能优化、广告集成与内购设置全包含
【8月更文挑战第31天】本书详细介绍了如何在Unity中设置项目以适应移动设备,涵盖性能优化、集成广告及内购功能等关键步骤。通过具体示例和代码片段,指导读者完成iOS和Android应用的打包与发布,确保应用顺利上线并获得成功。无论是性能调整还是平台特定的操作,本书均提供了全面的解决方案。
111 0
|
2月前
|
区块链 C# 存储
链动未来:WPF与区块链的创新融合——从智能合约到去中心化应用,全方位解析开发安全可靠DApp的最佳路径
【8月更文挑战第31天】本文以问答形式详细介绍了区块链技术的特点及其在Windows Presentation Foundation(WPF)中的集成方法。通过示例代码展示了如何选择合适的区块链平台、创建智能合约,并在WPF应用中与其交互,实现安全可靠的消息存储和检索功能。希望这能为WPF开发者提供区块链技术应用的参考与灵感。
46 0
|
2月前
|
开发者 C# Windows
WPF与游戏开发:当桌面应用遇见游戏梦想——利用Windows Presentation Foundation打造属于你的2D游戏世界,从环境搭建到代码实践全面解析新兴开发路径
【8月更文挑战第31天】随着游戏开发技术的进步,WPF作为.NET Framework的一部分,凭借其图形渲染能力和灵活的UI设计,成为桌面游戏开发的新选择。本文通过技术综述和示例代码,介绍如何利用WPF进行游戏开发。首先确保安装最新版Visual Studio并创建WPF项目。接着,通过XAML设计游戏界面,并在C#中实现游戏逻辑,如玩家控制和障碍物碰撞检测。示例展示了创建基本2D游戏的过程,包括角色移动和碰撞处理。通过本文,WPF开发者可更好地理解并应用游戏开发技术,创造吸引人的桌面游戏。
98 0

热门文章

最新文章

推荐镜像

更多
下一篇
无影云桌面