zoukankan      html  css  js  c++  java
  • vue+vuecli+webpack中使用mockjs模拟后端数据

    前言

    使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。

    其主要功能是:

    • 基于数据模板生成模拟数据。
    • 基于HTML模板生成模拟数据。
    • 拦截并模拟 ajax 请求。

    语法规范

    Mock.js 的语法规范包括两部分:

    1. 数据模板定义规范(Data Template Definition,DTD)
    2. 数据占位符定义规范(Data Placeholder Definition,DPD)

    数据模板定义规范 DTD

    数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

    // 属性名   name
    // 生成规则 rule
    // 属性值   value
    'name|rule': value

    注意:

    • 属性名生成规则 之间用竖线 | 分隔。
    • 生成规则 是可选的。
    • 生成规则 有 7 种格式:
      1. 'name|min-max': value
      2. 'name|count': value
      3. 'name|min-max.dmin-dmax': value
      4. 'name|min-max.dcount': value
      5. 'name|count.dmin-dmax': value
      6. 'name|count.dcount': value
      7. 'name|+step': value
    • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
    • 属性值 中可以含有 @占位符
    • 属性值 还指定了最终值的初始值和类型。

    例1:

    Mock.mock({
        'number1|1-100.1-10': 1,
        'number2|123.1-10': 1,
        'number3|123.3': 1,
        'number4|123.10': 1.123
    })
    // =>
    {
        "number1": 12.92,
        "number2": 123.51,
        "number3": 123.777,
        "number4": 123.1231091814
    }

    例2:根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串:

    Mock.mock({
        'regexp1': /[a-z][A-Z][0-9]/,
        'regexp2': /wWsSdD/,
        'regexp3': /d{5,10}/
    })
    // =>
    {
        "regexp1": "pJ7",
        "regexp2": "F)fp1G",
        "regexp3": "561659409"
    }

    例3:

    //string表示属性名
    //3表示后面属性值重复次数
     Mock.mock({
      "string|3": "★"
    })

    结果:

    //星星数量为3
    {
      "string": "★★★"
    }

    例4:

    // num为属性名
    // 生成一个大于等于1,小于等于100 的整数,属性值100只是用来确定类型
    Mock.mock({
      "num|1-100": 100
    })

    结果:

    {
      "number": 8
    }

    数据占位符定义规范 DPD

    占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。

    占位符 的格式为:

    @占位符
    @占位符(参数 [, 参数])
    

    注意:

    1. @ 来标识其后的字符串是 占位符
    2. 占位符 引用的是 Mock.Random 中的方法。
    3. 通过 Mock.Random.extend() 来扩展自定义占位符。
    4. 占位符 也可以引用 数据模板 中的属性。
    5. 占位符 会优先引用 数据模板 中的属性。
    6. 占位符 支持 相对路径绝对路径
    Mock.mock({
        name: {
            first: '@FIRST',
            middle: '@FIRST',
            last: '@LAST',
            full: '@first @middle @last'
        }
    })
    // =>
    {
        "name": {
            "first": "Charles",
            "middle": "Brenda",
            "last": "Lopez",
            "full": "Charles Brenda Lopez"
        }
    }

    通过jQuery ajax请求假数据例子

    1.首先,引入mockjs,引入jquery(此处用jq封装好的ajax发送请求)

    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>

    2.使用mock生成数据模板

    //这里的第一个参数http://api.cn 就是下面ajax请求的url,mock对该url进行拦截'
    //这里的第二个参数就是template数据模板,mock会返回模板生成的数据
         Mock.mock('http://api.cn', {
            'name': '@name',
            'age|1-100': 100,
            'city': '@city'
        });

    3.ajax发送请求与结果

    $.ajax({
        url: 'http://api.cn',
        dataType: 'json'
    }).done(function(data, status, xhr) {
        console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"辽阳市"}
    });

    vuecli中使用mockjs

    首先安装

    npm install mockjs

    我的项目src下的结构如下:

    我在scripts中新建了一个mockdata.js

    里面的内容如下:

    import Mock from 'mockjs';
    const data = Mock.mock({
      // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
      'foods|10-50': [{
        'name': "@ctitle(2,10)",
        "img": "@image('600x600',#b7ef7c)",
        "brief": "@csentence(1,50)",
        "price|0-20.0-2": 1,
        "num": 0,
        "minusFlag": true,
        "time": "@time",
        "peisongfei|0-100.0-2": 1,
        "limit|0-50": 1
      }],
      "sales|10-50": [{
        // 属性 id 是一个自增数,起始值为 1,每次增 1
        'name': "@ctitle(2,10)",
        "img": "@image('600x600',#b7ef7c)",
        "brief": "@csentence(1,50)",
        "price|0-100.0-2": 1,
        "num": 0,
        "minusFlag": true,
        "time": "@time",
        "peisongfei|0-100.0-2": 1,
        "limit|0-100": 1
      }]
    });
    
    export default {
      data
    }

    接下来,在需要用到的mock数据的vue组件页面中,这样写

    import mockdata from "@/scripts/mockdata.js";

    引用数据,在你methods里面 直接引用刚刚的mockdata即可。例如:

    new Promise((resolve, reject) => {
        that.foods =mockdata.data.foods;  //直接点出你生成的假数据对象即可
        that.foodsListLen = that.foods.length;
     }).catch(err=>{
          console.log(err)
     })

    参考

    官网地址:https://github.com/nuysoft/Mock/wiki

  • 相关阅读:
    HDU1879 kruscal 继续畅通工程
    poj1094 拓扑 Sorting It All Out
    (转)搞ACM的你伤不起
    (转)女生应该找一个玩ACM的男生
    poj3259 bellman——ford Wormholes解绝负权问题
    poj2253 最短路 floyd Frogger
    Leetcode 42. Trapping Rain Water
    Leetcode 41. First Missing Positive
    Leetcode 4. Median of Two Sorted Arrays(二分)
    Codeforces:Good Bye 2018(题解)
  • 原文地址:https://www.cnblogs.com/moqiutao/p/7768968.html
Copyright © 2011-2022 走看看