Vue-cli 使用json server在本地模擬請求資料

OBKoro1發表於2019-03-04
VueJSONServer

寫在前面：

開發的時候，前後端不論是否分離，介面多半是滯後於頁面開發的。所以建立一個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伺服器：

jsonserver伺服器
jsonserver伺服器

json資料：

json資料
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

參考資料:

JSON-Server使用
vue-cli下配置json-server

相關文章