初識RAP(mack.JS簡單理解與應用)
今天和大家分享一個介面定製工具——RAP
初識RAP,便被齊折服,可視化數據和動態生成模擬數據方式,再通過一系列自動化工具,對前後端介面交互開發進行解耦,這無疑大幅提升前後端交互的的效率。
首先,說一下RAP的安裝步驟:
1、RAP的部署。
使用源碼自行編譯、開發後部署,需配置J2EE開發環境,Rap的github上提供了war包以及源碼的下載:https://github.com/thx/RAP/releases2、配置環境。
- 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配置。
其次,說一下RAP的基本使用:
基本安裝後,登錄註冊新的RAP賬戶,根據流程註冊賬號便可進行mackData的操作。
通過點擊修改實現介面的定製
- 緩存:可以添加更新日誌,便於觀察,最終確定存儲使用
- 秒存:立即存儲,一般使用為在、暫時性存儲
通過CTRL+F或者移動/複製介面可實現數據的快速拷貝和遷移,擇數組類型,則可通過+實現內部數據的添加,通過點擊模塊名後的播放按鈕可實現介面的在線測試(如下圖),
那麼現在的你一定會想怎樣把這些模擬數據應用到項目內部,其實很簡單:
<!--首先引入鏈接,mode控制訪問許可權0,1,2,3,4--><script src="http://rap.so315.cn/rap.plugin.js?projectId=3&mode=0"></script><!--通過ajax獲取--><script> $.ajax({ url: , data: , success(res) { console.log(res) } })</script>
或者直接在url請求mock數據的地址(如下圖):
最後,再說一下RAP的點睛之筆——mackJS
它的存在的使得RAP的使用更加靈活,接下來簡單介紹一下基本使用(有興趣的夥伴們可以登錄官網:thx/RAP查看)
- 備註添加實現默認數據修改: @mock=@Data(顯示當前時間)@mock=true(始終顯示為true,數據類型選擇boolean)@mock=title(顯示為title),@mock= function(){return 100 * Math.random()}
- 變數名添加: data|1-100(返回數據1-100之間)
- 發送和請求建立連接:@mock=${page == 1008(默認值, 默認為1)} ,function(){return ${page} + 8},{"arr|10},(現在數據類型為數組,則返回10個數組)
今天就先說道這,有個人見解的小夥伴請多多留言交流,共同在禿頂的道路上勇敢前行!
推薦閱讀:
※前端日刊-2017.11.13
※第二期 - 曲徑通幽
※前端日刊-2017.12.3
※Web前端工程師成長之路
※奇舞周刊第 246 期: 無障礙設計 & 前端數據流哲學