zoukankan      html  css  js  c++  java
  • mock.js-无需等待,让前端独立于后端进行开发

    https://cnodejs.org/topic/53f718218f44dfa3511af923

    概述

    • 首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳。
    • 相对于其他同类的框架的实现,mock.js超出了我的意料。
      • 基于 数据模板 生成模拟数据。
      • 基于 HTML模板 生成模拟数据。
      • 拦截并模拟 ajax 请求。
    • 是的,mock.js只做上述的几件事,但做的足够出色。

    解决的问题

    开发时,后端还没完成数据输出,前端只好写静态模拟数据。

    • 数据太长了,将数据写在js文件里,完成后挨个改url。
    • 某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
    • 想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
    • 特殊的格式,例如IP,随机数,图片,地址,需要去收集。
    • 超烂的破网速…

    以上都不再是问题

    接下来体验 拦截ajax请求并返回模拟数据

    步骤1 - 安装

    安装太简单,跳过

    步骤2 - 配置模拟数据

    Mock.mock('http://g.cn', {
        'name'	   : '[@name](/user/name)()',
        'age|1-100': 100,
        'color'	   : '[@color](/user/color)'
    });

    步骤3 - 发送ajax请求(jquery版)

    $.ajax({
        url: 'http://g.cn',
    }).done(function(data, status, xhr){
        console.log(
            JSON.stringify(data, null, 4)
        )    
    })

    步骤4 - 查看响应的结果

    // 结果1
    {
        "name": "Elizabeth Hall",
        "age": 91,
        "color": "#0e64ea"
    }
    
    // 结果2
    {
        "name": "Michael Taylor",
        "age": 61,
        "color": "#081086"
    }
    
    // 结果N ..
  • 相关阅读:
    vue2.0 动画
    I. 对缓存进行处理
    G. 【案例】Ajax实现无刷新分页效果
    H. Ajax对XML信息的接收与处理
    F. 异步同步请求
    D. 接收服务器端返回的信息
    E. 请求GET和POST的不同
    C. 发起对服务器的请求
    B. 创建Ajax对象
    A. AJAX介绍
  • 原文地址:https://www.cnblogs.com/guo2001china/p/5196289.html
Copyright © 2011-2022 走看看