JS:使用Mock.js生成随机数据,拦截 Ajax 请求

简介: JS:使用Mock.js生成随机数据,拦截 Ajax 请求

Mock.js生成随机数据,拦截 Ajax 请求


参考文档:https://github.com/nuysoft/Mock/wiki/Getting-Started


语法规范:https://github.com/nuysoft/Mock/wiki/Syntax-Specification

一、Node.js

安装

npm install mockjs

示例

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

运行结果

{
    "list": [
        {
            "id": 1,
            "name": "Larry"
        },
        {
            "id": 2,
            "name": "Edward"
        },
        {
            "id": 3,
            "name": "Jessica"
        },
        {
            "id": 4,
            "name": "William"
        },
        {
            "id": 5,
            "name": "Christopher"
        },
        {
            "id": 6,
            "name": "Michael"
        },
        {
            "id": 7,
            "name": "Susan"
        },
        {
            "id": 8,
            "name": "Shirley"
        },
        {
            "id": 9,
            "name": "Angela"
        },
        {
            "id": 10,
            "name": "George"
        }
    ]
}

二、浏览器中

使用示例

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">
  <span>{{info.name}}</span>
  <span>{{info.age}}</span>
  <span>{{info.date}}</span>
</div>
<script>
  // 生成数据
  Mock.mock("http://mockjs", {
    name: "@cname", //模拟名称
    "age|1-100": 100, //模拟年龄(1-100)
    date: "@date('yyyy-MM-dd')", //模拟时间
  });
  const app = new Vue({
    el: "#app",
    data: () => {
      return {
        info: {},
      };
    },
    // http请求拦截
    methods: {
      async getData() {
        const res = await axios.get("http://mockjs");
        this.info = res.data;
      },
    },
    created() {
      this.getData();
    },
  });
</script>

更多示例:http://mockjs.com/examples.html

参考

模拟数据----------mock.js----------faker.js

相关文章
|
28天前
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
2月前
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
36 2
Node.js GET/POST请求
|
2月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
40 4
|
3月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
184 13
|
3月前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
3月前
|
JSON JavaScript 前端开发
js请求后端9
js请求后端9
36 2
|
4月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
127 0
Vue项目打包后都产生了哪些JS请求?
|
4月前
|
JavaScript Serverless Linux
函数计算产品使用问题之遇到Node.js环境下的请求日志没有正常输出时,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
4月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
134 0
|
4月前
|
JavaScript 前端开发 网络协议