初識RAP(mack.JS簡單理解與應用)

今天和大家分享一個介面定製工具——RAP

初識RAP,便被齊折服,可視化數據和動態生成模擬數據方式,再通過一系列自動化工具,對前後端介面交互開發進行解耦,這無疑大幅提升前後端交互的的效率。

首先,說一下RAP的安裝步驟:

1、RAP的部署。

使用源碼自行編譯、開發後部署,需配置J2EE開發環境,Rap的github上提供了war包以及源碼的下載:github.com/thx/RAP/rele

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配置。


其次,說一下RAP的基本使用:

基本安裝後,登錄註冊新的RAP賬戶,根據流程註冊賬號便可進行mackData的操作。

RAP定製介面頁面

通過點擊修改實現介面的定製

  • 緩存:可以添加更新日誌,便於觀察,最終確定存儲使用
  • 秒存:立即存儲,一般使用為在、暫時性存儲

通過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查看)

  1. 備註添加實現默認數據修改:

    @mock=@Data(顯示當前時間)

    @mock=true(始終顯示為true,數據類型選擇boolean)

    @mock=title(顯示為title),

    @mock= function(){return 100 * Math.random()}
  2. 變數名添加:

    data|1-100(返回數據1-100之間)
  3. 發送和請求建立連接:

    @mock=${page == 1008(默認值, 默認為1)} ,

    function(){return ${page} + 8},

    {"arr|10},(現在數據類型為數組,則返回10個數組)

今天就先說道這,有個人見解的小夥伴請多多留言交流,共同在禿頂的道路上勇敢前行!


推薦閱讀:

前端日刊-2017.11.13
第二期 - 曲徑通幽
前端日刊-2017.12.3
Web前端工程師成長之路
奇舞周刊第 246 期: 無障礙設計 & 前端數據流哲學

TAG:數據 | 信息技術IT | 前端工程師 |