Mockjs

最新推荐文章于 2025-08-09 10:46:53 发布
原创 最新推荐文章于 2025-08-09 10:46:53 发布 · 428 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

为什么要用Mockjs?

  • 开发时，后端还没有写好接口，前端只能写静态模拟数据。
  • 将模拟数据写在js文件里面,数据太多了,看的眼花缭乱。
  • 后端完成后接口后，我们前端又要挨个去改api的url。
  • 写模拟数据太麻烦.需要收集很多的资源，图片，地址，随机数等；


  • 安装 mock axios
    • 安装 mock axios
           
    
        1
       
           
    
        npm install mockjs axios
    • 安装 axios-mock-adapter

      axios-mock-adapter 是axios与mock配置器，简单来说就是把二者结合在一起的工具,axios-mock-adapter文档

           
    
        1
       
           
    
        npm install axios-mock-adapter --save-dev

    创建 mock

    新建src/mock/data/
    user
    .js

    这里

    user
    .js文件是初始化我们需要的数据,在进行导出,复制下面以下代码到src/mock/data/
    user
    .js。



vue-cli3 下通过 axios-mock-adapter 模拟接口，以及通过 mockjs 模拟数据
VITAMIN的博客
05-04 2024
在前端开发中，我们总是需要模拟请求或者数据来做一些简单的调试，或者验证逻辑代码，下面我将用「axios-mock-adapter」插件来模拟请求 首先我们先用「vue-cli3」创建一个项目「axios-mock」，按默认配置，回车就行。vue-cli3 vue create axios-mock 进入目录，执行命令，引入插件「axios」和「axios-mock-adapter」： ...
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vue-cli项目中使用mock结合axios-mock-adapter生成模拟数据
weixin_30657999的博客
03-08 222
http://mockjs.com/ mockjs官网 https://www.npmjs.com/package/axios-mock-adapter axios-mock-adapter官网 1.安装 npm i mockjs axios-mock-adapter --save-dev 2.创建数据 创建文件夹 users.js: import Mock fr...
【亲测免费】 axios-mock-adapter 安装和配置指南
gitblog_01292的博客
10-18 759
axios-mock-adapter 安装和配置指南 1. 项目基础介绍和主要编程语言 axios-mock-adapter 是一个用于模拟 HTTP 请求的 Axios 适配器。它允许开发者在不依赖外部服务器的情况下，轻松地模拟 HTTP 请求和响应。该项目主要使用 JavaScript 编写，适用于 Node.js 环境和浏览器环境。 2. 项目使用的关键技术和框架 Axios: 一个基于 ...
Mock js 的理解以及应用
责任与担当
08-02 6760
官网介绍：http://mockjs.com/ 1、安装 1.1、安装：yarn add mockjs -S 输入：yarn add mockjs -S （在当前项目下安装 Mock） myapp 是项目名称 1.2、看网站的示例，实例就是语法 1.3、创建文件夹 在项目下创建 》 mock文件夹 》再创建 index.js 总结 mock.mock() 参数1：请求地址 选...
如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发
热门推荐
dadiyang的博客
03-25 3万+
前后端分离分工协作是一个非常高效的做法，但是有时前后端分离不彻底会很痛苦。前后端本来应该是异步进行的，进度互不影响，但是在没有mock的时候，前端却严重依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。自己写一些模拟数据一定程度上能解决这个矛盾，但是配置烦琐，且开发环境和生产环境切换，开发时mock数据与后端接口切换很麻烦。可能一不小心就把自己的模拟数据就扔到线上去了！还有，对于后端工程师对前...
MockJs
Wu_whiteHyacinth的博客
11-04 421
MockJS
学习使用 mockjs
青蛙king的博客
11-21 2181
mock.js 官网生成随机数据，拦截 Ajax 请求。属性名（必选）、属性值（必选）和生成规则（可选）。属性名 和 生成规则 之间必须用竖线|分隔。
mockJS
budloOvo的博客
10-30 479
Mock.js的基本使用！！！！！
VUE 修复MOCKJS ResponseType BUG
03-22
然而，在开发过程中，我们可能会遇到各种问题，其中之一就是在使用MOCKJS进行模拟数据时遇到的`ResponseType`错误。本文将深入探讨这个BUG及其解决方案。 首先，理解`ResponseType`的概念至关重要。在HTTP请求中，`...
uin-app+mockjs实现本地数据模拟
10-14
const Mockjs = require('mockjs'); const Random = Mockjs.Random; const phonePrefix = ['132', '135', '189']; const index = Math.floor(Math.random() * phonePrefix.length); const phone = phonePrefix...
express+mockjs实现模拟后台数据发送功能
10-18
let Mock = require('mockjs'); ``` 2. **创建服务端文件server.js** 初始化Express实例，并引入所需的模块： ```javascript let app = express(); ``` 3. **配置接口路由并设置监听端口** 可以配置一个...
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
07-06
内容概要：该 Vue3-demo 是基于 Vue3 框架搭配 Element-Plus ui库，建立的简单工程，并搭建了 Mockjs 和 axios工具，可以快速开发的工程，已经成功引入并建立了一个基于 Element-Plus 库中 table 组件的页面;...
[element-plus] flex布局 el-table表格设置百分比高度失效
qq_14993591的博客
08-08 240
1
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 968
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
Vue3 学习教程，从入门到精通， Vue 3 实例选项语法详解与案例代码(29）
qq_45746668的博客
08-07 1204
本文详细介绍了Vue 3的实例选项语法，包括数据选项、DOM选项、生命周期钩子等核心概念。通过一个完整的待办事项应用示例，展示了各选项的实际应用场景，如data定义响应式数据、methods编写组件方法、computed计算属性、watch监听数据变化等。示例代码包含详细注释，涵盖组件注册、指令定义、事件处理等常见功能，并演示了从父组件到子组件的数据传递和通信方式。文章适合Vue 3初学者全面了解组件选项的用法和组合方式。
2025最新高频前端面试题解析（含Vue/React/JS核心考点）
最新发布
2301_80346402的博客
08-09 960
事件冒泡是事件流的一个阶段，事件流分为捕获阶段、目标阶段和冒泡阶段。事件冒泡是指从内向外逐层传播，从子元素到父元素再到祖先元素再到document再到window。可以使用evevt.stopropagation()阻止事件冒泡。计算属性是声明式数据属性，它用来计算data的数据并将计算结果返回，它不会修改data中的数据的值，当它所依赖的数据发生变化时，它才需要重新计算，当所依赖的数据未发生变化，不需要重新计算，只需在缓存中获取即可。
mockjs
03-11
### 如何使用 Mock.js 进行数据模拟 #### 安装 Mock.js 库 为了能够在项目中使用 Mock.js，首先需要安装该库。可以通过 npm 或者 yarn 来安装： ```bash npm install mockjs --save-dev ``` 或者 ```bash yarn add mockjs --dev ``` #### 配置 Mock 数据文件 在 Vue 项目的 `src` 文件夹下创建一个新的名为 `mock` 的目录，并在此目录内建立一个 JavaScript 文件用于配置所有的 API 模拟逻辑。 ```javascript // src/mock/index.js import Mock from 'mockjs'; const data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1 }] }); Mock.mock('/api/users', 'get', () => { return { code: 200, message: 'success', result: data.list }; }); ``` 这段代码定义了一个简单的用户列表接口 `/api/users` ，它会返回一组由 Mock.js 自动生成的数据[^1]。 #### 导入 Mock 到主程序入口处 为了让整个应用程序能够识别到这些模拟的 API 路径，在 main.js 中引入刚刚创建好的 index.js 文件即可让其生效。 ```javascript // src/main.js import './mock'; // 加载mock服务 ... new Vue({...}) ``` 通过这种方式设置后，当发起 GET 请求至 `/api/users` 地址时就会触发上述自定义的响应处理函数。 #### Axios 实践中的应用 如果正在使用的 HTTP 工具是 axios，则可以进一步优化以确保每次请求都能被拦截下来并通过 Mock 处理。可以在 axios 默认配置里加入如下所示的内容: ```javascript // src/utils/axios.js import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import { userLogin } from '../mock/api'; const instance = new axios.create(); if (process.env.NODE_ENV === 'development') { let mock = new MockAdapter(instance); mock.onPost('/login').reply(config => { return Promise.resolve([200, userLogin()]); }); } export default instance; ``` 这里展示了如何利用 `MockAdapter` 对象来监听特定 URL 并给予预设的回答。注意这里的条件判断是为了保证只在开发环境中启用此功能[^3]。 #### 总结与优势分析 采用 Mock.js 不仅可以让前端开发者摆脱对于实际服务器环境依赖的问题，而且还可以轻松实现各种复杂场景下的测试需求。由于支持多种类型的动态生成机制以及良好的兼容性和易用性等特点使得这项技术成为现代 Web 开发过程中不可或缺的一部分[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值