vue-resource

主要内容：

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

下边进行详细的说明 （PS：本身也是边学边记录 内容难免有些粗糙~~）

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

模拟服务端返回数据

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

一、准备data.json文件（模拟返回数据所使用的）

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

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对象给咱们。