技術標籤：筆記html5

Mock原理

你好！ Mock其實是需要Axios配套使用的，本地資料模擬器，是以Js或Json的方式提供資料，利用Axios的攔截器性質，攔截固定的介面返回給相同的資料，這樣我們就可以不依賴後端而進行獨立開發。達到快速開發的效果，後期禁用Mock就可以正常訪問介面了，直接進入除錯階段！

安裝

npm install mock
npm install axios

安裝完成後，我們需要在和src同級別的路徑建立Mock資料夾（記得全小寫mock），同時建立mock.js檔案，如下

引入Mock

在Main.js中寫如下程式碼，當需要前後聯調的時候註釋就好

require
 
("../mock/mock.js");

Mock.js配置

const Mock = require('mockjs')   //引入mock

//格式： Mock.mock("請求的URL地址",{"資料物件"})
// Mock.mock("/api/login", (req, res) => {});

//Mock.mock( rurl, rtype, template )
// Mock.mock("/api/login","post" (req, res) => {});

Mock.
 
mock("/api/data", (req, res) => {
			這裡寫路徑
    {
        return Mock.mock({
            "data": {
                "identList": [
                    {
                        "Bid": "1",
                        "Name": "數碼寶貝",
                        "Sys"
 
: "3",
                        "Count": "4",
                        "pCount": "5"
                    },
                ],
                "totaCount": "1",
                "totl": "2",
                "Time": "123456789101112",
                "page": {
                    "pageSize": 20,
                    "pageStart": 1,
                    "pageTotal": 4
                }
            },
            "meta": {
                "Code": "0",
                "msg": "成功"
            }
        });
    }
});

這裡有坑，注意你的vue.config.js檔案是否配置了代理，如果有代理的話要特別注意！！！

有代理的寫法

代理寫法

proxy: {
      '/api': {
        target: "127.0.0.1:8080",
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
    }

頁面引用
在封裝的Api下寫

import request from '@/utils/request'
export function getData() {
  return request({
    url: `data`,
    method: 'get',
    data: {}
  })
}

在頁面引入Api

import { getData } from "@/api/datas";

getData().then((res) => {
        console.log(res)
      });

沒代理的寫法

引入啥的自己寫吧，上面都有！

  this.$axios.get("/api/data").then(res => {
           console.log(res);
       });

就到這裡了，該下班了，有不懂得可以私聊我~~