vue.js中mock本地json数据

淡淡的烟草味﹌ 2023-01-22 05:49 18阅读 0赞

#### vue.js中mock本地json数据 ####

*  新版本的vue项目中已经将dev-server.js，dev-client.js两个js文件合并到了webpack.dev.conf.js文件中，以下分别是新旧版本的build目录结构：
 *  新版本：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qaWFtaW4wMTAy_size_16_color_FFFFFF_t_70]
 *  旧版本：  
    ![在这里插入图片描述][20210517174230285.png]
 *  本次验证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 中，如下图所有代码位置：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qaWFtaW4wMTAy_size_16_color_FFFFFF_t_70 1]
 *  启动项目后，浏览器范问：http://localhost:8080/api/goods\#/  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qaWFtaW4wMTAy_size_16_color_FFFFFF_t_70 2]
 *  补充：
    
     *  发现从老版本中拷贝过来这句代码是多余的：

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 官网][webpack-dev-server]中找到了他所有的操作符的说明，类似一个api文档，在文档说明如下：
    
     *  devServer.before： 提供了在服务器内部执行自定义中间件的能力。这可用于定义自定义处理程序
     *  devServer.after： 提供在服务器内部所有其他中间件之后执行自定义中间件的能力
 *  如上官网说明，改api是在服务器内部自定义一段我们的逻辑，after与before只是定义执行的先后顺序
 *  以上完成vue-cli利用本地json进行数据mock的整个流程
 *  初学vue，初涉前端相关知识，打算进阶全栈开发，求鼓励

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qaWFtaW4wMTAy_size_16_color_FFFFFF_t_70]: /images/20221020/6c6b737da268402abe266b56c0c34f3d.png
[20210517174230285.png]: /images/20221020/b0386919ffaf4df09bac1c36d90b53c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qaWFtaW4wMTAy_size_16_color_FFFFFF_t_70 1]: /images/20221020/947a73cd0d954058a3060338f8fa5442.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qaWFtaW4wMTAy_size_16_color_FFFFFF_t_70 2]: /images/20221020/5344aae6aa244299aedc9046ec5a8e74.png
[webpack-dev-server]: https://www.webpackjs.com/configuration/dev-server/#devserver-before