vue2.0以后模拟后台数据交互配置

本人自学前端的菜鸟一枚，最近在跟着做vue2.0以上版本的一个购物平台，在涉及到模拟后台数据交互的时候，总是不由自觉的害怕，因为自己总是配置不好，不是这里出问题就是那里模块少了东西，让我闻后台而色变。这次，跟着做的时候，视频里讲的是通过json-server这个插件和express本身来弄，起初我在网上搜索了很多，总是配置不好，而且之前的配置都是在build/dev-server.js文件夹下，现在都没有了，全部整合到了build/webpack.dev.conf.js文件里，这就让我这个新人更加摸不着头脑了。想哭。。。。。。

方法我是在这里看到的，算是蛮清楚的一个，附上链接:https://blog.csdn.net/benben513624/article/details/78562529

一、模拟后台数据交互，vue中需要使用vue-resource这个组件，首先需要下载该组件:

     1. cnpm install vue-resource --save

     2. 在main.js文件中引入该组件并使用:

            import VResource from 'vue-resource' 

            Vue.use( VResource )

如图所示:

     

    3. 接下来就可以在任何组件内部使用了:

            this.$http.get( ).then( (res)  => {} , (err) => { }) 

二、前面配置好后，关键的地方来了，就是如何获取数据，模拟与后台的交互。(之前所附链接已经讲的很清楚，我这里写一遍只是为了加深自己的理解)

        方法一: 通过json-server来实现： 注: 该方法适合get请求。

    首先安装该组件:  

       1. cnpm install json-server --save

       2. 配置：找到build/webpack.dev.conf.js文件打开: 不知道具体位置，就直接拉到底部，粘贴上如图所示代码: 

这里是json- server配置信息

json- server. js

const jsonServer = require( 'json-server')

const apiServer = jsonServer. create()

const apiRouter = jsonServer. router( 'db.json') //数据关联server，db.json与index.html同级

const middlewares = jsonServer. defaults()

apiServer. use( middlewares)

apiServer