mock.js 模拟数据

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/xiaoxiaojie12321/article/details/81301399

1.安装

npm install mockjs --save

npm install axios --save

安装axios是为了能模拟后台接口。

2.建立目录结构如下：

3.在main.js引入mockjs

4. mock.js

 
 

   
   

    
    

   
   
   
   

    
    

     
     import Mock 
     
     from 
     
     'mockjs' 
     
     // 引入mockjs
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     const Random = Mock.Random 
     
     // Mock.Random 是一个工具类，用于生成各种随机数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     let data = [] 
     
     // 用于接受生成数据的数组
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     let size = [
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     '300x250', 
     
     '250x250', 
     
     '240x400', 
     
     '336x280', 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     '180x150', 
     
     '720x300', 
     
     '468x60', 
     
     '234x60', 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     '88x31', 
     
     '120x90', 
     
     '120x60', 
     
     '120x240', 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     '125x125', 
     
     '728x90', 
     
     '160x600', 
     
     '120x600', 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     '300x600'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     ] 
     
     // 定义随机值
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     for(
     
     let i = 
     
     0; i < 
     
     10; i ++) { 
     
     // 可自定义生成的个数
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     let template = {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Boolean': Random.boolean, 
     
     // 可以生成基本数据类型
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Natural': Random.natural(
     
     1, 
     
     10), 
     
     // 生成1到100之间自然数
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Integer': Random.integer(
     
     1, 
     
     100), 
     
     // 生成1到100之间的整数
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Float': Random.
     
     float(
     
     0, 
     
     100, 
     
     0, 
     
     5), 
     
     // 生成0到100之间的浮点数,小数点后尾数为0到5位
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Character': Random.character(), 
     
     // 生成随机字符串,可加参数定义规则
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'String': Random.
     
     string(
     
     2, 
     
     10), 
     
     // 生成2到10个字符之间的字符串
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Range': Random.range(
     
     0, 
     
     10, 
     
     2), 
     
     // 生成一个随机数组
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Date': Random.date(), 
     
     // 生成一个随机日期,可加参数定义日期格式
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Image': Random.image(Random.size, 
     
     '#02adea', 
     
     'Hello'), 
     
     // Random.size表示将从size数据中任选一个数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Color': Random.color(), 
     
     // 生成一个颜色随机值
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Paragraph':Random.paragraph(
     
     2, 
     
     5), 
     
     //生成2至5个句子的文本
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Name': Random.name(), 
     
     // 生成姓名
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Url': Random.url(), 
     
     // 生成web地址
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     'Address': Random.province() 
     
     // 生成地址
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       data.push(template)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     Mock.mock(
     
     '/data/index', 
     
     'post', data) 
     
     // 根据数据模板生成模拟数据
    
    
   
   
 
 

5.api.js

 
 

   
   

    
    

   
   
   
   

    
    

     
     import axios 
     
     from 
     
     'axios'
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     axios.defaults.headers.post[
     
     'Content-Type'] = 
     
     'application/x-www-form-urlencoded'
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     // 请求拦截器
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     axios.interceptors.request.use(
     
     function(config) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     return config;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }, 
     
     function(error) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     return 
     
     Promise.reject(error);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       })
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     // 响应拦截器
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     axios.interceptors.response.use(
     
     function(response) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     return response;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }, 
     
     function(error) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     return 
     
     Promise.reject(error);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     })
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     // 封装axios的post请求
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     function fetch(url, params) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     return 
     
     new 
     
     Promise(
     
     (resolve, reject) => {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         axios.post(url, params)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           .then(
     
     response => {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             resolve(response.data);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           })
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           .catch(
     
     (error) => {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             reject(error);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           })
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       })
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       mockdata(url, params) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     return fetch(url, params);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

6.mock.vue

 
 

   
   

    
    

   
   
   
   

    
    

     
     <template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <script>
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import api 
     
     from 
     
     './../axios/api.js'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     name: 
     
     'Mock',
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       data () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     return {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     dataShow: []
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       },
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       created () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     this.getdata()
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     methods: {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     getdata: 
     
     function() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           api.mockdata(
     
     '/data/index')
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           .then(
     
     res => {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     console.log(res);
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     this.dataShow = res.data;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           })
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <!-- Add "scoped" attribute to limit CSS to this component only -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <style scoped>
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </style>
    
    
   
   
 
 

7.控制台打印出的数据

以上是使用mockjs生成的模拟数据，基本可以满足平时开发的需要，不过mockjs还有其他的用法未能一一列出来，建议各位朋友们去mock官网的文档了解更多，地址：http://mockjs.com/ 。