主要内容:
模拟服务端返回数据(需要准备一个data.json的文件来模拟返回的数据 再就是写接口来请求数据)
用vue-resource向服务器请求数据(需要安装vue-resource 再就是在main.js中导入并使用 最后就是在相应的vue组件中接收返回的数据)
下边进行详细的说明 (PS:自己也是边学边记录 内容不免有些粗糙~~)
首先,先介绍一下什么是vue-resource,简单来说,它就是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据。
模拟服务端返回数据
我们用vue-cli创建的项目中,已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示,在项目目录的build目录下,有一个dev-server.js,在这个文件中,我们就可以来做一些模拟数据的工作。
1、准备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对象给我们。