vue搭载mock萌新入坑指北

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);
       });

就到这里了，该下班了，有不懂得可以私聊我~~