前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中使用mockjs(如何生成一个包含10对象的数组,数组中的数据是随机产生的)

vue中使用mockjs(如何生成一个包含10对象的数组,数组中的数据是随机产生的)

作者头像
用户4344670
发布2019-08-28 11:11:41
11.1K0
发布2019-08-28 11:11:41
举报
文章被收录于专栏:vue的实战
第一步:安装mockjs
代码语言:javascript
复制
npm install mockjs -s
第二步: 在main.js 中引入mock
代码语言:javascript
复制
// 引入mock
// import Mock from "./mock"
// 生产环境拦截(不是生产环境的时候引入mock)
if(process.env.NODE_ENV !== 'production')require("./mock");
第三步: 在src文件夹中创建 mock文件夹,然后在里面创建 index.js文件和respose文件夹再在里面创建: user.js

mock.png

  • user.js中的代码
代码语言:javascript
复制
import Mock from "..";

export const getInfo = (options) => {
    // console.log(options)
    // console.log("kk")
    // return {
    //     name: "lr"
    // }
// 这个就是模板

    const template = {
        'str|2-4':"lison"
    }
    return Mock.mock(template)
}
  • index.js中的代码
代码语言:javascript
复制
import Mock from "mockjs";
import { getInfo } from "./response/user"
// Mock.mock("你要拦截的url","什么方式来调用接口",执行的方法 )
// 使用正则表达式获得地址
// Mock.mock("/\/getPortalList/","get",getInfo )
// Mock.mock("/\/getPortalList/","get",{name:'loi',age: "12"} )
Mock.mock("url","get",getInfo )
export default Mock;
  • 这样就能在请求的时候,拦截要请求的地址了,从而使用本地的数据渲染数据了。
代码语言:javascript
复制
import Mock from "mockjs"

export const getData = () => {

    // var arry = ["是","否"];

    // const template = {
    // //    lis: ['str|2-4': "li123", '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],
    //     'str|2-4': "li123",
    //     'regexp1': /^\d{8,10}$/,
    //         'name|1': arry


    // }
    // return Mock.mock(template);




    // mock随机数据
    const Random = Mock.Random;
    let chartDatasskc = [];
    var arry = ["是", "否"];

    for (let i = 0; i < 10; i++) {

        let newArticleObject = {
            "name": Random.cname(),//随机生成中文名字
            'qq': /^\d{8,10}$/,
            "mtime": Random.datetime(),//随机生成日期时间

            "stars": Random.natural(0, 5),//随机生成1-5的数字
            "add": Random.region(),
            'name|1': arry


        }
        chartDatasskc.push(newArticleObject)
    }
    return Mock.mock(chartDatasskc);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.05.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一步:安装mockjs
  • 第二步: 在main.js 中引入mock
  • 第三步: 在src文件夹中创建 mock文件夹,然后在里面创建 index.js文件和respose文件夹再在里面创建: user.js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档