Vue如何mock数据模拟Ajax请求

        咱们在作一个项目时前期可能没有后端提供接口模拟数据，那么做为前端就须要本身写json文件模拟数据加载。网上每每参考的都是不全面的，好比get请求没问题可是post请求就报错了。在Vue中只须要vue-resource（也可使用axios，安装方法和vue-resource同样，具体使用方法能够去axios官网查看，在这里我使用vue的插件vue-resource）和body-parser模块（查看具体使用方法）互相配合就能够实现get、post不一样请求类型的数据模拟了。

        1.安装vue-resource插件（Ajax请求）和body-parser模块（mock数据，对post请求的模块）：

            npm install vue-resource --save --registry=https://registry.npm.taobao.org --verbose

            npm install body-parser --save --registry=https://registry.npm.taobao.org --verbose

 

        2.安装成功后在main.js引入依赖vue-resource，此时在Vue里就能够用$http进行Ajax请求了， 查看具体使用方法。：

        3.在build文件夹的dev-server.js文件进行服务配置，具体以下图所示：

 

        注意：(1).因为咱们Vue开启的本地服务是localhost:8080，因此mock数据监控的端口不能是8080，只要不冲突就能够，我这里用的是localhost:8081，因此图中第100行是port+1。

                (2).图中第87行的data.json就是咱们的假数据文件，通常放在和index.html同级目录下，若不一样级则须要修改路径。

                (3).若是没有用代理访问，第99行的第一个参数直接写接口名字就能够了，但通常咱们会用代理访问，因此这里写的是‘/api’，代理设置在下一步骤说明。

 

        4.同时咱们须要作一个代理表，这里我用api，访问这个代理就能够获取到数据，在config文件夹的index.js文件进行代理配置，以下图红框所示：

        data.json文件随意写了个，以下图所示：

        此时npm run dev从新开启服务，输入服务地址就能够看到已经成功mock数据：

        6.接着就是在项目中用Ajax请求数据了，咱们在以前安装了vue-resource插件而且进行依赖注入，在项目中能够直接进行请求，以下图所示：

        get请求：

 

        在控制台输出的效果以下所示：

        post请求：

 

        在控制台输出的效果以下所示：

      

        进一步console.log（res.data）输出效果以下所示：

        至此咱们已经实现了在Vue项目mock数据模拟后台请求，但愿对你们有帮助。

 

 

 

        如需转载请注明出处： http://www.cnblogs.com/zishang91/p/7680569.html，以便有错误能够及时修改，如有错漏不足之处，请见谅而且指点，谢谢！！！