前后端分离之mockjs基本介绍

安装与使用
# 安装
npm install mockjs
#使用 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))
Mock.mock():根据数据模板生成模拟数据
1.rurl
可选。

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

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

表示数据模板,可以是对象或字符串。例如 { ‘data|1-10‘:[{}] }、‘@EMAIL‘。
4.function(options)
可选。

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

options
指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性
Mock.setup()
配置拦截 Ajax 请求时的行为。支持的配置项有:timeout。
Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: ‘200-600‘
})

指定被拦截的 Ajax
请求的响应时间,单位是毫秒。值可以是正整数,例如
400,表示 400 毫秒 后才会返回响应内容;也可以是横杠 ‘-‘
风格的字符串,例如 ‘200-600‘,表示响应时间介于 200 和
600 毫秒之间。默认值是‘10-100‘。
Mock.Random
Mock.Random 是一个工具类,用于生成各种随机数据
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 
var Random = Mock.Random
Random.email()
// => "[email protected]"
Mock.mock(‘@email‘)
// => "[email protected]"
Mock.mock( { email: ‘@email‘ } )
// => { email: "[email protected]" }

原文地址:https://www.cnblogs.com/raind/p/9454336.html

时间: 2024-10-28 21:37:35

前后端分离之mockjs基本介绍的相关文章

前后端分离之mockjs实战demo

基于vue-cli+webpack的demo 项目结构 axios文件夹用来创建axios相关配置: import axios from 'axios' import vue from 'vue' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 请求拦截器 axios.interceptors.request.use(function(config) { return con

Docker环境下的前后端分离项目部署与运维(一)项目简介及环境要求

项目简介 本教程将从零开始部署一个前后端分离的开源项目,利用docker虚拟机的容器技术,采用分布式集群部署,将项目转换成为高性能.高负载.高可用的部署方案.包括了MySQL集群.Redis集群.负载均衡.双机热备等等. 部署图 所用到的主流技术 Docker容器.前后端集群.MySQL集群.Redis集群.Haproxy负载均衡.Nginx负载均衡.Keepalived实现双机热备 前后端分离项目部署图 前后端分离项目开源框架介绍 本次教程所采用的前后端分离的项目开源框架是人人网的renren

vue+mockjs 模拟数据,实现前后端分离开发

在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发. 与以往的自己

《Spring Boot 入门及前后端分离项目实践》系列介绍

课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发.Spring Boot 介绍.前后端分离.API 规范等内容旨在让读者更加熟悉 SpringBoot 及企业开发中需要注意的事项并具有使用 SpringBoot 技术进行基本功能开发的能力:这最后的项目实战为课程的主要部分,我会带着大家实际的开发一个前后端分离的 Spring Boot 实践项目,

ASP.NET Core模块化前后端分离快速开发框架介绍之4、模块化实现思路

源码 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:http://129.211.40.240:6220 账户:admin 密码:admin 前端框架演示地址(临时) 地址:http://progqx5cu.bkt.clouddn.com/skins/index.html#/ 账户:admin 密码:admin 目录 1.开篇 2.快速创建一个业务模块 3.数据访问模块介绍 4.模块化实现思路 获取官方源码 为了方便查看源码,我们先获

JEECG-Boot 项目介绍——基于代码生成器的快速开发平台(Springboot前后端分离)

Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Design.强大的代码生成器让前端和后台代码一键生成,不需要写任何代码,保持jeecg一贯的强大,绝对是全栈开发福音!! JeecgBoot在提高UI能力的同时,降低了前后分离的开发成本,JeecgBoot还独创在线开发模式(No代码概念),一系列在线智能开发:在线配置表单.在线配置报表.在线图表设计.在线设计流程等等. JEECG宗旨是: 简

为什么前后端分离了,你比从前更痛苦?

? 你有没有遇到过: 前端代码刚写完,后端的接口又变了. 接口文档永远都是不对的. 测试工作永远只能临近上线才能开始. 为什么前后端分离了,你比从前更痛苦? 前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题.要想解决现在的痛,就要知道痛的原因: 为什么接口会频繁变动? 设计之初没有想好. 这需要提高需求的理解能力和接口设计能力. 变动的成本较低. 德国有句谚语:"朝汤里吐口水." 只有这样,才能让人们放弃那碗汤,停止不合理的行为.前后端同学坐在一起工作的时候效率会有提升,当后端

利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境

前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有2个问题不可避免:第一是前端调用后台接口时的跨域问题(因为前后端分开部署):第二是前端脱离后台服务后无法独立运行.本文总结最近一个项目的工作经验,介绍利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境的实践过程,希望能对你有所帮助. 注:

[转] 前后端分离开发模式的 mock 平台预研

引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都各自有自己的开发流程,构建工具,测试集合 关注点分离,前后端变得相对独立并松耦合 开发流程 后台编写和维护接口文档,在 API 变化时更新接口文档 后台根据接口文档进行接口开发 前端根据接口文档进行开发 开发完成后联调和提交测试 面临问题 没有统一的文档编写规范,导致文档越来越乱,无法维护和阅读 开