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.pswp.cn/news/165244.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165244.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165244.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

守護進程的理解

什么是守護進程 daemon False # 是否以守護進程方式運行,True守護,False 非守護 在這段代碼中,daemon 變量的值決定了進程是否以守護進程方式運行。如果 daemon 的值為 True,則表示進程將以守護進程方式運行,否則為…

使用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…

Failed to resolve import “@/..“ from “src/...“ @找不到路徑

安裝path npm install --save-dev types/node再修改 vite.config.ts 中的配置即可 import { defineConfig } from "vite" import react from "vitejs/plugin-react"import path from "path" // 需安裝此模塊// https://vitejs.dev/config/ expo…

設備健康管理平臺助力鋰電企業實現可持續發展

隨著鋰電池產業的快速發展,設備的穩定運行和精準維護對于鋰電企業來說至關重要。傳統的設備維護方式在效率和全面性方面存在局限,無法滿足鋰電行業對設備管理的需求。然而,通過設備健康管理平臺的引入,鋰電企業現在可以充分發揮其…

XSLVGL2.0 User Manual 頁面管理器(v2.0)

XSLVGL2.0 開發手冊 XSLVGL2.0 User Manual 頁面管理器 1、概述2、特性3、APIs3.1、xs_page_init3.2、xs_page_wait_inited3.3、xs_page_exit3.4、xs_page_acquire3.5、xs_page_release3.6、xs_page_set_bootlogo3.7、xs_page_setup_clear_finish3.8、xs_page_setup_is_finish…

【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;…