vue2.5.2中配置mock数据（二）

最新推荐文章于 2024-12-14 20:55:00 发布
最新推荐文章于 2024-12-14 20:55:00 发布
阅读量275 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5ae1423f518825670a0ffce0
本文介绍了一种在前端开发中使用mock数据的方法。通过在static目录下创建mock文件夹存放json数据，并利用webpack-dev-server的代理功能进行配置，可以在开发阶段模拟API请求，便于组件的数据调用和测试。
方法二

1、在static目录下新建一个mock文件夹，将json数据放在此文件夹下。因为只有static目录下的文件才能被外部访问到

2、在config/index.js文件中，使用webpack-dev-server工具提供的代理，可如下设置：

3、在组件中调取数据

效果展示：

转载于:https://juejin.im/post/5ae1423f518825670a0ffce0

SpringBoot-26-企业云端开发实践之Vue框架状态管理VueX和数据模拟MockJS
qq_20466211的博客
07-14 201
集中式状态管理VueX和模拟服务器响应工具Mockjs。
SpringBoot实践（二十）：使用Vue快速实现后台管理系统（仅前端）
叶子叶来
04-15 2340
使用vue快速地开发一套后台管理系统，入门级别，对于登录和首页可以自行优化，代码地址：https://github.com/yezonggang/vue-for-backend
vue-cli2.5版本使用mock拦截全局数据请求
henu_1710252529的博客
08-25 2627
文章目录前言一、什么是mock二、安装mock二、使用步骤1.创建模拟数据文件夹2.在webpack.dev.con.js中配置注意 前言 提示：本篇文章讲述了在带有webpack.dev.con.js文件的vue-cli 2.x架构中如何使用mock，配置con.js拦截ajax请求，以实现mock的方式 一、什么是mock mock 的意思是模拟，也就是模拟接口返回的信息，用已有的信息替换它需要返回的信息，从实现对前端模块的测试。 二、安装mock 在vue-cli项目文件夹下运行此命令 F:\vu.
vue2.0 mock数据(模拟数据)
小毛驴的博客
06-12 3312
因为开发是前后端同步的，所以前端有时需要自己模拟数据。这里是在vue2.0的vue-cli中模拟数据 我们在根目录下新建文件夹mock，存放我们的数据goodList.json 在build文件夹下的webpack.dev.config.js中： // 引入各个文件 const express = require('express') const app = express() cons...
在vue-cli搭建的项目中使用mock.js
u014054437的博客
04-09 1827
mock是一个模拟数据生成器。团队可根据数据模板生成模板数据模拟ajax请求，生成请求数据基于html模板生成模拟数据优点：团队可以并行工作（开发时，如果后端还没完成数据输出，前端可自写静态模拟数据，前后端分离，提高效率）简单方便, 无侵入性, 基本覆盖常用的接口数据类型可以模拟那些无法访问的资源无需担心网速不好第一步：用 vue-cli 搭建一个基本的 vue 项目$ npm install -...
vue2 + Mock.js 操作指南
CiCi____的博客
11-03 1032
拦截ajax请求，生成伪数据应用场景:在工作中,后端已经出接口文档,还没有实现数据由前端依照接口文档模拟伪数据,实现前端开发功能。
VUE2中mock数据配置步骤
GJ_guo的博客
08-29 1185
mock文件夹下serve.js的引入创建实例图片是封面
(源码)基于vuecli3和antddesignvue的后台管理系统模板.zip
最新发布
04-18
本项目是基于vuecli3和antddesignvue搭建的后台管理系统模板，借助jsonserver进行数据mock。目前已完成所有基础结构和功能开发，后续会按需添加展示页面。 ## 项目的主要特性和功能 1. 前端使用vue 2.5.2及相关生态...
VUE书城-初始化项目
qq_25354709的专栏
02-25 1242
一、全局安装vue-cli 先全局安装vue-cli：  npm install vue-cli -g 初始化一个vue的项目 vue init webpack vue-book ? Project name vue-book ? Project description A Vue.js project ? Author xxx ? Vue build standalone ? I...
{ "name": "meadia-manage", "version": "1.0.0", "description": "A Vue.js project", "author": "winspread", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "echarts": "^4.2.1", "element-ui": "^2.15.10", "moment": "^2.29.4", "vue": "^2.5.2", "vue-puzzle-vcode": "^1.1.9", "vue-router": "^3.0.2", "vuex": "^3.1.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "axios-mock-adapter": "^1.16.0", "babel-core": "^6.22.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "element-theme-chalk": "^2.15.10", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "mockjs": "^1.0.1-beta3", "node-notifier": "^5.1.2", "node-sass": "^6.0.1", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "sass-loader": "^10.2.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
04-01
这是一个Vue.js项目的配置文件，里面包含了项目的基本信息、脚本命令、依赖项等。 先看看基本信息部分。name是项目名称meadia-manage，版本1.0.0，描述是Vue.js项目，作者winspread，private设为true，说明是私有...
vue-cli (vue2.5.2&webpack3.6.0) 配置文件全注释
weixin_34004750的博客
01-29 514
vue-cli 配置文件注释 新的项目组同事整了一个webpack3.*的脚手架 (先前自己弄了一个2.0的脚手架)里面的配置项摸索了一遍,就想看看3.*在配置文件上面update了什么 工作闲时花了一点时间将配置文件中都加上了注释,相信看了就和我一样从不那么太懂到有那么一点懂了. ^^ 平时用的blog写这种文章十分不友好,所以记录在...
vue2.5重构饿了么APP - 配置api接口mock（二）
Patty_2000的博客
10-27 220
一、首先要有json数据。（自己添加模拟数据） 二、进入vue.config.js进行配置 const appData = require('./data.json') const seller = appData.seller const goods = appData.goods const ratings = appData.ratings devServer: { before (app) { app.get('/api/seller', function (req, res)
vue2使用mock模拟后台数据
kyna_k的博客
07-12 1093
mock模拟数据
vue配置mock.js模拟数据？
qq_41365048的博客
10-11 235
vue配置mock.js模拟数据？ mock 的作用： 使用 mock 可以模拟后台接口提供页面需要的数据，方便前端自动化测试，一般用于前后端分离的项目场景。 mock 官网： http://mockjs.com/ mock GitHub 地址： https://github.com/nuysoft/Mock/wiki 在 vue 项目中配置 mock.js 步骤： 1、安装： 在工作中接触的是使用 npm 方式安装，因此本文使用的方式是 npm 方式安装，安装命令如下： npm install
Vue（二）模拟本地数据，做数据接口
左眼回忆的博客
03-27 3736
Vue（二）模拟本地数据，做数据接口 一、默认创建好vue的项目，我这里的vue项目是test如图 二、 （1）创建json.data文件，文件与index.html文件同级，如上图，写入以下代码 { "seller": { "name": "粥品香坊（回龙观）", "description": "蜂鸟专送", "deliveryTime": 38,
【Vue】5.vue mock数据（模拟后台）
热门推荐
返璞归真
11-17 2万+
vue实现ajax获取后台数据是通过vue-resource，首先通过npm安装vue-resource npm install vue-resource --save安装完成以后，把vue-resource引入到main.js文件中 src/main.js // The Vue build version to load with the `import` command //
Vue2 + mockjs
m0_60838883的博客
02-03 3365
​ 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。
vue2 配置 mock.js 模拟后端数据
牛奔的博客
12-14 1503
安装 mockj 首先确保你有一个 vue 2 项目，如果没有，可以用 Vue CLI 创建一个： vue create vue-mock-demo 开始安装 Mock.js npm install mockjs --save-dev 创建 Mock 配置文件 在项目的 src 目录下新建一个文件夹 mock，并在其中创建 index.js 文件，用于编写模拟接口。 例如(src/mock/in...
2019全新vue2.5项目实战全家桶单页面仿京东电商实战前端js教程
03-06
 
Vue-CLI开发中mock数据实战教程
本文将详细介绍如何在Vue CLI环境中配置和利用mock数据，以便前端团队能够高效地进行开发。 首先，理解什么是mock数据。Mock数据是用于替代真实后端API返回的临时数据，它允许开发者在接口未准备好或出于测试目的时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值