码迷,mamicode.com
首页 > 其他好文 > 详细

Mock随机数据

时间:2020-07-18 00:55:37      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:ons   href   pos   安装   js使用   目录   com   http   ret   

  1. 先安装 mock.js
    npm install mockjs --save-dev
  2. 模拟数据接口
    在项目的src目录下创建一个mock目录,然后在里面新建一个index.js文件,作为mock的导出点,用于提供给src/main.js使用。
    src/mock下新建modules目录,里面再新建各种xxx.js,用来模拟各个页面的数据。
  3. src目录结构图:
    技术图片
  4. index.js代码:
  5. // 引入mockjs
    import Mock from ‘mockjs‘
    // 引入模板函数类
    import ratings from ‘./modules/ratings‘
    
    // Mock函数
    const { mock } = Mock
    
    // 设置延时
    Mock.setup({
      timeout: 400
    })
    
    // 使用拦截规则拦截命中的请求,mock(url, post/get, 返回的数据);
    mock(/\/api\/ratings\/list/, ‘post‘, ratings.list)
    // mock(/\/api\/ratings\/list/, ‘get‘, ratings.list)
  6. ratings.js代码:

  7. // 引入随机函数
    import { Random } from ‘mockjs‘
    // 引入Mock
    const Mock = require(‘mockjs‘)
    
    // 定义数据
    const listData = Mock.mock({
      ‘data|20‘: [{
        username: () => Random.cname(),
        time: () => Random.date(‘yyyy.M.d‘),
        content: () => Random.csentence(5, 10)
      }]
    })
    
    function list (res) {
      // res是一个请求对象,包含: url, type, body
      return {
        code: 200,
        data: listData.data,
        message: ‘请求成功‘
      }
    }
    
    export default { list }
  8. mockjs使用Random方法生成随机数据的规则  官方文档
  9. main.js中引入模拟数据接口:
    在 src/main.js 中需要加入以下代码
  10. import ‘@/mock‘
  11. 安装axios   npm install axios
  12. main.js中引入axios
  13. import axios from ‘axios‘
    // 配置axios 到原型中
    Vue.prototype.$axios = axios
  14. main.js完整代码:

  15. import Vue from ‘vue‘
    import App from ‘./App.vue‘
    import router from ‘./router‘
    import store from ‘./store‘
    import axios from ‘axios‘
    import ‘@/mock‘
    
    
    Vue.prototype.$axios = axios
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount(‘#app‘)
  16. 页面使用:
    技术图片
  17. 打印数据:
    技术图片

Mock随机数据

标签:ons   href   pos   安装   js使用   目录   com   http   ret   

原文地址:https://www.cnblogs.com/cl1998/p/13333857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!