Vue中使用mock模拟后端数据

简介:

在开发的时候，由于页面中的数据来自后端，后端接口又处于开发中，阻碍了前端开发，为了解决这个问题，需求下来后，前后端先约定好数据结构后，在按照约定好的数据结构进行开发，这样前端只需一个本地服务，模拟返回约定好的数据结构。

安装：

• npm i mockjs
• yarn add mockjs

使用Mock.mock()拦截请求

Mock.mock()

Mock.mock(template) 是 Mock.js 库中的方法，用于根据模板生成随机数据。

举例：

模拟数据只需要下面三个基本参数即可

export const getcategories = Mock.mock(//categories/, 'get', {})

Mock.mock 方法的三个参数的作用：

1. 第一个参数：正则表达式，用于匹配请求的 URL
   正则表达式 /\/categories/ 用于匹配请求的 URL 中包含 /categories 的部分。如果请求的 URL 中包含了 /categories，则这个模拟接口配置就会被触发。

2. 第二个参数：请求方法，表示哪种请求方法会被拦截
   在这个例子中，使用的是 'get'，表示只有 GET 请求会被拦截。如果发送的请求是 GET 请求，并且 URL 匹配了正则表达式 /\/categories/，那么这个模拟接口配置就会生效。

3. 第三个参数：响应数据，表示模拟接口返回的数据
   在这个例子中，使用了一个空对象 {} 作为模拟的响应数据。你可以根据需要自定义返回的数据结构和内容。

更多用法示例：

const Mock = require('mockjs');

// 使用 url 参数匹配请求的 URL
Mock.mock('/api/users', 'get', {
  'data|10': [{
    'id|+1': 1,
    'name': '@name',
    'age|18-35': 0
  }]
});

// 使用方法来指定请求方法
Mock.mock('post', '/api/users', {
  'resultCode': 200,
  'message': '成功'
});

// 使用 template 参数定义模拟数据
Mock.mock('/api/users', {
  'resultCode': 200,
  'message': '成功',
  'data': {
    'name': 'John',
    'age': 25
  }
});

// 使用函数来自定义模拟接口的行为
Mock.mock('/api/users', function(options) {
  const { body } = options; // 获取请求体
  const data = JSON.parse(body);
  // 根据请求体中的内容返回自定义的响应数据
  return {
    'resultCode': 200,
    'message': '成功',
    'data': {
      'name': data.name,
      'age': data.age
    }
  };
});

1. 在src文件夹下新建 mock/index.js

2.在创建的index.js文件创建mock服务

拦截匹配的URL，并返回模拟的响应数据。

// 导入 Mock 模块
const Mock = require('mockjs')
// 导入 Random 对象(有用就导入)
const Random = require('mockjs').Random
// ------------------------------------------------------//
// export const getIndexInfos：定义了一个名为 getIndexInfos 的常量，用于导出这个接口模拟的配置。
// Mock.mock(/\/index-infos/, 'get', { ... })：使用 Mock 模块的 mock 方法来模拟接口请求。
// 第一个参数是一个正则表达式，用于匹配请求的 URL，这里是 /index-infos。
// 第二个参数是请求的方法，这里是 GET。第三个参数是一个对象，表示接口返回的数据。
// 使用 Mock.js 来拦截该请求

//模拟数据
export const getIndexInfos = Mock.mock(/\/index-infos/, 'get', {
     resultCode: 200,
     message: '成功',
     data: {
    // 模拟前端需要的后端数据
     carousels: []
     categoryList: []
     // ....
    }
}
// 模拟数据
export const getUserInfo = Mock.mock(/\/user\/info/, 'get', {
  resultCode: 200, // 接口返回的结果码
  message: '请求成功', // 接口返回的消息
  data: {   
    name: 李华
    age: 18
    gender：女
  }
})
// 可以暴露多个模拟的数据...

3.在main.js中全局引入mock服务

import './mock/index.js' // 引入mock服务

4.给后端发送请求：

(1).封装axios.js

import axios from 'axios'
import { Toast } from 'vant'

// 设置基础URL
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '//xxx.site/api/v1' : '//xxx/api/v1'

// 允许跨域请求发送 cookies
axios.defaults.withCredentials = true

// 设置请求头
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers.token = localStorage.getItem('token') || ''
axios.defaults.headers.post['Content-Type'] = 'application/json'

// 响应拦截器
axios.interceptors.response.use((res) => {
  if (typeof res.data !== 'object') {
    return Promise.reject(res)
  }
  if (res.data.resultCode !== 200) {
    // 我们在未登录的情况下获取用户信息数据，会提示“未登录”，
    // 接口的错误码为 416，用户未登录时返回的错误码统一为 416，这是与后端进行约定的。
    // 所以我们之前在二次封装 axios 请求库的时候，已经做了如下处理：
    if (res.data.resultCode === 416) {
      // 处理登录状态失效
      if (res.data.message) {
        Toast.fail(res.data.message)
      }
      // 这里注意，window.vRouter 需要在 main.js 里面提前做好赋值，window.vRouter = router
      window.vRouter.push({ path: '/login' })
    }
    return Promise.reject(res.data)
  }
  return res.data
})

export default axios

(2).新建service文件为更好维护区分每个页面中对后端的请求:

import axios from '../utils/axios'
// getHome() 方法使用 axios 库来发送一个 HTTP GET 请求到 /index-infos URL。
// 调用这个方法会触发网络请求，并返回一个 Promise 对象，
// 该 Promise 对象在请求成功时会返回响应数据。
export function getHome(params) {
  // 返回被mock拦截的模拟数据对象
  return axios.get('/index-infos')
}

(3).在需要渲染的Vue文件中,调用请求方法:

先引入二次封装的getHome接口

import { getHome } from '@/service/home' // 引入二次封装的getHome首页接口

在Vue文件中调用getHome()方法

  async mounted() {
    // 请求首页接口资源，发送请求
    const { data } = await getHome()
    if (data) {
      console.log(data.carousels)
      // 渲染轮播图
      this.swiperList = data.carousels
      // 渲染其他数据
      this.categoryList = data.categoryList
      this.newGoodses = data.newGoodses // 新品上线
      this.hots = data.hotGoodses // 热门商品
      this.recommends = data.recommendGoodses // 最新推荐
    }
}

5.模拟渲染数据

此时,mock就会自动拦截,并使得请求到的数据就是我们最开始在mock/index.js中模拟的数据了(直接渲染模拟数据到页面中)

---

扩展:

mock生成随机数据

Mock.js 使用类似于模板的语法来定义数据结构和生成规则。

// 生成一个包含 5 个元素的数组，每个元素的值是 'hotGoodses'。
'hotGoodses|5'[...]

• 在这个例子中，'hotGoodses' 是用作占位符的字符串，实际生成的数据可能是不同的。
• 在这个写法中，'hotGoodses|5' 使用了 | 分隔符，前面的部分是占位符，后面的部分是生成规则。生成规则中的数字 
• 5 表示生成的数组长度为 5。

下面是一个示例，展示如何使用 'hotGoodses|5'[] 生成随机数据：

在这个例子中，@word 是一个 Mock.js 的占位符，用于生成随机的单词。

'hotGoodses|5' 表示生成一个包含 5 个元素的数组，每个元素的值是通过 @word 生成的随机单词。

---

 Mock.js 的数据模板语法来定义 sellingPrice 属性的值。

sellingPrice|+15': 10,

这个数据模板语法的含义是：以初始值 10 作为基准，在每次被调用时递增 15。换句话说，每次调用该模板语法生成的数据，sellingPrice 属性的值会比上一次增加 15。

举个例子，假设你使用该模板语法生成三个数据：

生成的数据可能是：

---

总结

当使用Mock.js拦截请求并使用Mock.mock()方法定义了拦截规则时,拦截下来的请求将返回在拦截规则中指定的模拟数据对象

调用 axios.get('/index-infos')发送请求时，该请求将被拦截，并返回一个包含{foo: 'bar', baz: 123 }的模拟数据对象作为响应数据。
这意味着拦截下来的请求不会发送到实际的后端接口，而是被 Mock.js 拦截，并返回你在拦截规则中指定的模拟数据对象。