源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

vue+vuecli+webpack中使用mockjs模拟后端数据的示例

  • 时间:2022-11-21 03:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue+vuecli+webpack中使用mockjs模拟后端数据的示例
[b]前言[/b] 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。 其主要功能是: [list=1] [*]基于数据模板生成模拟数据。[/*] [*]基于HTML模板生成模拟数据。[/*] [*]拦截并模拟 ajax 请求。[/*] [/list] [b]语法规范[/b] Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) [b]数据模板定义规范 DTD[/b] 数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// 属性名  name
// 生成规则 rule
// 属性值  value
'name|rule': value
注意: [list=1] [*]属性名 和 生成规则之间 用竖线 | 分隔。[/*] [*]生成规则 是可选的。[/*] [*]生成规则 有 7 种格式: [list=1]
  • 'name|min-max': value[/*] [*]'name|count': value[/*] [*]'name|min-max.dmin-dmax': value[/*] [*]'name|min-max.dcount': value[/*] [*]'name|count.dmin-dmax': value[/*] [*]'name|count.dcount': value[/*] [*]'name|+step': value[/*] [/list]
  • [*]生成规则 的 含义 需要依赖 属性值的类型 才能确定。[/*] [*]属性值 中可以含有 @占位符。[/*] [*]属性值 还指定了最终值的初始值和类型。[/*] [/list] 例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': /\w\W\s\S\d\D/,
      '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 } [b]数据占位符定义规范 DPD[/b] 占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。 占位符 的格式为: @占位符 @占位符(参数 [, 参数]) 注意: [list=1] [*]用 @ 来标识其后的字符串是 占位符。[/*] [*]占位符 引用的是 Mock.Random 中的方法。[/*] [*]通过 Mock.Random.extend() 来扩展自定义占位符。[/*] [*]占位符 也可以引用 数据模板 中的属性。[/*] [*]占位符 会优先引用 数据模板 中的属性。[/*] [*]占位符 支持 相对路径 和 绝对路径。[/*] [/list]
    Mock.mock({
      name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
      }
    })
    // =>
    {
      "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
      }
    }
    
    [b]通过jQuery ajax请求假数据例子 [/b] 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":"辽阳市"}
    });
    [b]vuecli中使用mockjs[/b] 首先安装
    npm install mockjs
    我的项目src下的结构如下: [img]http://files.jb51.net/file_images/article/201710/20171024170635889.png?201792417649[/img] 我在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)
     })
    参考 官网地址:[url=https://github.com/nuysoft/Mock/wiki]https://github.com/nuysoft/Mock/wiki[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
    • 全部评论(0)
    联系客服
    客服电话:
    400-000-3129
    微信版

    扫一扫进微信版
    返回顶部