vue 使用 mock.js

已于 2022-11-25 10:11:11 修改
阅读量1.6k 收藏 5
点赞数
分类专栏： 前端 文章标签： vue.js webpack javascript
于 2022-11-25 10:07:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjl13598765406/article/details/128017654
版权

mockjs官方文档

https://github.com/nuysoft/Mock/wiki

1. 安装

npm install --save mockjs

在这里插入图片描述

2.封装mock使用

在 src下面创建一个mock目录，创建一个index.js文件，其它模拟的数据都放在和index.js文件同级，遍历所有mock下面的文件然后注册mock服务
在这里插入图片描述

import Mock from 'mockjs'

// 设置响应延时
Mock.setup({
  // 可以是整数，也可以是‘-’字符串
  timeout: '200-600'
})

const evnConfig = window.EVN_CONFIG

let configArray = []

if (evnConfig.mock) {
  // 使用webpack的require.context()遍历所有的mock文件
  const files = require.context('.', true, /\.js$/)
  files.keys().forEach((key) => {
    if (key === './index.js') return
    configArray = configArray.concat(files(key).default)
  })

  // 注册所有的mock服务
  configArray.forEach((item) => {
    let url = evnConfig.baseApiUrl
    url += item.url
    /**
     * RegExp(url + '.*') 使用正则匹配URL
     * item.method 请求的方法 POST/GET/PUT/DELETE
     * (options) => {} 返回的函数
     * options 可以获取到 body, type, url
     */
    Mock.mock(RegExp(url + '.*'), item.method, (options) => {
      console.debug(url, options)
      return Mock.mock(item.response)
    })
  })
}

例如 sso.js文件里面的请求

export default [
  {
    url: '/auth/v1/loginUser/search',
    method: 'post',
    timeout: 100,
    statusCode: 200,
    response: ({ query }) => {
      return {
        code: 200,
        msg: '成功',
        data: {
          userId: 1,
          userName: 'zhangsan',
          roleId: 2,
          roleName: '2',
          unitId: 3,
          unitName: '3'
        }
      }
    }
  },
  {
    url: '/system/app/config/v1/info',
    method: 'get',
    timeout: 100,
    statusCode: 200,
    response: ({ query }) => {
      return {
        code: 200,
        msg: '成功',
        data: {
          id: 34,
          appId: '统一网关',
          appIp: '127.0.0.1',
          appPort: 9001,
          delFlag: '0',
          searchValue: '',
          createBy: 'admin',
          createTime: '2022-10-10 14:43:27',
          updateBy: 'admin',
          updateTime: '2022-10-10 14:44:57',
          remark: '备注',
          params: {}
        }
      }
    }
  },
  {
    url: '/api/analysis-forecast-atk/page',
    method: 'get',
    timeout: 100,
    statusCode: 200,
    response: ({ query }) => {
      return {
        code: 0,
        msg: '成功',
        data: {
          total: 14,
          list: [
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },

            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            },
            {
              id: 1,
              srcIp: '10.10.10.127',
              dstIp: '5',
              atkType: '蠕虫病毒攻击',
              atkStartTime: '2022-09-28 16:44:12',
              atkCnt: 10,
              createTime: '2022-09-28 16:44:19',
              accountId: 5,
              dn: null
            }
          ],
          pageNum: 1,
          pageSize: 20,
          size: 1,
          startRow: 1,
          endRow: 1,
          pages: 1,
          prePage: 0,
          nextPage: 0,
          isFirstPage: true,
          isLastPage: true,
          hasPreviousPage: false,
          hasNextPage: false,
          navigatePages: 8,
          navigatepageNums: [1],
          navigateFirstPage: 1,
          navigateLastPage: 1
        }
      }
    }
  },
  {
    url: '/api/sys-config/project-info',
    method: 'get',
    timeout: 100,
    statusCode: 200,
    response: ({ query }) => {
      return {
        code: 0,
        msg: '成功',
        data: {
          copyright: 'Copyright © 2022 格尔安全 版权所有',
          version: '2.0.2207.08',
          project_name: '格尔安全 ',
          product_name: '网络综合管理软件111',
          product_alias: '安全管理'
        }
      }
    }
  },
  {
    url: '/api/common/list-dicts',
    method: 'get',
    timeout: 100,
    statusCode: 200,
    response: ({ query }) => {
      return {
        code: 0,
        msg: '成功',
        data: {
          deviceType: [
            {
              name: '边界防护设备',
              value: 1001
            },
            {
              name: '数据交换安全网关',
              value: 1002
            },
            {
              name: '安全监测系统',
              value: 1003
            },
            {
              name: '安全通信服务平台',
              value: 1004
            },
            {
              name: '安全保密套件',
              value: 1005
            },
            {
              name: '数据处理平台',
              value: 1006
            },
            {
              name: 'AQBM资源服务平台',
              value: 1007
            },
            {
              name: '内容安全告警',
              value: 8
            },
            {
              name: '其他',
              value: 1099
            }
          ],
          severity: [
            {
              name: '高',
              value: 'high'
            },
            {
              name: '中',
              value: 'middle'
            },
            {
              name: '低',
              value: 'low'
            },
            {
              name: '普通',
              value: 'info'
            }
          ],
          apiLogType: [
            {
              name: '性能接收数据接口',
              value: 1
            },
            {
              name: '安全事件接收接口',
              value: 2
            },
            {
              name: '日志信息接收接口',
              value: 3
            },
            {
              name: '分析结果接口',
              value: 4
            },
            {
              name: '介入认证接收接口',
              value: 5
            },
            {
              name: '安全事件查询接口',
              value: 11
            },
            {
              name: '日志信息查询接口',
              value: 12
            },
            {
              name: '性能事件查询接口',
              value: 13
            },
            {
              name: '策略下发接口',
              value: 21
            },
            {
              name: '策略下发查询接口',
              value: 21
            },
            {
              name: '用户登陆',
              value: 101
            },
            {
              name: '用户注销',
              value: 102
            },
            {
              name: '其他',
              value: 999
            }
          ],
          eventAnalysisType: [
            {
              name: '加固策略建议',
              value: '01'
            },
            {
              name: '已知攻击告警信息',
              value: '02'
            },
            {
              name: '未知攻击预警信息',
              value: '03'
            },
            {
              name: '朔源报告（或告警事件）',
              value: '04'
            },
            {
              name: '其他',
              value: '99'
            }
          ],
          eventType: [
            {
              name: '攻击告警',
              value: 1
            },
            {
              name: '包过滤告警',
              value: 2
            },
            {
              name: 'NAT告警',
              value: 3
            },
            {
              name: '端口映射告警',
              value: 4
            },
            {
              name: '代理转换告警',
              value: 5
            },
            {
              name: 'URL过滤告警',
              value: 6
            },
            {
              name: '邮件过滤告警',
              value: 7
            },
            {
              name: '内容安全告警',
              value: 8
            },
            {
              name: '行为告警',
              value: 9
            },
            {
              name: '病毒告警',
              value: 10
            },
            {
              name: '文件过滤告警',
              value: 11
            },
            {
              name: '入侵防御告警',
              value: 12
            },
            {
              name: '其他',
              value: 99
            }
          ],
          authAccountStatus: [
            {
              name: '停用',
              value: 0
            },
            {
              name: '启用',
              value: 1
            },
            {
              name: '注销',
              value: 2
            }
          ],
          authType: [
            {
              name: '认证',
              value: 1
            },
            {
              name: '注销',
              value: 2
            }
          ],
          synType: [
            {
              name: 'Telnet',
              value: 'Telnet'
            },
            {
              name: 'SSH',
              value: 'SSH'
            }
          ]
        }
      }
    }
  }
]

