Mock.js的基本使用

Mock.js的基本使用

概述

• Mock.js是一款模拟JSON数据的前端技术
• 对于前后端分离的项目，后端API数据没上线时使用

开始&安装

• 安装

  npm install mockjs

• 官网例子

  • Node（CommonJS）用法

    // 使用 Mock
    var Mock = require('mockjs')
    var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            'id|+1': 1
        }]
    })
    // 输出结果
    console.log(JSON.stringify(data, null, 4))
    

  • 浏览器使用

    <script src="http://mockjs.com/dist/mock"></script>
    <script>
        var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            'id|+1': 1
        }]
    })
    // 输出结果
    console.log(JSON.stringify(data, null, 4))
    </script>
    

语法规范

• 包含数据模板定义规范和数据占位定义规范

• 数据模板定义规范：属性名、生成规则和属性值

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

  • 生成规则

    

    

    

• 数据定义的占位符@，占领属性值的位置

  'list|5': {
      cname: '@cname',
      city: '@city'，
      full: '@cname - @city'
  }
  

• 常用随机占位符

  //两种输出方式
  console.log(Mock.Random.cname())
  console.log(Mock.mock('@cname'))
  
  //常用的占位符
  //随机中文名，不带c就是英文名
  console.log(Mock.mock('@cname'))
  //随机id
  console.log(Mock.mock('@id'))
  //随机英文标题
  console.log(Mock.mock('@ctitle'))
  //随机颜色，十六进制
  console.log(Mock.mock('@color'))
  //随机图片，图片地址
  console.log(Mock.mock('@image'))
  //随机ip地址
  console.log(Mock.mock('@ip'))
  //随机url地址
  console.log(Mock.mock('@url'))
  //随机字符串
  console.log(Mock.mock('@string'))
  //随机数值
  console.log(Mock.mock('@integer'))
  //随机日期
  console.log(Mock.mock('@datetime'))
  //随机email
  console.log(Mock.mock('@email'))
  

• 自行拓展占位符

  Mock.Random.extend(node: {
       return this.pick([
      	'宠物店',
          '美容店',
          '小吃店',
          '宠物店',
          '快餐店'          
     	]);
  });
  
  //调用
  console.log(Mock.mock('@cstore'));
  

axios的入门和安装

• axios.js是一个基于Promise的HTTP库，支持Node和浏览器环境

• 安装

  npm install axios

• 简单的数据获取

  const axios = require('axios');
  //使用get请求获取数据
  axios.get('https://xxxxxxxxxxxxxxx')
  .then(res => {
      console.log(res.data);
  })
  .catch(err => {
      console.log('错误：' + err )
  })
  

• axios的简单配置

  //配置get请求的参数
  axios.get('https://xxxxxxxxxxxxxxx', {
      params: {
          id: 1,
          status: 5
      }
  })
  .then(res => {
      console.log(res.data);
  })
  .catch(err => {
      console.log('错误：' + err )
  })
  
  //直接配置
  axios.request({
      method: 'get',
      url: 'https://xxxxxxxxxxxx'
      params: {
          id: 1,
          status: 5
      }
  })
  .then(res => {
      console.log(res.data);
  })
  .catch(err => {
      console.log('错误：' + err )
  })
  

• axios并发操作

  • 项目中的多个异步请求会根据耗时长短来执行

  • 需要根据指定的顺序执行，用于all方法

    axios.all([
        axios({
            url:'https//xxxxxxxxxxxxxx'
            data:'1.异步'
        }),
         axios({
            url:'https//xxxxxxxxxxxxxx'
            data:'2.异步'
        }),
         axios({
            url:'https//xxxxxxxxxxxxxx'
            data:'3.异步'
        })
    ]).then(axios.spread((res1, res2, res3) => {
        console.log(res1.config,data);
        console.log(res2.config,data);
        console.log(res3.config,data);
    }))
    

• axios的基地址设置

  //全局设置
  axios.defaults.baseURL = 'https://xxxx';
  
  //实例化
  const myAxios = axios.create();
  myAxios.defaults.baseURL = 'https://xxxx';
  
  myAxios.request({
      method: 'get',
      url: '/data.json'
  }).then(res => {
      console,log(res.data)
  })
  

• 拦截操作

  • 在Ajax获取数据之前先进行一些事务的处理
  • 这些操作包括：修改axios配置信息，loading，判断验证跳转等

  //添加拦截请求
  myAxios.interceptors.request.use(config => {
      console.log('loading...'); 
      return config;
  })
  
  //添加响应拦截
  myAxios.interceptors.response.use(response => {
      //在输出数据前，对数据进行拦截处理
      return response.data   
  })
  

Mock拦截axios的请求

• axios异步数据还没用上线，我们可以通过mock拦截请求，随机生成填充的数据进行前端设计

//axios请求
axios.request({
    method:'get',
    url:'https://xxxxxxxxxx'
}).then(res => {
    console.log(res.data);
})

//mock拦截
Mock.mock('https://xxxxxxxxxx',{
    'list|5-10': [{
        'id|+1': 1,
        'username':'@cname',
        'email': '@email',
        'price': '@integer',
        'gender': '@boolean'
    }]
})