vue项目实战（十）：mock.js入门,前端数据模拟

最新推荐文章于 2023-07-25 01:19:42 发布

Ordinary_yfz

最新推荐文章于 2023-07-25 01:19:42 发布

阅读量467

点赞数

分类专栏：开发文章标签： vue javascript

本文链接：https://blog.csdn.net/csyifanZhang/article/details/105054016

版权

开发专栏收录该内容

32 篇文章 1 订阅

订阅专栏

最近学到了axios，苦于后端还没有开始，怎么办呢？只能学mock.js了。

文章目录

一、安装与引包
二、基本使用
三、创建复杂json随机数据

mock.js提供了以下模拟功能：

1,根据数据模板生成模拟数据

2,模拟 Ajax 请求，生成并返回模拟数据

3,基于 HTML 模板生成模拟数据

一、安装与引包

使用npm install mockjs安装该模块，如果你是在一个项目中，那么mock.js文件应该在该目录下./node_modules/mockjs/dist/mock.js。
引包

    <script type="text/javascript" src="./node_modules/mockjs/dist/mock.js"></script>

二、基本使用

1-模拟一组列表数据

模拟一组数据主要分为两步，创建相应的mock对象，在对象中声明数据对象。

   <script type="text/javascript">
      //1: 创建mock对象
      var data = Mock.mock({
          //2：声明数据对象
          // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
          'list|1-10': [{
              // 属性 id 是一个自增数，起始值为 1，每次增 1
              'id|+1': 1
          }]
      })
      // 输出结果
      console.log(JSON.stringify(data, null, 4))
  </script>

运行结果：
在这里插入图片描述

2-拦截与响应请求

mock的优势不仅在于可以模拟数据，而且它可以处理ajax请求，http请求，如何做呢？其实最常用的方式就是Mock.mock方法。
样式

Mock.mock( rurl?, rtype?, template|function( options ) )

上一个实例中我们仅仅使用了function( options )参数来返回一组数据。能够熟练的使用其他参数，就可以随心所欲的控制前端发来的请求了。

（i）rurl

可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如
//domain/list.json/、’/domian/list.json’。

（ii）rtype

可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

（iii）template

可选。表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’。

（iv）function(options)

可选。表示用于生成响应数据的函数。

3-使用实例

在这里插入图片描述

三、创建复杂json随机数据

懂得了如何响应请求之后，mock的任务就变成了如何构造你想要的数据了，mock的构造方式繁多，语法不是很难。给出一个商城系统常用的数据列表，包含了一个列表，随机的图片，随机的价格等参数
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>myVue</title>
    <!--由于axios是依赖于vue的，所以两个包必须都引入，而且顺序必须是这样-->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <script type="text/javascript" src="./node_modules/mockjs/dist/mock.js"></script>
  </head>
 <body>
   <div id="app">
   </div>
   <script type="text/javascript">
      //1: 创建mock对象,绑定需要拦截的url与ajax请求类型
      var data = Mock.mock("http://localhost:8080/news", "get", {
          //2：声明数据对象
          // 属性 list 的值是一个数组，其中含有 10 个元素
          'list|10': [{
              // 属性 id 是一个自增数，起始值为 1，每次增 1
              'id|+1': 1,
              //生成一个名字：随机的字符串@即随机标识符
              'name' : '@string',
              //生成价格属性，值处于100-10000之间
              'price|100-10000': 0,
              //生成库存属性，值处于0-200之间
              'story|0-200':0,
              //生成进货日期，随机的日期值
              'date':'@date',
              //生成一张图片来描述这个商品
              'img':'@image'
          }]
      });
      var vm = new Vue({
        el:"#app",
        data:{
          userId:1
        },
        created:function(){
          //3:发起get请求，打印请求到的数据
          axios.get("http://localhost:8080/news")
          .then(function(res){
            console.log(res);
          })
        }
      })
  </script>
 </body>

</html>

Ordinary_yfz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue项目实战（十）：mock.js入门,前端数据模拟

最近学到了axios，苦于后端还没有开始，怎么办呢？只能学mock.js了。文章目录一、安装与引包二、基本使用1-模拟一组列表数据2-拦截与响应请求（i）rurl（ii）rtype（iii）template（iv）function(options)3-使用实例三、创建复杂json随机数据mock.js提供了以下模拟功能：1,根据数据模板生成模拟数据2,模拟 Ajax 请求，生成并返回模拟数...
复制链接

扫一扫

专栏目录