3. main.js 注册

import './mock/index'

在这里插入图片描述

4.我本地的请求配置

//开启mock
window.EVN_CONFIG.baseApiUrl = "http://127.0.0.1:8080"
window.EVN_CONFIG.ssoApiUrl = "http://127.0.0.1:8080"
window.EVN_CONFIG.baseApiRoot = "/api"
window.EVN_CONFIG.mock = true

在这里插入图片描述

5.参考链接

Mock.mock的使用及参数详解
Mockjs如何拦截带参数的GET请求
mock.js使用 mock获取get、post请求参数

代码改变生活-120
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Mock.js在Vue项目中的使用
m0_67403073的博客
08-02 464
这里是小飞侠Pan??，立志成为一名优秀的前端程序媛！！！本篇博客收录于我的github前端笔记仓库中，持续更新中，欢迎star~??httpsvalue属性值是字符串Stringstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。string通过重复string生成一个字符串，重复次数等于count。属性值是数字Numberstring通过重复string生成一个字符串，重复次数大于等于min，小于等于max。//...
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
在本文中，我们将深入探讨如何使用Vue.js框架和Mock.js库来模拟登录功能以及实现表格的增删改查。Vue.js是一个轻量级的前端JavaScript框架，它提供了强大的数据绑定和组件化特性，使得开发更加高效。Mock.js则是一个...
vue中mock.js初步简单使用
笑到世界都狼狈的博客
04-28 4387
最近项目需要重构，在画原型的空隙简单了解了一下mock.js。因为从进度上看，后台接口不会很快 给到前端，那前端也不能坐着干等着。所以可以通过mock.js先造一些数据来实现效果 mock文档地址 一、首先当然是要先安装一下mock.js了 npm install mockjs --save-dev 二、在main.js中导入mock.js 注:上线之前需要将其删掉 import { mockXHR } from '../mock' if (process.env.NODE_ENV ===
mockJs文档（二）
Start2019
12-21 1万+
mockJs官方文档 1. Mock.mock()：根据数据模板生成模拟数据。 2. Mock.setup()：配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。 3. Mock.Random：是一个工具类，用于生成各种随机数据。 4. Mock.valid(template, data)：校验真实数据 data 是否与数据模板 template 匹配。 5. Mock.toJSONSchema()：把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
小白学习Vue3之管理系统模板搭建（四）——mockjs&登录逻辑优化
最新发布
weixin_48160914的博客
04-29 617
mock，cookies
Vue项目中使用mockjs
sleepwalker_1992的专栏
03-24 1149
Vue项目中使用mockjs
Vue 使用 mockjs (返回数据、get、post 请求)
卡尔特斯
11-04 2675
Vue 使用 mockjs (返回数据、get、post 请求)
vue实战-mockjs模拟数据
bying666的博客
09-25 1242
在创建axios实例时的默认api改成’/mock’利用计算mapState。
vue+mock.js实现前后端分离
10-16
Vue.js 是一个轻量级的前端框架，而Mock.js 是一个用于模拟数据的工具，它们结合使用可以在开发过程中模拟后端API，使前端开发得以独立进行。 **安装Mock.js** 在Vue项目中使用Mock.js，首先需要通过npm 安装： ``...
Vue+mock.js+axios
11-08
Vue.js 是一个流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。它采用组件化的方式，使得代码可重用性高，易于维护。在本项目中，“Vue+mock.js+axios”指的是使用Vue.js作为主要开发框架，并结合mock....
ruoyi-vue 后端poi导出excel打不开，前端mockjs引起的
weixin_40164389的博客
09-16 2176
ruoyi-vue excle导出
Vue 集成mock.js
zhouzhiwengang的专栏
02-23 1300
mock.js 官网地址：mockjs.com/ mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。 使用方式 这里主要讨论在vue项目中，使用axios发送ajax请求，mock.js模拟数据的流程。 vue-cli搭建项目后，安装axios和mock.js npm install -S axios npm install -D mockjs 复制代码 在项目中新..
Vue项目引入Mock.js,只在开发环境打开，方便多人开发
qq_41549657的博客
06-13 1178
Vue项目引入Mock.js,只在开发环境打开，方便多人开发
mockjs简单方式的使用
鑫仔的博客
04-09 364
1.mockjs作用： 当后端的接口还没有给到我们前端时，此时需要测试系统，就可以用到mockjs，我们自己来模拟接口请求数据 2.使用 2.1 下载 npm install mockjs 2.2 创建一个文件夹mocker，里面创建index.js ，用来配置接口，接着在同级目录下创建json文件 2.3 webpack中导入mock 安装 webpack-api-mocker npm install webpack-api-mocker --save webpack-api-mocker 是一个
mockjs的基本使用
m0_60507322的博客
01-08 649
mockjs基本使用
Vue用json-server+mockjs来Mock数据
果冻豆人的博客
05-09 3327
环境配置 这里需要用到json-server和mockjs模拟插件。 json-server: https://github.com/typicode/json-server mockjs: http://mockjs.com/ 安装 npm install json-server –save-dev npm install mockjs –save-dev ...
Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）
zhouzuoluo的博客
06-13 1万+
  基础准备：1、npm安装vue-cli脚手架后，通过命令“ vue init webpack 项目名 ”来创建项目；2、了解mockjs，能拦截ajax请求，返回模拟的响应数据，实现前后端分离；（详细学习网址：https://blog.csdn.net/zhanglir333/article/details/78721585 或官网）3、了解 axios，基于http客户端的promise，面...
vue 中简单使用mock
热门推荐
逆风优雅的博客
02-20 1万+
首先，在vue项目中，安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save-dev # 使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev 二、在根目录下，新建一个mock文件 三、在vue.config.js文件中使用mock数据 四、配置mock中的index.js数据 const fs = re
vue 搭建mock.js
08-27
在Vue项目中搭建Mock.js可以模拟后端API的返回数据，以便在开发过程中进行前端数据的模拟和测试。以下是搭建Mock.js的步骤： 1. 首先，安装Mock.js。在Vue项目的根目录下打开终端，执行以下命令： ``` npm install mockjs --save-dev ``` 2. 创建一个mock文件夹，在该文件夹下创建一个mock.js文件。在mock.js文件中编写模拟的数据，例如： ```javascript import Mock from 'mockjs'; // 模拟GET请求 Mock.mock('/api/getData', 'get', { 'list|5': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 0 }] }); // 模拟POST请求 Mock.mock('/api/postData', 'post', { 'result': true, 'message': 'success' }); ``` 3. 在main.js或者其他入口文件中引入mock.js，并启用Mock.js拦截Ajax请求： ```javascript import './mock/mock'; ``` 4. 使用axios或其他网络请求库发起请求时，请求的URL与mock.js中定义的URL相对应即可。例如，在Vue组件中使用axios进行数据请求： ```javascript import axios from 'axios'; axios.get('/api/getData').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); axios.post('/api/postData', { data: 'mock data' }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 通过以上步骤，你就可以在Vue项目中搭建Mock.js来模拟接口数据了。请注意，mock数据仅用于前端开发和测试阶段，不要在生产环境中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值