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

相關文章