前後端介面聯調
原創作者：政宇@招聘技術 58招聘技術團隊
一、概述
RAP是一個視覺化介面管理工具 通過分析介面結構，動態生成模擬資料，校驗真實介面正確性， 圍繞介面定義，通過一系列自動化工具，對前後端介面互動開發進行解耦，以提升協作效率。
二、RAP的基本安裝與使用
首先，我們將簡單介紹一下RAP的安裝與使用。
1、RAP的部署。
部署方式有兩種：
①、使用編譯好的war包部署
適合僅想部署RAP服務，不需開發定製功能的同學
②、使用原始碼自行編譯、開發後部署
需配置J2EE開發環境， 適合想要研究RAP原始碼，開發定製功能的同學
Rap的github上提供了war包以及原始碼的下載：https://github.com/thx/RAP/releases
2、配置環境。
①、JDK1.8+
②、MySQL 5.6.12+
③、Tomcat 8.*+
④、Redis 3.0+ 部署在本機，預設埠即可。
3、初始化資料庫。
需要執行release分支下的SQL指令碼： /src/main/resources/database/initialize.sql，該指令碼中包含資料庫建立、表&結構建立、必要的初始資料建立的全部內容。
4、配置資料庫、Redis
修改src/config.properties 中的配置內容，將其改為正確的資料庫以及Redis配置。下圖是config.properties的配置內容。
我們在自己的伺服器上部署了自己的rap服務，具體的更詳細部署步驟可以參照RAP專案wiki：https://github.com/thx/RAP/wiki/deploy_manual_cn(部門內部的rap地址是：http://10.48.184.39:3478/)
5、RAP的基本使用
RAP服務搭建完成之後，我們就可以開始RAP的使用了。
上圖是進入到rap的首頁面，點選註冊登入之後將進入到我的主頁。進入到我的主頁之後可以開始檢視或者建立我們的專案：
建立完專案之後，就進入到我們的介面定義的介面了。
點選新增介面後，我們定義了一個介面：api/helloworld。返回的物件是一個json的字串
接下來我們將定義我們的請求引數和返回引數：
這裡我們的請求URL為api/helloworld?name=劉備.返回的資料格式為：
在編輯相應引數列表的時候，我們可以手動的新增引數，也可以直接點選匯入json將上圖中json直接匯入生成相應的引數。引數列表定義完了之後就可以開始來訪問我們的介面了。
點選上圖中的模組頁面按鈕，將進入到頁面的控制檯，我們輸入請求的引數將會獲取到該介面返回的資料。如下圖的右邊所示，這就是我們的請求URL。http://10.48.184.39:3478/mockjs/1/api/helloworld?name=%E5%88%98%E5%A4%87
該URL返回的是mock資料的模板，我們需要將上面的URL中mockjs改為mockjsdata就可以將模板資料渲染成我們要的介面資料。http://10.48.184.39:3478/mockjsdata/1/api/helloworld?name=%E5%88%98%E5%A4%87
前臺就可以根據上面的URL來進行發起請求。另外，也可以通過配置mock外掛，使用相對路徑來訪問請求介面。
在模組頁面中點選配置選項，會開啟一個FE工具箱頁面，將其中的外掛程式碼拷貝到我們需要進行呼叫介面的頁面。
下圖是一個簡單的頁面，通過jquery請求介面資料。只需要在jquery.js引用的後面加上外掛程式碼，我們就可以按照相對路徑的請求方式來獲取到我們介面的資料了。當我們的前端需要與後端進行介面對接時，只需要註釋掉該mock外掛程式碼即可。
另外如果我們需要跨域來使用mock介面，那麼我們就需要使用jsonp的方式來發起請求,下圖示例是jsonp的一個介面rap設定。
在上圖中，我們可以看到，只需要設定請求引數為[callback]，[callback]表示的是傳過來的請求引數是一個函式名。在我們前端請求時按照正常的jsonp的請求方式即可。
三、高階功能案例介紹
接下來我們以一個實際業務場景來介紹RAP的一些高階功能。
業務場景：通過傳入商品型別、城市ID、排期類別來查詢在一年之內的排期時間。
下圖是我們定義的介面格式，該介面以陣列的形式返回排期時間。
接下來將定義傳入引數和返回引數，該定義如下圖所示：
在模擬資料的時候RAP會使用到Mock.js的語法，這裡我們簡單的介紹一下相關語法。在介面返回的資料中，我們需要返回下圖所示的一個數組：
引數begin和end需要表示的是該排期一個時間段的開始時間和結束時間，備註後面的@[email protected](yyyy年MM月dd)表示的是隨機的一個時間。
timeState表示的是該時間段是否被佔用，1代表被佔用，0代表不被佔用。語法是：timeState|1 ,@mock=[1,0]；這裡表示的意思是timeState會從後面的集合[1,0]中隨機選取一個數來表示。
week 則表示當前時間段是屬於該年的第幾周；由於一年有52周，這裡用到隨機數來表示：week|1-52,表示的week的取值是從1到52之間隨機選取。
year 年份我們這裡選取了一個固定值 ：@mock=2017。
點選介面詳情旁邊的Mock資料，就可以看到模擬後的資料了，接著按照前面的介紹使用該介面即可。下圖是模擬後的資料：
更多詳細Mock.js的介紹可以參考Mock.js的官網:http://mockjs.com/.
四、api介面匯出
敏捷宣言中：可以工作的軟體勝過面面俱到的文件。RAP 提供了api介面匯出以及專案配置匯出、匯入功能。極大降低了介面維護成本，可以說RAP的介面配置就是介面設計文件。
五、相關資料
通過以上的介紹，想必大家對Rap會有一個基本的瞭解，下面是Rap相關的一些學習的資料連結，如果想更深入的瞭解 Rap，可以參考這些資料來學習。
參考文章[Mock.js 官網]：http://mockjs.com/.[RAP wiki ] : https://github.com/thx/RAP/wiki[RAP 學習視訊] ： http://thx.github.io/RAP/study.htm
相關推薦
深入淺出：瞭解前後端分離優勢、前後端介面聯調以及優化問題
目錄： 1. 專案有前後端分離和前後端不分離； 2. 前後端介面聯調； 3.前端效能優化 ； 4.前端安全問題； 一、專案有前後端分離和前後端不分離： 在前後端不分離架構中，所有的靜態資源和業務程式碼統一部署在同一臺伺服器上。伺服器接收到
react 前後端介面聯調有關proxy設定、網路請求axios外掛的使用以及fetch 外掛的使用
使用creat-react-app構建的專案，前後端的介面聯調，對於埠proxy設定、網路請求axios外掛的使用以及fetch 外掛的使用 1、proxy設定 可以直接在package.json下配置，具體如下 "proxy": "域名"
前後端介面聯調
原創作者：政宇@招聘技術 58招聘技術團隊一、概述RAP是一個視覺化介面管理工具 通過分析介面結構，動態生成模擬資料，校驗真實介面正確性， 圍繞介面定義，通過一系列自動化工具，對前後端介面互動開發進行解耦，以提升協作效率。二、RAP的基本安裝與使用首先，我們將簡單介紹一下RAP的安裝與使用。1、RAP的部署。
vue中用mock資料模擬前後端介面
vue框架中實現mock資料模擬後端介面-提高開發效率 1，npm安裝mockjs npm install mock.js 2,src目錄下新建mock資料夾-新建index.js import Mock from 'mockjs'; const u
RAP一種更高效的前後端介面對接解決方案
RAP一種更高效的前後端介面對接解決方案 Rico_wang 關注 2017.11.28 21:58* 字數 1448 閱讀 14348評論 12喜歡 14 我在向小夥伴推薦RAP的時候，有的小夥伴會覺得這個是個玩好意，幫助很大，而另一部
在滴滴雲上使用 Easy-Mock 進行前後端資料聯調
Why Easy Mock 前後端分離開發模式是目前常見的一種開發方式，雙方在約定開發介面時，常見的約定方式一般有 Wiki 或 Markdown 文件約定，而請求的模擬資料則常常直接寫在程式碼裡，到聯調時再更新介面請求 URL。或者利用 Charles、Fiddler 等代理工具攔截請
jfinal+Swagger輕鬆配置前後端介面文件
開發過程中介面文件是一個剛需，開始的時候，我是手寫word文件，寫著寫著發現越到後面越難以進行，於是接觸到了swagger這個神器，這裡簡單記錄一下，踩坑過程。使用的框架是Jfinal框架，jfinal社群已經有jfinal-swagger專案
從壹開始 [ Ids4實戰 ] 之四 ║ 使用者資料管理 & 前後端授權聯調
前言 哈嘍~~~ 大家週一好！夏天到了，大家舒服了沒有，熟話說，打敗你的不是天真，是天真熱！
SpringBoot系列之前後端介面安全技術JWT
@[TOC](SpringBoot系列之前後端介面安全技術JWT) ## 1. 什麼是JWT? [JWT](https://jwt.io/introduction/)的全稱為Json Web Token (JWT)，是目前最流行的跨域認證解決方案，是在網路應用環境間傳遞宣告而執行的一種基於JSON的開放標準
Mockjs--前後端分離，模擬介面
什麼是Mockjs Mock.js官方網址： 首頁：http://mockjs.com/ 在Mockjs的官網中，就直接能看到這樣的一句話：生成隨機資料，攔截Ajax請求。 這句話集中體現了Mock.js能夠幹什麼！ Mockjs的使用場景 如今，前端所承載的東西越來越多，前
前端分頁神器，jquery grid的使用（前後端聯調），讓分頁變得更簡單。
jquery grid 是一款非常好用的前端分頁外掛，下面來講講怎麼使用。 首先需要引入jquery grid 的CSS和JS （我們使用的是bootstrap的樣式） 下面我們通過一個例子來講解，需求是：查詢使用者列表（支援分頁功能）。 一、前端 htm
前後端分離之介面定義滯後帶來的問題
前言： 目前正參與我司一個後臺管理型專案，我司採取的是前後端分離開發，後端採用dubbo框架提供介面，前端整合egg.js和dubbo.js；各司其職，我和一道友專門負責前端伺服器整個模組，伺服器搭建探索過程費了點時間（也不太多），然後就前端頁面的排期，給我的模組排了
前後端聯調中URLEncoder.encode空格問題
最近在前後端聯調中，前端使用js的 encodeURIComponent("中國人 好樣的"); 而如果中間出現空格，那麼會將空格轉為%2B， 後端使用java的 URLEncoder.encode("中國人
前後端分離，如何防止介面被其他人呼叫或惡意重發
前後端分離，如何防止介面被其他人呼叫或惡意重發？ 首先，http協議的無狀態特性決定了是無法徹底避免第三方呼叫你的後臺服務。我們可以通過crsf、介面呼叫頻率、使用者行為分析(來源等)等各個方面來增加第三方呼叫的難度，也可以通過新增一箇中間層比如node.js來實現；1. 非法訪問通常使用認證來解決，方法很
使用beego與mysql開發web前後端分離的後臺API介面
開發環境：ubuntu18.04 文章目錄 1、安裝go並設定環境變數 2、安裝mysql 2.1、重置mysql的密碼為root【根據需要修改】 方法1： 方法2：
某小公司RESTful、共用介面、前後端分離、介面約定的實踐
前言 隨著網際網路高速發展，公司對專案開發週期不斷縮短，我們面對各種需求，使用原有對接方式，各端已經很難快速應對各種需求，更難以提高效率。於是，我們不得不重新制定對接規範、開發邏輯以便快速上線專案。 我們的目標 儘可能的縮小溝通的成本，開最少的會
從壹開始前後端分離【 .NET Core2.0 +Vue2.0 】框架之九 || 依賴注入IoC學習 + AOP介面程式設計初探
更新 1、感謝@博友的提醒，目前是vue-cli腳手架是3.0.1，vue的版本還是2.5.17，下文已改，感謝糾錯！ 3、感謝網友@ 的提醒，大家下載程式碼以後，如果自己要配置Repository.dll 和 service.dll 這兩個dll內容，比如修改 repository.dll 的資
前後端分離：前端人員做頁面與渲染，後端做介面
用到的技術： 1.nginx 關鍵，反向代理請求 2.Ajax 請求介面載入內容 3.Json 4.AngularJS 模組化開發，非必要 流程 Nginx 關鍵配置 location /lorenzo/api {
windows本地使用Nginx反向代理解決前後端聯調的跨域訪問
第一種使用Nginx 1、首先在服務端所在的電腦安裝Windows版本的Nginx http://nginx.org/en/download.html （只能在本地搭建Nginx伺服器，雲伺服器搭建不可以訪問本地，本地沒有外網地址，百度輸入ip地址顯示的本機我這裡也不行