我的博客|Vue.js2.0 入门实例（三）（数据对接）实例|服务器|通信|插件|数据

简单说一下vue-resource，这是vue的一个与服务器端通信的HTTP插件，用来从服务器端请求数据。
之前的代码下载下来，运行会报错而且会有上百个之多，这是因为在我初始化项目的时候没有启用eslint，eslint是用来检测代码风格的，我是觉得格式要求严的有点过分，所以禁用了eslint。如果对eslint感兴趣的朋友，可以看 eslint的官网了解一下格式的要求和一些相应的配置。
我们主要来了解一下以下内容：

1. 模拟服务端返回数据 2. 用vue-resource向服务器请求数据

模拟服务器返回数据我们用vue-cli创建的项目中，已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示，在项目目录的build目录下，有一个dev-server.js，在这个文件中，我们就可以来做一些模拟数据的工作。

文章图片

1、准备一个data.json文件
在项目根目录下，新建一个data.json。这个文件里的内容就是我们要模拟的服务端返回的数据。
data.json的内容如下：

{ "books": [ { "price": "111.00", "title": "语文", "img": "http://imgsrc.baidu.com/forum/w%3D580/sign=688d19b6422309f7e76fad1a420f0c39/0e143912b31bb051dfdebf0a327adab44bede0f9.jpg" }, { "price": "123.00", "title": "数学", "img": "http://shopimg.kongfz.com.cn/20130826/1746508/1746508YTGtm0_b.jpg"}, { "price": "113.00", "title": "英语", "img": "http://www.shiyi910.com/UploadFiles/2014-01/170/2014011322414554305.jpg"}, { "price": "112.00", "title": "物理", "img": "http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=b62ac53d4b36acaf59b59ef849e9a126/f603918fa0ec08fa2cf895a359ee3d6d55fbda3e.jpg"} ] }

这里，books字段里的每一个对象表示一本书的信息。
2、“写接口”
修改dev-server.js文件，在大概第19行左右的 var app = express()之后，添加上如下内容

var appData = https://www.it610.com/article/require('../data.json') var books = appData.booksvar apiRoutes = express.Router() apiRoutes.get('/books', function(req, res){ res.json({ data: books }) })app.use('/api', apiRoutes)

简单说明一下，这段代码就是通过请求醒目根目录下的data.json文件，拿到文件的内容并赋值给appData变量，取到里面的books字段内容保存在books变量中。然后，通过express提供的Router对象，以及Router对象的一些方法（这里是get方法）来设置请求的路径，以及请求成功后的回调函数来处理要返回给请求端的数据。最后，我们要“使用”这个Router对象，为了统一管理api接口，我们在要请求的路由前边都加上‘api/’来表明这个路径是专门用来提供api数据的。在这个“接口”中，当我们访问“http://localhost:8080/api/books”路径的时候，就会返回data.json里的books对象给我们。
这里我们先来简单验证一下是否能成功返回数据，打开命令行，cd到当前项目目录，运行 npm run dev ，等项目运行成功之后，在浏览器地址栏输入http://localhost:8080/api/books，看到如下图所示，数据正常返回，OK！“接口”就开发完成了。
PS：在你的浏览器上可能看到的是没有经过格式化的数据，我的浏览器上装了一个json格式化的插件，这不是重点，重点是“接口”正常工作了，不是吗。

文章图片

用vue-resource向服务器请求数据 1、安装vue-resource
打开命令行，cd到项目目录，运行 npm install vue-resource –save或者cnpm install vue-resource –save,等待安装完成即可。
2、在main.js里导入并使用vue-resource
修改main.js如下

// main.js// 导入Vue，这个是必需的，在使用Vue之前，必须先导入 import Vue from 'vue'// 导入 vue-router，并使用 import VueRouter from 'vue-router' Vue.use(VueRouter)// 导入 vue-resource，并使用 import VueResource from 'vue-resource' Vue.use(VueResource)// 导入 pages 下的 Home.vue import Home from './pages/Home' import Detail from './pages/Detail'// 定义路由配置 const routes = [ { path: '/', component: Home }, { path: '/detail', component: Detail } ]// 创建路由实例 const router = new VueRouter({ routes })// 创建 Vue 实例 new Vue({ el: '#app', data(){ return { transitionName: 'slide' } }, router, watch: { // 监视路由，参数为要目标路由和当前页面的路由 '$route' (to, from){ const toDepth = to.path.substring(0, to.path.length-2).split('/').length // 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail' // 按照官方给的例子，这两个路由路径深度都为 2 ，所以，这里稍作调整，不知道有什么不妥 // 但目前在这个demo中能正常运行，如果知道更好的方法，欢迎留言赐教 const fromDepth = from.path.substring(0, from.path.length-2).split('/').length this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide' // 根据路由深度，来判断是该从右侧进入还是该从左侧进入 } } })

3、修改Home.vue和List.vue来接收服务端返回的数据
Home.vue修改如下：

List.vue修改如下：