Mock 使用教程

「爱情、让人受尽委屈。」 2022-11-16 05:47 250阅读 0赞

# Mock 使用教程 #

## mock模板 ##

let Mock = require("mockjs");
    let basicData = Mock.mock({
        
      "list|1-100": [
        {
        
          "id|+1": 1,
          isBoolean: "@boolean(10, 0, true)", //百分之百的true
          naturalNumber: "@natural(1, 1000)", //大于等于零的整数
          integer: "@integer(0)", //随机整数
          float: "@float(1, 100, 3, 6)", //随机浮点数,
          character: '@character("upper")', //一个随机字符
          string: '@string("lower", 5, 20)', //一串随机字符串
          range: "@range(1, 10, 2)", //一个整形数组，步长为2
        },
      ],
    });
    
    // console.log(basicData);
    
    let Date = Mock.mock({
        
      "dateList|10": [
        {
        
          date: "@date",
          "date-yyyy-MM-dd": "@date(yyyy-MM-dd)",
          "date-yy-MM-dd": "@date(yy-MM-dd)",
          "date-y-MM-dd": "@date(y-MM-dd)",
          "date-y-M-d": "@date(y-M-d)",
          "line-through": "------------------------------------------------",
          timessss: "@time", //随机的时间字符串,
          "time-format": "@time()", //指示生成的时间字符串的格式, default: 'HH: mm: ss',
          "time-format-1": '@time("A HH:mm:ss")',
          "time-format-2": '@time("a HH:mm:ss")',
          "time-format-3": '@time("HH:mm:ss")',
          "time-format-4": '@time("H:m:s")',
          "time-format-5": "@time(yyyy.M.d)",
          datetime: '@datetime("yyyy-MM-dd A HH:mm:ss")', //返回一个随机的日期和时间字符串
          dateNow: '@now("second")', //获取当前完整时间
        },
      ],
    });
    // console.log(Date);
    
    let imageList = Mock.mock({
        
      "imageList|5": [
        {
        
          "id|+1": 1,
          img: "@image", //生成一个随机的图片地址,
          "img-1": '@image("200x100", "#000", "#fff", "png", "Mock.js")', //生成一个200*100, 背景色#000，前景色#fff, 格式png, 文字mock.js的图片
        },
      ],
    });
    // console.log(imageList);
    
    let paragraph = Mock.mock({
        
      "paragraphList|5": [
        {
        
          "id|+1": 1,
          paragraph1: "@cparagraph(2)", //生成一段2句话的中文文本,
          paragraph2: "@paragraph(3)", //生成一个3句话的英文文本
          title: "@title", //随机生成一个英文标题
          ctitle: "@ctitle", //随机生成一个中文标题
        },
      ],
    });
    // console.log(paragraph);
    
    let name = Mock.mock({
        
      "nameList|5": [
        {
        
          "id|+1": 1,
          name: "@name", //英文名,
          cname: "@cname", //中文名
        },
      ],
    });
    // console.log(name);
    
    let webList = Mock.mock({
        
      "webList|5": [
        {
        
          "id|+1": 0,
          url: '@url("http", "baidu.com")', //url: http://www.baidu.com
          protocol: "@protocol", //随机生成一个url协议
          domain: "@domain", //随机生成一个域名,
          email: "@email", //随机生成一个邮箱地址,
          ip: "@ip", //随机生成一个ip地址
        },
      ],
    });
    // console.log(webList);
    
    let address = Mock.mock({
        
      "addressList|5": [
        {
        
          "id|+1": 1,
          region: "@region", //生成一个大区
          province: "@province", //生成一个省份
          city: "@city", //生成一个市
          county: "@county", //一个县
          zip: "@zip", //邮政编码
        },
      ],
    });
    // console.log(address);

> 上面是 mock 模板，可以把需要的一些数据改成模板值，但是图片链接什么的（比如说CDN链接）就不用改了

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js 教程：如何使用 Mock.js 进行前端开发

[Mock.js][] 是常用的生成随机数据，拦截 Ajax 请求的 JavaScript 库。在软件开发的初期，后端 API 接口可能还没有实现或者还没有完全实现。在这种情况

古城微笑少年丶/ 2024年03月22日 12:02/ 0 赞/ 100 阅读

相关 Saber教程：Mock数据

Mock简介 Mock是模拟对象的意思，用于进行被测组件对外依赖的模拟。 Mock 是测试驱动开发必备之利器, 只要有状态, 有依赖, 做单元测试就不能没有

怼烎@/ 2024年02月25日 04:20/ 0 赞/ 27 阅读

相关 mock使用详解

场景1：在vue项目中使用mock.js 步骤1.搭建测试项目步骤1.1 创建项目命令： vue create mock-demo

我会带着你远行/ 2023年07月24日 08:53/ 0 赞/ 33 阅读

相关 vue中使用mock

1.安装axios npm install axios 2.安装mock npm install mockjs 3.新建config.js ![202

本是古典何须时尚/ 2023年02月14日 15:59/ 0 赞/ 259 阅读

相关 Mock 使用教程

Mock 使用教程 mock模板 let Mock = require("mockjs"); let basicData = Mock.mock({

「爱情、让人受尽委屈。」/ 2022年11月16日 05:47/ 0 赞/ 251 阅读

相关 Mock 使用方式 + 在 Vue 项目中使用 Mock

Mock Mock 介绍搭建测试项目 mock.js 模拟数据的基础使用方式 Vue 项目中使用 mock.js 拦截数据后端接口写好后

古城微笑少年丶/ 2022年08月29日 00:17/ 0 赞/ 402 阅读

相关 mock.js使用方法

简介生成随机数据，拦截 Ajax 请求前后端分离让前端攻城师独立于后端进行开发。增加单元测试的真实性通过随机数据，模拟各种场景。开发无侵入不

向右看齐/ 2022年05月15日 14:56/ 0 赞/ 268 阅读

相关 Mock.js基本使用

一简介 > 项目中后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行开发。为了方便前端代码自测，提高开发效率，可以使用mo

朴灿烈づ我的快乐病毒、/ 2021年09月18日 11:22/ 0 赞/ 399 阅读

相关 mock使用方法

安装 Mock.js 为了模拟后台接口提供页面需要的数据，我们引入 Mock.js 为我们提供模拟数据，而不用依赖于后台接口的完成。安装依赖执行如下命令，安装

港控/mmm°/ 2021年07月26日 21:53/ 0 赞/ 533 阅读

相关 mock JQuery怎么使用

mock JQuery怎么使用 mock JQuery 基本的使用 mock.js - 随机数七大规则 Random函数正则 - 阻止ajax

小灰灰/ 2020年06月17日 16:32/ 0 赞/ 789 阅读