{"id":13564147,"url":"https://github.com/oldqian/mockjs","last_synced_at":"2025-04-03T21:30:26.590Z","repository":{"id":217999961,"uuid":"89679441","full_name":"oldqian/mockjs","owner":"oldqian","description":"一个webpack 搭建的 mock 案例演示","archived":false,"fork":false,"pushed_at":"2017-08-24T10:16:48.000Z","size":6,"stargazers_count":63,"open_issues_count":0,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-21T19:17:01.756Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oldqian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-28T07:21:47.000Z","updated_at":"2024-07-26T01:48:29.538Z","dependencies_parsed_at":null,"dependency_job_id":"be63d44b-04bb-4c4f-a5a9-706d2150f4fc","html_url":"https://github.com/oldqian/mockjs","commit_stats":null,"previous_names":["oldqian/mockjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oldqian%2Fmockjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oldqian%2Fmockjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oldqian%2Fmockjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oldqian%2Fmockjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oldqian","download_url":"https://codeload.github.com/oldqian/mockjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247024144,"owners_count":20870939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:01:27.148Z","updated_at":"2025-04-03T21:30:26.339Z","avatar_url":"https://github.com/oldqian.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"**相信大家都存在这样的一个困扰,在前后端分离的大环境下,\n前端需要后端的接口去完成页面的渲染,\n但是大部分的情况下,前后端需要同时进行开发,\n这种情况下,后端还没完成数据输出，前端只好写静态模拟数据。**\n\n### 那么问题就来了\n\n- 数据太长了，将数据写在js文件里，完成后挨个改url。\n\n- 某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。\n\n- 想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模\n拟数据。\n\n- 特殊的格式，例如IP,随机数，图片，地址，需要去收集。\n\n****\n\n##### 前几天看到mock.js的一些介绍,然后自己写了个案列跑起来了,发现还是比较实用的,所以这边整理出文章,推荐给大家\n\n[mock案例-github地址](https://github.com/ToNiQian/mockjs)\n\n### 1.mock是什么？\n\n[mock官网](http://mockjs.com/)\n\n\u003e ![mock官网介绍截图](http://upload-images.jianshu.io/upload_images/2701853-5f70765db4e93526.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n****\n\n### 2.mock可以模拟哪些数据?\n\n- string\n- number\n- bool\n- array\n- object\n- guid\n- id\n- title \n- paragraph\n- image\n- address\n- date\n- time\n- url\n- email\n- ip\n- regexp\n\n***\n\n**[mock示例文档](http://mockjs.com/examples.html)**\n\n**直接附上代码**\n\n```\n// 使用 Mock\nlet Mock = require('mockjs');\nMock.mock('http://1.json','get',{\n    // 属性 list 的值是一个数组，其中含有 1 到 3 个元素\n    'list|1-3': [{\n        // 属性 sid 是一个自增数，起始值为 1，每次增 1\n        'sid|+1': 1,\n        // 属性 userId 是一个5位的随机码\n        'userId|5': '',\n        // 属性 sex 是一个bool值\n        \"sex|1-2\": true,\n        // 属性 city对象 是对象值中2-4个的值\n        \"city|2-4\": {\n            \"110000\": \"北京市\",\n            \"120000\": \"天津市\",\n            \"130000\": \"河北省\",\n            \"140000\": \"山西省\"\n        },\n        //属性 grade 是数组当中的一个值\n        \"grade|1\": [\n            \"1年级\",\n            \"2年级\",\n            \"3年级\"\n        ],\n        //属性 guid 是唯一机器码\n        'guid': '@guid',\n        //属性 id 是随机id\n        'id': '@id',\n        //属性 title 是一个随机长度的标题\n        'title': '@title()',\n        //属性 paragraph 是一个随机长度的段落\n        'paragraph': '@cparagraph',\n        //属性 image 是一个随机图片 参数分别为size, background, text\n        'image': \"@image('200x100', '#4A7BF7', 'Hello')\",\n        //属性 address 是一个随机地址\n        'address': '@county(true)',\n        //属性 date 是一个yyyy-MM-dd 的随机日期\n        'date': '@date(\"yyyy-MM-dd\")',\n        //属性 time 是一个 size, background, text 的随机时间\n        'time': '@time(\"HH:mm:ss\")',\n        //属性 url 是一个随机的url\n        'url': '@url',\n        //属性 email 是一个随机email\n        'email': '@email',\n        //属性 ip 是一个随机ip\n        'ip': '@ip',\n        //属性 regexp 是一个正则表达式匹配到的值 如aA1\n        'regexp': /[a-z][A-Z][0-9]/,\n    }]\n})\n```\n\n***\n\n### 3.如何拦截ajax请求\n\n**[mock文档](https://github.com/nuysoft/Mock/wiki/Mock.mock)**\n\n```\nMock.mock( rurl, rtype, template )\n \n如 Mock.mock('1.json','get',{\n   'sid|+1': 1,\n} )\n记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，\n将根据数据模板 template 生成模拟数据，并作为响应数据返回。\n```\n\n**注:从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。**\n\n### 4.案例代码\n\n**[mock案例-github地址](https://github.com/ToNiQian/mockjs)**\n\n\u003e 用webpack 搭建了一个环境,mock文件里面放入跟后端定义好的接口模型和配置入口文件 引入需要的mock.js 文件 \n\n```\nprocess.env.NODE_ENV=='mock' \u0026\u0026 require('./mock/1.js');\nprocess.env.NODE_ENV=='mock' \u0026\u0026 require('./mock/2.js');\nvar $ = require('jquery');\n$(function () {\n    /**\n     * 请求1 get 请求\n     */\n    $.ajax({\n        url: 'http://1.json',\n        type: 'get'\n    }).done(function(data,status){\n        console.log('我是请求1'+data)\n    })\n\n    /**\n     * 请求2 post 请求\n     */\n    $.ajax({\n        url: 'http://2.json',\n        type: 'post'\n    }).done(function(data,status){\n        console.log('我是请求2'+data)\n    })\n})\n```\n\n\u003e ![项目截图](http://upload-images.jianshu.io/upload_images/2701853-07c4e390b25f095e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n ***\n\n### 5. 如何在后端接口完成的时候,取消mock数据\n\n```\nnew webpack.DefinePlugin({\n       'process.env': {\n            NODE_ENV: '\"mock\"'\n       }\n}),\nprocess.env.NODE_ENV=='mock' \u0026\u0026 require('./mock/1.js');\nprocess.env.NODE_ENV=='mock' \u0026\u0026 require('./mock/2.js');\n```\n\n\u003e **根据webpack环境,在需要mock的时候,配置环境为mock,\n在不需要mock的时候,只需要修改node_env 环境就可以了\n无需注释代码,就可以完美解决后端接口还没完成的情况。**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foldqian%2Fmockjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foldqian%2Fmockjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foldqian%2Fmockjs/lists"}