从零开始搭建vue-node-webpack前端项目环境step6

1、到目前为止，我们已经把样式热更新搞定，样式使用scss也没问题，一切ok..撸起袖子嚯嚯嚯三下五除二的搞定了首页，大致自己yy搞定出来的界面如下：

这是我们点击电影列表，比如海贼王应该进入的就是有关于海贼王的新的页面了。这时候就需要我们新建一个页面了，下面就涉及到vue-router的配置了。

2、在src目录下新建views文件夹用来存放我们的页面文件，首先这里先将app.vue里面的结构样式剥离出来，放进index.vue里面。然后再新建一个movieDetail.vue作为我们新增的详情页

3、新建route文件夹，里面新建route.js，最后在main.js注入我们配置的router

最后在重新刷浏览器，发现我们页面之间已是能够正常跳转，访问到我们新增的movieDetail了

样式，页面两样都已弄好，我们还差什么，没错，就是数据了。想要数据势必就得涉及到接口请求和发送了。在这里我们引入axios作为借口请求和发送。

cnpm i axios -S

数据请求在我们整个项目的全局都用的到，所以说最好将axios封装成一个全局的属性或者方法来使用。故此，在main.js里面，我们将axios绑定到Vue示例的原型链上去，这样我们可以在整个项目的任何使用this.$ajax的方式来发送接口请求。另外在下面增加有关于js的热更新，上次我们的热更新只不过是对css样式作出了检测，对于js脚本的变动并未作出检测

4、axios配置好之后，我们就可以直接调用发送请求，如下：

请求发送出去之后，我们已经搭建了node服务器。在正式开发过程中，我们可能使用node作为服务层更多的是做一个接口转发的作用，在发送给后端请求之前，处理一些数据的作用。在这里，我们用node来mock一下数据，接收我们刚才发送的请求返回数据。

5、在项目目录下，新建app文件夹，存在我们服务端的相关文件，然后再其下新建一个apiRouter.js来处理我们前端发送的请求。在这里要用到node服务端的路由。具体如下：

然后在app.js里面引入我们刚才配置node服务端路由

由于我们修改的是服务端的代码，尚未为服务端配置热更新，因而只能够停止重新运行npm run start.

在打开浏览器，可以清楚的在控制台看到我们前端请求的接口成功的返回了数据。