vue项目实战(十):mock.js入门,前端数据模拟

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

文章目录

  • 一、安装与引包
  • 二、基本使用
    • 1-模拟一组列表数据
    • 2-拦截与响应请求
      • (i)rurl
      • (ii)rtype
      • (iii)template
      • (iv)function(options)
    • 3-使用实例
  • 三、创建复杂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>

运行结果:
vue项目实战(十):mock.js入门,前端数据模拟_第1张图片

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-使用实例

vue项目实战(十):mock.js入门,前端数据模拟_第2张图片

三、创建复杂json随机数据

懂得了如何响应请求之后,mock的任务就变成了如何构造你想要的数据了,mock的构造方式繁多,语法不是很难。给出一个商城系统常用的数据列表,包含了一个列表,随机的图片,随机的价格等参数
vue项目实战(十):mock.js入门,前端数据模拟_第3张图片

<!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>

你可能感兴趣的:(开发)