vue-resource

主要内容:

模拟服务端返回数据(需要准备一个data.json的文件来模拟返回的数据 再就是写接口来请求数据)
用vue-resource向服务器请求数据(需要安装vue-resource 再就是在main.js中导入并使用 最后就是在相应的vue组件中接收返回的数据)

### 下边进行详细的说明 (PS:自己也是边学边记录 内容不免有些粗糙~~)

首先,先介绍一下什么是vue-resource,简单来说,它就是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据。

## 模拟服务端返回数据

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

![](http://images2015.cnblogs.com/blog/1023621/201703/1023621-20170307104046250-45615575.png)

1、准备data.json文件(模拟返回数据所使用的)

在项目根目录下,新建一个data.json。这个文件里的内容就是我们要模拟的服务端返回的数据。 他是一个大的json,里边相应的有各个字段。(好像这是句废话,啊哈哈~~)

![](http://images2015.cnblogs.com/blog/1023621/201703/1023621-20170307104358484-1983300455.png)

data.json格式如下:(我模拟的要简单)

{
  "user": {
    "name": "尼古拉斯赵四",
    "area": "华东区",
    "identity":"管理员"
   },
  "data_center": {
   /*暂时是空的没有内容*/
  }
}

写接口

写接口的话就是先dev-server.js这个文件夹下,大约在19行的var app = express()下边开始写你的接口,添加的内容如下:

var appData = require('../data.json')
var user = appData.user;//接口
var dataCenter = appData.data_center;
// API
var apiRouter = express.Router();
apiRouter.get('/user', function (req, res) {
  res.json({
    errno: 0,
    data: user
  });
})
apiRouter.get('/data_center', function (req, res) {
  res.json({
    errno: 0,
    data: dataCenter
  });
})
app.use('/api', apiapiRouter);   

简单介绍一下:首先请求根目录下的data.json文件,获取到文件内容并将其赋值给appData变量,然后获取其中的各个字段数据,(像我模拟的两个)分别定义变量user、dataCenter来赋值。 之后,通过express提供的Router对象及其一些方法(这里用的get方法)来设置接口(请求路径)以及请求成功后的回调函数来处理要返回给请求端的数据。(errno这个类似以js请求中的code值) 最后,我们要“使用”这个Router对象,为了统一管理api接口,我们在要请求的路由前边都加上‘api/’来表明这个路径是专门用来提供api数据的。 在这个“接口”中,当我们访问“http://localhost:8080/api/user”路径的时候,就会返回data.json里的user对象给我们。

posted @ 2017-03-07 10:30  L迷鹿L  阅读(286)  评论(0编辑  收藏  举报