vue-router单页应用简单示例（三）

用vue-resource向服务器请求数据

咱们主要来了解一下如下内容：

 

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

模拟服务器返回数据

 

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

一、准备一个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字段里的每个对象表示一本书的信息。

二、“写接口”

 

修改dev-server.js文件，在大概第20行左右的 var app = express()以后，添加上以下内容

 

var appData = require('../data.json')
var books = appData.books

var 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！“接口”就开发完成了。

一、安装vue-resource

打开命令行，cd到项目目录，运行 npm install vue-resource --save或者 cnpm install vue-resource --save,等待安装完成便可。

 

二、修改相关文件

1.在router/index.js里导入并使用vue-resource

在index.js中添加以下代码

 

 2.在App.vue中添加以下代码

 

而后，再回到浏览器，应该会看到以下图的效果了。

 

当咱们点击语文，会看到页面有以下变化

 

url中detail后面的id参数被取到而后显示在页面中。

 

 

至此咱们的简单单页示例已经完成。

附上github完整代码https://github.com/herozhou/vue-spa-example