Vue Mock

最新推荐文章于 2024-08-05 14:39:04 发布
最新推荐文章于 2024-08-05 14:39:04 发布
阅读量607 收藏
点赞数 1
分类专栏： # Vue.js # Vue-admin-template 文章标签： Vue Mock Cross origin Cross origin mock.js mock.js Cross origin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LitongZero/article/details/87989996
版权

Vue Mock 的一个坑

背景

我在使用Vue-admin-template时遇到一个问题，类似于浏览器，或者跨域问题，先上个截图。

在这里插入图片描述

解决过程

1、发现问题后，当然是先百度(Google)了。

2、发现大部分都是说浏览器的配置问题，我试了很多，发现还是不行。
3、就在绝望之际，发现，他们的问题截图跟我的不太一样。我发现，我的问题，是由mock.js抛出来的。
4、然后，大致了解了一下Mock.js是什么东西–生成随机数据，拦截 Ajax 请求,应该是个模拟数据的东西。
5、后来一想，为什么会被拦截呢？看了下配置文件

在这里插入图片描述

发现，没有加http://,修改后，如下

在这里插入图片描述

终于可以访问了！

LitongZero
关注
专栏目录
vue2/3 - 使用mock模拟数据，axios发送请求时报错Request failed with status code 404报错，请求数据报错404，vue mock.js 报错详细解决！
高级前端工程师
07-10 2051
vue，nuxt，mock，插件，模拟请求接口数据，报错，用mockjs模拟数据，axios发送get请求时出错，路径没问题为什么会404，接口地址没有错，请求数据报错404，http请求出现了问题，axios，详细解决教程，404，mock.js请求数据报错404，vue报错解决，浏览器，请求，URL请求地址，正确，错误，Request failed with status code 404，vue报错解决:mock.js请求数据报错404_vue中使用mockjs没有数据，vue-cli中mock本地j
vue项目中使用mock
m0_57712926的博客
10-27 342
目录前言一、mock1. 什么是mock?2. 使用场景3. 实现方式二、vue项目中如何使用？1. 步骤2. 代码演示3. 效果展示总结 前言 当后端接口还没有开发完毕的时候，我们又急需一份数据来展示看效果时应该怎么办呢？这时我们可以根据后端提供给我们的接口文档，来弄一份真的假数据来协助我们完成前端开发工作，一起来看看如何实现吧~ 一、mock 1. 什么是mock? mock：假的 前端程序员提到的mock数据的含义是：真的假数据 真的：符合接口规范要求的。 假数据：数据是人为创建出来的
vue 使用mock
Lval的博客
03-17 2880
下载mock npm install mock vue中使用mock.js 1.在src下新建一个mock模块 2.在mock模块下新建index.js文件统一管理mock数据 import Mock from 'mockjs' // 设置响应延时 Mock.setup({ timeout: '200-600'//可以是整数，也可以是‘-’字符串 }); let configArray = []; //使用webpack的require.context()遍历所有的mock文件 const fi
【前端】 如何在 Vue.js 中使用 Mock 数据：教程与技巧
最新发布
九日的博客
08-05 883
在开发过程中，为了测试和开发前端功能，你常常需要用到模拟（mock）数据。Vue.js 提供了灵活的方式来处理数据请求和更新，但在没有真实后端的情况下，我们可以使用 Mock 数据来代替真实 API 请求。本文将介绍如何在 Vue.js 项目中设置和使用 Mock 数据。
Vue进阶（十三）：MOCK
IT全栈 华强工作室
12-16 6895
mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，编写单元测试。其可模拟Ajax并返回模拟数据，使前端不用去调用后端的接口，方便测试。
在vue项目中mock的使用
_陌默
09-22 4763
1. mock的作用 模拟后台接口，提供页面需要的数据。 2. mock的语法规范 使用例子： // 使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1 }] }) // 输出结果 console.log(
vue mock数据
萌新不会永远是萌新的博客
10-19 361
我的使用场景 是 使用vue 并且是 vue-cli3.0 首先 这个是mock数据的结构 下面看一下 apirouter.js 代码 // Mock data by hicoldcat var express = require('express') var apiRoutes = express.Router(); var init = require('./mockdata/ge...
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
liaozhixiangjava的博客
09-26 352
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
vue+mock.js实现前后端分离
10-16
【Vue+Mock.js 实现前后端分离】 在现代Web开发中，前后端分离是一种常见的架构模式，它将前端UI和后端服务解耦，提高了开发效率和系统的可维护性。Vue.js 是一个轻量级的前端框架，而Mock.js 是一个用于模拟数据的...
vue-cli-plugin-mock:vue-cli3插件模拟
05-26
vue-cli-plugin-mock 用于本地模拟数据功能的软件包 简单的写作（Express.js风格） 观看文件更改 自动重装模拟服务器 支持esm / cjs样式模块 安装 yarn add vue-cli-plugin-mock 用vue-cli3安装 vue add vue-cli-...
Vue+Mock.js模拟登录和表格的增删改查功能
01-19
前言 关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应...我是在项目src/mock/index.js里面使用mock.js 详细请看官方文档 关键点1：Mock.mock() Mock.mock( rurl?,
vue mock数据
底层码农
11-29 5997
mock数据（模拟后台数据）
VUE 使用 mock
A_bad_horse的专栏
08-12 1370
vue使用mock
vue中使用mock
panzina的博客
06-03 455
1.安装axios npm install axios 2.安装mock npm install mockjs 3.新建config.js import axios from 'axios' //创建一个axios实例 const service = axios.create({ //请求超时 timeout:60000 }) // 请求拦截器 service.interceptors.request.use( config => { return conf
vue+mock.js
jerryyang_2017的博客
07-17 523
(1).mockjs介绍 mock.js是模拟后端的数据，脱离后端独立开发，实现增删改查功能 (2).官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据，模拟各种场景。 (3).安装-使用 1.在搭建好的vue项目中 cd practice_project\elements-demo ...
vue项目中的mock data
MrZZhou的博客
06-13 2199
应用背景因为前后端的分离并不是完全的，以及ajax技术的普遍应用，前端在开发过程中经常会需要测试用的数据，部分情况下是直接写在视图中，毕竟前端们在开发的过程中又不能总是依赖着后台提供接口，比如进度不一致，那我们应该怎么办呢方案今天接触到一种方法，就是express提供的数据服务，毕竟现在很多项目中都会用到node，用到npm，那使用express也是比较方便的，比如我通过vue init webpa
Vue中使用mock模拟后端数据
2301_76662406的博客
05-05 1841
在开发的时候，由于页面中的数据来自后端，后端接口又处于开发中，阻碍了前端开发，为了解决这个问题，需求下来后，前后端先约定好数据结构后，在按照约定好的数据结构进行开发，这样前端只需一个本地服务，模拟返回约定好的数据结构。这个数据模板语法的含义是：以初始值 10 作为基准，在每次被调用时递增 15。换句话说，每次调用该模板语法生成的数据，sellingPrice 属性的值会比上一次增加 15。
vue项目 mock数据
Feb_ruary的博客
07-22 1813
vue项目如何mock后端接口数据
vue mock.js
08-27
Vue Mock.js 是一个用于模拟数据的插件，它可以帮助前端开发人员在没有后端接口的情况下进行数据的模拟和测试。Mock.js 可以拦截 Ajax 请求，根据预先定义好的规则生成模拟数据。使用 Mock.js，你可以在前端快速搭建一个独立于后端的数据模拟环境。 以下是一个简单的示例，展示了如何在 Vue 项目中使用 Mock.js： 1. 安装 Mock.js： 在命令行中运行以下命令来安装 Mock.js： ``` npm install mockjs --save-dev ``` 2. 创建一个 mock 文件夹： 在 src 文件夹下创建一个名为 mock 的文件夹，用于存放模拟数据的文件。 3. 创建一个 mock 文件： 在 mock 文件夹下创建一个名为 data.js 的文件，用于定义模拟数据的规则。 4. 编写模拟数据规则： 在 data.js 文件中编写模拟数据的规则，例如： ```javascript import Mock from 'mockjs'; Mock.mock('/api/user', 'get', { 'name': '@cname', 'age|18-60': 0, 'gender|1': ['男', '女'] }); ``` 5. 引入和启用 Mock.js： 在 main.js 文件中引入 Mock.js，并启用它： ```javascript import './mock/data' // 引入模拟数据规则 ``` 现在，当你发送一个 GET 请求到 '/api/user' 时，Mock.js 会根据规则生成模拟数据返回。 这只是一个简单的示例，Mock.js 还有更多强大的功能，如生成随机数据、模拟网络延迟等。你可以根据自己的需求进一步探索和使用 Mock.js。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值