记录如何在vue中使用mock模拟数据

1. mock 介绍

mock： 假的。
mock数据 意思是： 真的假数据。【真的即为符合接口规范要求的。 假数据：数据是自己造的，不是真实数据。】

mock实现方式操作流程：
  1.本地启mock服务器【用express写接口或本地用专门的mock服务】
  2.线上的mock服务器

mock.js基本语法介绍：
   mock.js基本语法包含两个部分：数据模板和规则。其中，数据模板用于描述数据的结构和属性，规则用于定义数据模板中各属性生成数据的方式。
   Mock.mock() 方法接收一个数据模板对象作为参数，并根据模板生成符合规则的随机数据。
               模板对象中以字符串格式表示的属性名后面跟着的是属性值得生成规则。

mock.js常见数据类型的使用方法：
   mock.js支持多种数据类型的生成，包括数字，字符串，布尔值，日期等。例如：
   Mock.mock('@integer(1, 100)') // 生成指定范围内的整数，1-100之间的整数
   Mock.mock('@string(5, 10)') // 生成指定长度的字符串， 生成一个长度5-10之间的字符串
   Mock.mock(/[a-z][A-Z]\d/)  //生成指定模式的正则表达式， 生成一个包含小写字母，大写字母和数字的正则表达式
   Mock.mock('@date(\'yyyy-MM-dd\')')  //生成指定格式的日期时间， 生成一个如2023-05-11的日期字符串
   Mock.mock('@url(\'http\', \'abc.com\')')  //生成指定域名和协议的URL地址， 生成一个以 'http://'为协议， 'abc.com'为域名的URL地址

2.在vue中使用mock步骤

第一步：安装和配置mock.js库,可使用npm进行安装，如：
       npm install mockjs
第二步：在vue项目中配置mock.js,如：
       先在vue项目中创建一个mock文件夹，并新建index.js文件，如：
       // index.js文件
       import Mock from 'mockjs'

       // 设置拦截ajax请求的相应时间，模拟网络延迟
       Mock.setup({
         timeout: '200-600'
       })
       // mock数据示例
       Mock.mock('/api/geList',{ //【当请求这个接口时，接口会返回一个长度在10-20之间的数组，数组中每一项都包含id，title等属性】
         'list|10-20': [{        // 这个的意思是 返回一个长度在 10-20之间的数组 
            'id|+1': 1,          //
            'title': '@ctitle(10,20)',  // 使用@ctitle方法生成随机数据
            'image': '@image(\'200x100\',\'#50b347\',\'Hello\')', //使用@image方法生成随机数据
            'datetime': '@datetime()',   // 使用@datetime方法生成随机数据
            'author': '@cname()',        // 使用@cname方法生成随机数据
            'description': '@ctitle(30,100)'
          }]
       })
       export default Mock
第三步：在vue项目入口文件main.js中引入mock/index.js文件，如：
       //main.js
       import Mock from './mock' // 引入mock数据
第四步：调用接口
       // index.vue
       <script>
          ...
          mounted(){
            // 请求接口，获取mock数据
            this.$http.get('/api/getList').then(res=>{
              console.log(res.data.list);
            })
          }
       </script>

 3.自定义mock数据模板和规则

// 可通过自定义函数实现特定数据模板的生成，如：
const data = Mock.mock({
  'list|10-20': [{
     'id|+1': 1,
     'name': function(){
       // 函数中的this关键字表示当前生成的对象
       return this.id % 2 === 0 ? '@cname()' : '@name()'
     },
     'age': function(){
       return this.id % 2 === 0 ? '@integer(18,30)' : '@integer(25,40)'
     }
   }]
})
注： 上面示例中，定义了两个自定义函数，并将其作为属性值赋给了数据模板对象中的属性。

4.结合axios进行网络请求的mock数据模拟

在实际项目中，通常会使用axios或其他网络请求库来发送ajax请求。Mock.js提供了与axios结合的插件mockjs，可以方便的进行网络请求的mock数据模拟。
使用mockjs插件进行mock数据模拟的实例，如：
import axios from 'axios'
import MockAdapter from 'mockjs'
const mock = new MockAdapter(axios)
//模拟get请求
mock.onGet('/api/getList').reply(200,{
  'list|10-20': [{
     'id|+1': 1,
     'title': '@ctitle(10,20)',
     'desc': '@ctitle(30,100)'
   }]
})
//模拟post请求
mock.onPost('/api/detail').reply(config=>{
  const { title, desc } = JSON.parse(config.data)
  return [200, {
    code: 0,
    msg: '操作成功',
    data: {
      id: Mock.mock('@id'),
      title,
      desc
    }
  }]
})
注： 上面示例中，使用 axios和MockAdapter 创建了一个mock实例，然后使用 onGet, onPost等方法模拟对应的网络请求，同时根据需要返回相应的mock数据。
需要注意的是，在使用mockjs插件进行mock数据模拟时，需要将axios的请求地址指向mock服务器（通常是localhost），以便浏览器中访问到mock数据，如：
axios.get('http://localhost:8080/api/getList').then(res=>{
  console.log(res.data.list)
})

 

 

参考链接：

       https://blog.csdn.net/qq_54591762/article/details/128419290    -  mock

       https://juejin.cn/post/7230996352930627639  - mock详解