Mock模拟数据使用

Mock的作用

可以生成随机数据，拦截Ajax请求

在工作中，后台未编写好接口时，可以利用mock数据提前测试接口是否可以调用

通过官网查询编写生成随机数据语法，可以节省更多时间

一、Mock的基本用法

1、通过Node环境安装mock.js

npm install mockjs

2、创建引入Mock文件，编写Mock数据

在src目录下新建mock文件夹，新建index.js，引入mock编写mock数据

import Mock from 'mockjs';

Mock.mock('/login', { //输出数据
    'name': '@name', //随机生成姓名
    //还可以自定义其他数据
});
Mock.mock('/list', { //输出数据
    'name': '@name', //随机生成姓名
    'age|10-20': 10
    //还可以自定义其他数据
});

3、在需要的组件如APP.vue中引入mock文件使用

import mock from './mock.js'

mounted(){
    axios.get('/list').then((res)=>{
      console.log(res)
    })
  }

二、Mock在实际项目中的使用 这里我以尚品汇的项目为例

mock数据指向的静态资源路径为public文件夹

1. src目录下新建mock目录，新建如下文件

banner.json = 存放mock数据

[    {        "id": "1",        "imgUrl": "/images/banner1.jpg"    },    {        "id": "2",        "imgUrl": "/images/banner2.jpg"    },]

serve.js = 负责记录模板数据及生成数据

import Mock from 'mockjs'
import banner from './banner.json'

Mock.mock("/mock/banner",{code:200,data:banner})

2. src目录中新建api目录，新建如下文件

index.js = 对外暴露接口请求

import requests from './request.js'
import mockreqursts from './mockrequest.js'

//获取三级联动数据
export const reqCategoryList = ()=>requests({url:'/product/getBaseCategoryList',method:'get'})

//获取轮播图数据
export const reqBanner = ()=>mockreqursts({url:"/banner",method:'get'})

mockrequest.js = mock数据的请求封装

import axios from 'axios'
const requests = axios.create({
  baseURL: "/mock",
  timeout: 5000,
});
requests.interceptors.request.use((config)=>{
  return config
})
requests.interceptors.response.use((res)=>{
  return res.data;
},(error)=>{
  return Promise.reject(new Error('faile'+ error))
})

export default requests

request.js = 真实接口的请求封装

import axios from 'axios'
const requests = axios.create({
  baseURL: "/api",
  timeout: 5000,
});
//获取数据
requests.interceptors.request.use((config)=>{
  return config
})
//发送数据
requests.interceptors.response.use((res)=>{
  return res.data;
},(error)=>{
  return Promise.reject(new Error('faile'+ error))
})

export default requests

3. 在main.js引入api与mock，同时配置全局API

import *as API from './api'
import './mock'
new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$API = API
  }
}).$mount('#app')

4. 使用mock数据请求

可以在所需的组件中通过API.mock名请求数据，如在APP.vue中(需要先安装axios)

methods: {
    async getStudent() {
      const result = await this.$API.reqStudent()
      console.log(result)
    },
  },
  mounted() {
    this.getStudent()
  },

补充：解决跨域问题

在vue.config.js中配置

module.exports = defineConfig({
  devServer: {  //代理解决跨域问题
    proxy: {  
      '/api':{  //当请求地址为api开头地址时，代理服务器向target发送请求并返回结果给本地服务器
        target: 'http://gmall-h5-api.atguigu.cn'
      },
    }
  }  
})