MockJs入门-vue使用mockjs

最新推荐文章于 2024-08-15 09:21:27 发布
最新推荐文章于 2024-08-15 09:21:27 发布
阅读量578 收藏
点赞数
文章标签： mysql 数据库 sql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37853873/article/details/121448893
版权

安装必备库

# 安装mockJs
npm install mockjs
# 安装axios用于获取mockjs数据
npm install axios
# 使用json5解决json文件无法添加注释问题
npm install json5

在这里插入图片描述

在这里插入图片描述

参考：https://www.bilibili.com/video/BV1PE411A7U6?p=4

阿里灵灵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手摸手教你在vue项目中使用mockjs模拟数据入门
qq_15390381的博客
03-05 962
简介 话不多说，把手拿来。 珍爱生命，远离后台。 背景 在前后端分离模式项目开发过程中，前端的界面展示、交互逻辑往往需要后台接口数据支撑，然而万恶的后台总跟不上有我们美丽的前端小姐姐进度。 于是我们不由得仰天长叹，难道就没有即无需依赖后台又能完美展示界面数据，即能保证前端交互的完整性又不太费事儿的方法吗？ 答案当然是有的~~~~ 下面就请我们的主角登场 Mockjs 介绍 Mock官网首页是这么定...
vue项目中mock.js的使用及基本用法
12-09
官方网址：http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。 使用方式 这里主要讨论在vue项目中，使用axios发送ajax请求，mock.js模拟数据的流程。 vue-cli搭建项目后，安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹，来设置要产生的模拟数据的格式。 3. 设想这样一个场景，页面在打开时要从数据库获取一个新闻列表，现
mockjs在vue项目中的基本使用
weixin_43028853的博客
10-30 224
一、使用mockjs的背景 在后端接口没有开发之前，前端可以自己模拟接口进行开发，并且可以实现请求的拦截，根据mockjs的规则来实现随机模拟数据返回的数据进行交互，进而达到前后端分离开发。 二、vue项目中引入mockjs npm install mockjs -save 三、使用mockjs 1、基础使用 在根目录中新建一个mock文件夹，并新建index.js const Mock = require('mockjs'); Mock.mock('/user/userInfo', 'post', r
如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发
热门推荐
dadiyang的博客
03-25 3万+
前后端分离分工协作是一个非常高效的做法，但是有时前后端分离不彻底会很痛苦。前后端本来应该是异步进行的，进度互不影响，但是在没有mock的时候，前端却严重依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。自己写一些模拟数据一定程度上能解决这个矛盾，但是配置烦琐，且开发环境和生产环境切换，开发时mock数据与后端接口切换很麻烦。可能一不小心就把自己的模拟数据就扔到线上去了！还有，对于后端工程师对前...
vue中mock.js初步简单使用
笑到世界都狼狈的博客
04-28 4399
最近项目需要重构，在画原型的空隙简单了解了一下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入门-前端接口请求数据模拟
reffrselom的博客
12-25 393
使用场景： 前后端分离，接口返回数据不能及时提供，导致前端效果调试受限制。 这时我们就需要自己模拟数据来进行前端效果调试，而mockJS就是帮助我们提高模拟数据效率的一套工具库。 测试环境： vue@3.0，axios服务请求 mock安装 npm install mockjs --save mockjs配置 在main.js中配置 import Mock from 'mockjs' Vue.p...
vue---vue-cli项目使用mockjs模拟数据
maidu_xbd的博客
12-20 541
目录 一、mockjs介绍 二、vue-cli项目使用mockjs模拟数据 一、mockjs介绍 mock.js可以用来生成随机数据（文本、数字、布尔值、日期、邮箱、链接、图片、颜色等），拦截Ajax请求，让前端项目可独立于后端进行开发。具体介绍见【http://mockjs.com/】 （1）mockjs语法规范 数据模板定义：数据模板中的每个属性由 3 部分构成：属性名name、生成规则rule、属性值value。属性名 和 生成规则 之间用竖线 | 分隔,生成规则 是可选的。 .
Vue开发实例（13）之axios和mockjs的安装与使用
编程界明世隐的博客
05-09 8404
Vue开发实例（13）之axios和mockjs的安装与使用，包含axios的get、post请求；mockjs模拟增删改成数据
vue项目中应用mockjs
qq_42830736的博客
11-30 1952
如何在vue项目中应用mockjs
vue-cli项目中使用Mockjs详解
10-18
在介绍Vue-cli项目中使用Mock.js的详细过程之前，我们先来了解下前端技术的发展背景和Mock.js的作用。在早期的jQuery时代，前端与后端通常合为一体，前端工作依赖于后端接口的开发。随着Node.js的出现和前后端分离的...
uni-preset-vue-master uniapp项目模板
12-02
uni-preset-vue-master则是一个专为uni-app量身定制的项目模板，它旨在提供一个高效、便捷的开发起点，帮助开发者快速搭建项目，降低入门难度，提高开发效率。 uni-app是由H5开发者社区DCloud推出的开源框架，支持...
uni-preset-vue模板
12-24
【uni-preset-vue模板】是专为uni-app框架设计的一个预设模板，它简化了开发者在使用uni-app时的项目初始化过程，提供了基础的项目结构和配置，使得开发跨平台移动应用变得更加便捷。uni-app是由DCloud（即数字天堂...
ruoyi-vue-pro开发指南PDF下载
03-07
ruoyi-vue-pro开发指南PDF下载 包含各种组件开发指南
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
mockjs入门使用
zhangxiaobai___的博客
10-24 312
mockjs 入门教程
浅谈SQL Server、Oracle和MySQL
最新发布
a876106354的博客
08-15 448
SQL Server 是Microsoft公司推出的关系型数据库管理系统。具有使用方便可伸缩性好与相关软件集成程度高等优点，可跨越从运行MicrosoftWindows 98的膝上型电脑到运行2012 的大型多处理器的服务器等多种平台使用。Microsoft SQL Server 是一个全面的数据库平台，使用集成的商业智能(BI)工具提供了企业级的数据管理。数据库引擎为关系型数据和结构化数据提供了更安全可靠的存储功能，使您可以构建和管理用于业务的高可用和高性能的数据应用程序。MySQL是一个。
Java实现MySQL表结构导出
promise524的博客
08-12 337
Java实现MySQL表结构导出
【面试宝典】mysql常见面试题总结(上)
Tsing
08-11 671
MySQL中的事务是一个作为单个逻辑工作单元执行的一系列操作。事务具有ACID属性，即原子性（Atomicity）、一致性（Consistency）、隔离性（Isolation）和持久性（Durability）。这些属性确保了事务的完整性和可靠性。原子性：事务中的所有操作要么全部完成，要么全部不执行，不会结束在中间某个环节。一致性：事务操作前和操作后，数据满足完整性约束，数据库保持一致性状态。隔离性。
mockjs TS VUE全局使用
06-21
Mock.js 是一个用于模拟 HTTP 请求和数据的 JavaScript 库，它可以帮助你在单元测试或集成测试中替换真实的 API 调用。在 TypeScript 和 Vue.js 中全局使用 Mock.js，你可以以下几个步骤来设置： 1. **安装依赖**： 使用 npm 或 yarn 安装 `mockjs` 和可能的 TypeScript 配置库，如 `@types/mockjs`： ```bash npm install mockjs typescript @types/mockjs --save-dev # 或者 yarn add mockjs typescript @types/mockjs --dev ``` 2. **创建全局mock实例**： 在你的项目入口文件（通常为 `main.ts`）中，导入并配置 mockjs： ```typescript import * as mock from 'mockjs'; // 创建全局mock对象 const mockData = mock.data; ``` 3. **在Vue组件中使用mock数据**： 在你的 Vue 组件里，你可以使用 `mockData` 来生成随机数据或定义特定的响应： ```typescript export default { data() { return { apiResponse: mockData('{"status":0,"msg":"成功","data":[]}', { status: 200 }) // 假设这是一个 API 调用 }; }, }; ``` 这里 `mockData` 接收一个字符串模板（JSON格式）和可选的选项对象，用于定制返回的数据。 4. **在测试中使用mock数据**： 在测试文件中，你可以继续使用这个全局的 mock 数据，例如在 `vue-test-utils` 或 `jest` 测试框架下： ```typescript import { shallowMount } from '@vue/test-utils'; import YourComponent from '@/components/YourComponent.vue'; test('YourComponent mock test', async () => { const wrapper = shallowMount(YourComponent); expect(wrapper.vm.apiResponse).toEqual({ /*期望的数据格式*/ }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值