puer工具的使用

在項目開發的過程中，總會有前端開發快完成，後端接口卻遲遲提供不了的狀況。此時爲了避免影響前端開發的進度，咱們能夠藉助puer來模擬後端接口測試。簡單的說，puer就是一個能夠實時刷新的前端服務器。具體關於puer的介紹能夠參考這篇文章：http://leeluolee.github.io/2014/10/24/use-puer-helpus-developer-frontend/

 

1.先安裝nodeJS

 

2.安裝puer

npm install puer -g

 

3.puer命令介紹

Usage:   puer [options...]

Options:

  -p,--port       server's listen port, 8000 default，可以使用這個命令修改端口，比較經常使用

  -f,--filetype   fileType to watch(split with '|'), default 'js|css|html|xhtml'

  -d,--dir        your customer working dir. default current dir

  -i,--inspect   start weinre server and debug all puer page

  -x,--exclude   exclude file under watching(must be a regexp), default: ''

  -a,--addon      your addon's path，綁定域名，比較經常使用

  -t,--target     proxy url，代理URL，比較經常使用，默認是localhost

     --no-reload           close  auto-reload feature,(not recommended)

     --no-launch           close the auto launch feature

  -h,--help       help list

 

4. 使用方法

4.1命令行中輸入如下命令。（第一種方法），可以使用這種方法快速編寫靜態頁面，不須要手動刷新。

cd /path/to/workspace ↵

puer

puer會默認打開http://localhost:8000/（端口能夠用 -p 8001參數進行控制）,頁面會列出該目錄下全部的文件

 

 

4.2命令行中輸入如下命令（第二種方法），這種方法能夠實時更新接口數據。

cd /path/to/workspace ↵

puer -a route.js

 

puer提供了叫插件(addon)的功能，集成了express的route.js(route.js的名字能夠隨意取)來達到最簡的路由配置，能夠提供基於真實http請求與相應的動態的mock數據。route.js文件代碼以下：

// use addon to mock http request
module.exports = {
  // GET
  "GET /v1/posts/:id": function(req, res, next){
    // response json format
    res.send({
      title: "title changed",
      content: "tow post hahahah",
      desc:'aaaa',
      age:'111',
      name:'bbbb'
    })
  },
  // PUT POST DELETE is the same
  "PUT /v1/posts/:id": function(){

  },
  "POST /v1/posts": function(){

  },
  "DELETE /v1/posts/:id": function(){

  }
} 

它其實就是一段nodejs程序，輸出是一配置對象，key的空格前表明的是請求Method，後半部分是請求路徑，而value表明回調函數和express的路由中間件是一致的，傳入的是request和response對象。返回配置中的URL就能夠返回定義的值，以下圖：

 

4.3.使用代理模式，應用puer到以有服務器中，這種方法最實用，工做中也是用到最多的。

通常在開發過程當中，徹底使用靜態文件開發比較少，通常都是會啓動本地的運行環境。這個時候，咱們可使用--target path（-t命令）切換到代理模式將puer做爲一個代理服務器使用。好比本地已經存在一個localhost:7070的服務，你要在其上實現自動刷新的功能，請使用-t 或 --target。這樣puer的服務器地址就會指向你本地服務(localhost:7070)的地址，能夠配合addon模式使用，這樣就能夠直接使用定義的接口了。操做步驟以下圖：

DOM命令中輸入：

puer -t http://localhost:7070 -a a.js

-t http://localhost:7070   使用代理，代理指向localhost:7070,locahost:7070指工程本地啓動的服務

-a a.js   頁面所需的全部接口都寫在a.js裏面，配置路由，這樣就能夠提供基於真實http請求與相應的動態的mock數據

 

若是是在工程代碼所在的目錄下執行puer（好比上面的例子：D:\git\myProject），最大的好處是：

1.不管是寫樣式仍是html代碼，頁面實時刷新。

2.模擬真實的http請求，自定義接口返回的數據。

若是是其餘的目錄，也能夠模擬真實的http請求，只是不能隨時監聽工程目錄下的文件變化。

使用代理服務後，頁面的訪問地址能夠和接口文件裏的請求地址處於一個域下的，因此發請求不會有跨域問題。

 

另一種比較簡單的調試方法就是，使用上述4.2的方法啓動puer，JS裏的請求數據寫好，而後參考chrome設置--disable-web-security解決跨域這篇文章來啓動chrome，即便在不一樣域下，也能夠直接使用接口數據進行調試了。