IT评测·应用市场-qidao123.com

标题: 前端数据模拟利器 Mock.js 深度解析 [打印本页]
作者: 用户国营    时间: 前天 15:50
标题: 前端数据模拟利器 Mock.js 深度解析
前端数据模拟利器 Mock.js 深度解析

一、Mock.js 核心价值

1.1 为何需要数据模拟


1.2 Mock.js 核心本领

  1. // 典型数据生成示例
  2. Mock.mock('/api/user', {
  3.   "users|5-10": [{
  4.     "id|+1": 1,
  5.     "name": "@cname",
  6.     "age|18-60": 1,
  7.     "email": "@email",
  8.     "address": "@county(true)"
  9.   }]
  10. })
复制代码
二、快速入门指南

2.1 安装与引入

  1. # NPM 安装
  2. npm install mockjs --save-dev
  4. # 浏览器直接引入
  5. <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
复制代码
2.2 底子利用模式

  1. // 1. 定义模拟规则
  2. const mockData = Mock.mock({
  3.   "list|10": [{
  4.     "id": "@guid",
  5.     "title": "@ctitle(15,25)",
  6.     "content": "@cparagraph(500)",
  7.     "createTime": "@datetime"
  8.   }]
  9. })
  11. // 2. 拦截Ajax请求
  12. Mock.mock(/\/api\/articles/, 'get', () => {
  13.   return mockData.list
  14. })
  16. // 3. 发起真实请求
  17. fetch('/api/articles')
  18.   .then(res => res.json())
  19.   .then(console.log)
复制代码
三、数据模板语法详解

3.1 底子占位符

占位符说明示例输出@boolean布尔值true@natural(1,100)自然数57@float(0,100,2,2)浮点数36.58@string(5)随机字符串“k8d9a”@cname中文姓名“王伟”@province省份“广东省”@image(‘200x100’)占位图URL“http://dummyimage.com/200x100” 3.2 复杂数据结构

  1. Mock.mock({
  2.   "order": {
  3.     "id": "@guid",
  4.     "createTime": "@datetime",
  5.     "price|100-500.2": 1,
  6.     "products|2-5": [{
  7.       "sku": "@string(8).toUpperCase()",
  8.       "name": "@ctitle(6)",
  9.       "spec": "@natural(1,5)XL"
  10.     }],
  11.     "user": {
  12.       "name": "@cname",
  13.       "vip|1-3": true
  14.     }
  15.   }
  16. })
复制代码
四、高级应用技巧

4.1 RESTful API 模拟

  1. // 用户资源接口模拟
  2. Mock.mock(/\/users\/\d+/, 'get', (options) => {
  3.   const id = options.url.split('/').pop()
  4.   return Mock.mock({
  5.     id,
  6.     name: '@cname',
  7.     age: '@natural(18,60)'
  8.   })
  9. })
  11. Mock.mock(/\/users/, 'post', (options) => {
  12.   const body = JSON.parse(options.body)
  13.   return Mock.mock({
  14.     id: '@guid',
  15.     ...body
  16.   })
  17. })
复制代码
4.2 动态相应处理

  1. // 分页查询模拟
  2. Mock.mock(/\/api\/records/, (options) => {
  3.   const params = new URLSearchParams(options.url.split('?')[1])
  4.   const page = parseInt(params.get('page')) || 1
  5.   const size = parseInt(params.get('size')) || 10
  6.   
  7.   return {
  8.     total: 100,
  9.     data: Mock.mock({
  10.       [`list|${size}`]: [{
  11.         id: '@guid',
  12.         name: '@ctitle',
  13.         'status|1': ['pending', 'done', 'failed']
  14.       }]
  15.     }).list,
  16.     page,
  17.     size
  18.   }
  19. })
复制代码
4.3 数据验证规则

  1. // 注册接口参数校验
  2. Mock.mock('/register', 'post', (options) => {
  3.   const { username, password } = JSON.parse(options.body)
  4.   
  5.   if (!username || username.length < 6) {
  6.     return Mock.mock({
  7.       code: 400,
  8.       message: '用户名至少6个字符'
  9.     })
  10.   }
  11.   
  12.   if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(password)) {
  13.     return Mock.mock({
  14.       code: 400,
  15.       message: '密码需包含字母和数字，至少8位'
  16.     })
  17.   }
  18.   
  19.   return Mock.mock({
  20.     code: 200,
  21.     data: {
  22.       userId: '@guid',
  23.       token: '@string(32)'
  24.     }
  25.   })
  26. })
复制代码
五、工程化实践方案

5.1 目录结构组织

  1. src/
  2.   mock/
  3.     modules/
  4.       user.js
  5.       product.js
  6.     index.js   # 统一导出
  7.     utils.js   # 工具函数
复制代码
5.2 生产环境隔离

  1. // webpack.config.js
  2. const isDev = process.env.NODE_ENV === 'development'
  4. if (isDev) {
  5.   require('./src/mock')
  6. }
  8. // 或者使用环境变量
  9. if (process.env.USE_MOCK) {
  10.   require('./mock')
  11. }
复制代码
5.3 真实接口切换

  1. // 配置示例
  2. const API_BASE = process.env.USE_MOCK
  3.   ? '/mock-api'
  4.   : 'https://real.api.com'
  6. // 请求封装示例
  7. function request(url, options) {
  8.   return fetch(`${API_BASE}${url}`, options)
  9. }
复制代码
六、常见问题办理方案

Q1：怎样模拟网络耽误？

  1. Mock.setup({
  2.   timeout: '200-600' // 随机延迟200-600ms
  3. })
  5. // 指定接口单独设置
  6. Mock.mock('/slow-api', {
  7.   // ...数据模板
  8. }, { delay: 1000 })
复制代码
Q2：怎样生成关联数据？

  1. // 保持城市与区号关联
  2. const cityMap = {
  3.   北京: '010',
  4.   上海: '021',
  5.   广州: '020'
  6. }
  8. Mock.mock({
  9.   "city": "@city",
  10.   "areaCode": function() {
  11.     return cityMap[this.city] || '0755'
  12.   }
  13. })
复制代码
Q3：怎样处理文件上传？

  1. Mock.mock('/upload', 'post', () => {
  2.   return Mock.mock({
  3.     code: 200,
  4.     data: {
  5.       url: "@image('300x250')",
  6.       size: "@natural(1024, 5120)"
  7.     }
  8.   })
  9. })
复制代码
七、最佳实践总结

八、扩展生态推荐


通过合理运用Mock.js，开辟团队可以实现：

建议结合具体业务场景机动选择Mock战略，在保证开辟服从的同时，建立可靠的前端数据模拟体系。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4