寫在前面：
開發的時候，前後端不論是否分離，介面多半是滯後於頁面開發的。所以建立一個REST風格的API介面，給前端頁面提供虛擬的資料，是非常有必要的。json server 作為模擬工具，因為設定簡單，容易上手。本文是做一個簡單的上手介紹，有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。
本文首發於我的個人blog：obkoro1.com
json server 工具:
在後臺還沒給介面之前，使用JSON-Server搭建一臺JSON伺服器，將介面要返回的資料放在json檔案裡面。然後請求這些資料，這樣我們可以先做一些東西，等後臺介面好了之後直接替換就可以了，不必一直傻傻的等後端的介面。
安裝：
npm install json-server --save //json server
npm install axios --save //使用axios傳送請求複製程式碼json檔案：
建立一個json檔案，起名叫db.json，檔案放置在跟index.html平級的目錄中，也可以放置在static資料夾中，db.json檔案裡面的內容，是一個物件。
設定：
位置： build/dev-server.js
//json-server 假資料
var jsonServer = require(`json-server`) //引入檔案
var apiServer = jsonServer.create(); //建立伺服器
var apiRouter = jsonServer.router(`db.json`) //引入json 檔案 ，這裡的地址就是你json檔案的地址
var middlewares = jsonServer.defaults(); //返回JSON伺服器使用的中介軟體。
apiServer.use(middlewares)
apiServer.use(`/json`,apiRouter)
apiServer.listen( port + 1,function(){ //json伺服器埠:比如你使用8080,這裡的json伺服器就是8081埠
console.log(`JSON Server is running`) //json server成功執行會在git bash裡面列印出`JSON Server is running`
})複製程式碼如圖所示：
請求介面代理：
proxyTable: {
`/api`: {
target: `http://localhost:8081/`, // 通過本地伺服器將你的請求轉發到這個地址
changeOrigin: true, // 設定這個引數可以避免跨域
pathRewrite: {
`/api`: `/`
}
},
},複製程式碼如下圖所示：
npm run dev啟動專案可以訪問到你的json檔案：
現在伺服器已經成功啟動，在位址列輸入 localhost:8081，就可以看到的json檔案，加上相應字尾即可訪問檔案裡面的資料。下面幾張圖片出自：biubiubiuzzz
jsonserver伺服器：
json資料：
axios請求json資料：
光看到這些資料可不行，我們還需要發起請求，請求到這些資料，然後執行各種各樣的騷操作。
main.js檔案中：
import axios from `axios`;//引入檔案
Vue.prototype.$ajax = axios;//將axios掛載到Vue例項中的$ajax上面,在專案中的任何位置通過this.$ajax使用複製程式碼在元件中的使用方式，比如：
this.$ajax({
url:`/api/articles`,//api 代理到json檔案地址，後面的字尾是檔案中的物件或者是陣列
method:`get`,//請求方式
//這裡可以新增axios文件中的各種配置
}).then(function (res) {
console.log(res,`成功`);
}).catch(function (err) {
console.log(err,`錯誤`);
})
//還可以像下面這麼簡寫
this.$ajax.get(`api/publishContent`).then((res) => {
console.log(res,`請求成功`)
},(err)=>{
console.log(err,`請求失敗`);
});複製程式碼JSON-Server只接受GET請求，GitHub上提到：
If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
lowdb介紹： www.jianshu.com/p/11d04a4c2…
文件：
附上json server的github，和axios的中文文件，大家可以進去研究一下。
json server設定和使用起來還是蠻方便的，大家感興趣的話，可以跟著文章設定一波。
最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
blog網站 and 掘金個人主頁
以上2017.11.1