vue.js中mock本地json数据

新版本的vue项目中已经将dev-server.js，dev-client.js两个js文件合并到了webpack.dev.conf.js文件中，以下分别是新旧版本的build目录结构：
新版本：
旧版本：
本次验证mock：运用vue的脚手架进行了项目的搭建，想要通过json文件模拟后台传输数据，因为之前dev-server中包含 var app = express()，但是新版本的webpack.dev.conf.js 中并没有，我们需要express方法定义路由：我们需要添加代码如下；

//头部添加
const express = require('express')
const app = express()//读取本地json文件并且定义对应参数
var appData = require('../data');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;//通过express定义路由对象
var apiRoutes = express.Router()//在devServer中添加具体路由规则以及返回
before(app) {apiRoutes.get('/seller', function (req, res) {res.json({errno: 0,data: seller});});apiRoutes.get('/goods', function (req, res) {res.json({errno: 0,data: goods});});apiRoutes.get('/ratings', function (req, res) {res.json({errno: 0,data: ratings});});app.use('/api', apiRoutes);}

如上代码都需要添加到 webpack.dev.conf.js 文件中，注意路由规则需要添加到 devServer 中，如下图所有代码位置：
启动项目后，浏览器范问：http://localhost:8080/api/goods#/
补充：
- 发现从老版本中拷贝过来这句代码是多余的：

const app = express()

- 将以上代码注释，并且修改before中的app为任意自定义名称都是可以通过编译并且正常运行，如下：

before(myRout) {apiRoutes.get('/seller', function (req, res) {res.json({errno: 0,data: seller});});
.....myRout.use('/api', apiRoutes);}

具体原因正在探索，还有就是before的作用是什么？？，一定要有这个，还在探索改语法规则
补充二：
- 将before，after修改成beforeEach和afterEach，运行出现如下错误：


Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.- configuration has an unknown property 'beforeEach'. These properties are valid:object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?, after?, stats?, reporter?, reportTime?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sell@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sell@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!     D:\worksoft\nodejs\node_cache\_logs\2021-05-18T02_08_50_682Z-debug.log

可以在以上错误中看到提示：非法的配置对象，webpack-dev-server 初始化的配置对象中没有匹配到这个规则beforeEach，这个配置是非法的。
并且在一下他列举出了所有配置对象，我们可以看到其中就有before，after，接下来我需要做的就是搞清楚这些配置对象的意义：
继续补充：查阅资料后在webpack-dev-server 官网中找到了他所有的操作符的说明，类似一个api文档，在文档说明如下：
- devServer.before：提供了在服务器内部执行自定义中间件的能力。这可用于定义自定义处理程序
- devServer.after：提供在服务器内部所有其他中间件之后执行自定义中间件的能力
如上官网说明，改api是在服务器内部自定义一段我们的逻辑，after与before只是定义执行的先后顺序
以上完成vue-cli利用本地json进行数据mock的整个流程
初学vue，初涉前端相关知识，打算进阶全栈开发，求鼓励

vue.js中mock本地json数据相关推荐

vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）
标题vue-cli中mock本地json数据踩雷:报错404 运用vue的脚手架进行了项目的搭建,想要通过json文件模拟后台传输数据,结果一直报错:404,经过不断的查找资料和调试终于找到问题的所在 ...
JS中eval处理JSON数据为什么要加括号
由于Ajax的兴起,JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来,进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象.利用eval函数 ...
vue 刷新echarts_在vue.js中使用echarts，数据动态刷新
在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲 ...
如何将mysql的数据库渲染到页面_vue.js实现数据库的JSON数据输出渲染到html页面功能示例...
本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能.分享给大家供大家参考,具体如下: 1.首先通过json.php把数据库给输出为json格式的数据 [ { "id ...
微信小程序——本地json数据在小程序中的展示
1.新建一个data文件夹(最好是公共文件), 并在该文件夹内新建了json.js文件,用于存放json数据. 写一个JSON的数组用于存放你的数据定义一个数据出口(json数据后面定义即可) 2. ...
使用Sencha Touch加载本地Json数据
本例没有采用Sencha的mvc模式.只是一个简单的读取加载本地Json数据示例. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel','Ext.dat ...
cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...
前端应用本地 json 数据
本地json 数据 {"data": [{"componentName": "schoolBudget","type": ...
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
文章目录一.前言二.分析&解决方案三.Http-Server简介&安装方法四.启动http本地服务方法五.附:Http-Server可选配置一.前言最近学习eharts制 ...

vue.js中mock本地json数据

vue.js中mock本地json数据

vue.js中mock本地json数据相关推荐

最新文章

热门文章