vue如何接收后端返回的数据（vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据））

本文目录

• vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）
• vue-element 权限管理数据的处理，简单实用
• 接口返回这样的数据，vue如何获取data中的数据

vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

最近使用vue-cli做了一个小小的项目，在项目中需要使用vue-resource来与后台进行数据交互，所以我使用了本地json数据来模仿后台获取数据的流程。
至于vue-resource的安装和json的准备我就不赘述了、、、
下面是操作方法：
1、首先介绍一下项目的结构：将本地的json文件放在最外层和index.html在一起，姑且叫做data.json。
我的json数据文件大概如此：
{
"seller": {
"name": "粥品香坊（回龙观）",
"description": "蜂鸟专送",
"bulletin": "会指定餐饮服务商。",
***隐藏网址***
},
"goods": [
{
"name": "热销榜",
"type": -1
},
{
"name": "热销榜",
"type": -1
}
],
"ratings": [
{
"username": "3******c",
***隐藏网址***
"recommend": [
"南瓜粥",
"皮蛋瘦肉粥"
]
},
{
"username": "2******3",
***隐藏网址***
"recommend": [
"扁豆焖面"
]
}
]
}
2、接着在build的dev-server.js中进行加入代码：
//模拟服务器返回数据--开始
var appData = require(’../data.json’);
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
var apiRoutes = express.Router();
apiRoutes.get(’/seller’, function (req, res) {
res.json({
errno: 0,
data: seller
});
});
apiRoutes.get(’/goods’, function (req, res) {
res.json({
errno: 0,
data: goods
});
});
apiRoutes.get(’/ratings’, function (req, res) {
res.json({
errno: 0,
data: ratings
});
});
app.use(’/api’, apiRoutes);
//模拟服务器返回数据--结束
特别注意：修改好后重新进行cnpm run dev(注意当dev-server.js和db.json改变后都需要进行该步骤)。
解释下以上代码：
1》首先请求根目录下的data.json文件，获取到文件内容并将其赋值给appData变量，然后获取其中的各个字段数据，分别定义变量seller、goods,ratings来赋值。
2》之后，通过express提供的Router对象及其一些方法（这里用的get方法）来设置接口（请求路径）以及请求成功后的回调函数来处理要返回给请求端的数据。（errno这个类似以js请求中的code值）
***隐藏网址***
3、使用resouce获取这些数据，并使用
export default{
data () {
return {
seller: {}
};
},
created () {
***隐藏网址***
// console.log(response);
response = response.body;
const ERR_OK = 0;
if (response.errno === ERR_OK) {
let data = response.data;
console.log(data);
}
});
},
components: {
’v-header’: header
}
};

vue-element 权限管理数据的处理，简单实用

1,首先获取到后端返回给我们的权限数据,数据大概长这么个样子。

2,要渲染到element的树形结构上的话，要做一层递归处理，让它形成树形结构。这个也可以不用递归，我看他们用map这个属性，也能很好的处理。具体做法如下：

这个数据渲染好以后，是长这样的，也就符合了我们el-tree组件所需的数据结构。

3，现在管理员开始在管理界面开始做权限管理操作。如图所示：

这样的话返回给后端的是一个id组成的数组， data= 这就是你返回给后端的数据 ，还没完接下来该复现了。

4,现在后端给数据返回给你，他是按照刚才你给的数据返回过来的。然后添加上check属性，这个也是你们约定，数据大概就长这样：

你可能还在想不错，不错。还不用递归，循环就给数据拿了。当你拿到所有的数组check为true的数据组成的数组treelist,然后 this.$refs.tree.setCheckedKeys(this.treelist) 上去时，已经不符合要求了，因为父集全选，子集就会全选。他会变成这样：

5，这样肯定不行，我们要再做一次数据处理，让它符合要求。1， 要给数据再次递归成树形结构 ，还是上面的方法给数据递归成树形结构。2，遍历这个树形结构，判断父集的子集是否全部为true，如果不是就就让他的check属性设置为false，

这里说明一下。this.state 这个变量你要自己设置一下或者全局变量都行，反正要设置一下，设置为true。首先我们给递归好的树形结构放在 traveData 这个函数里面这个函数会递归一遍我们的数据，主要是判断
item.check = item.children.length 》 0 ? this.getchildStatus(item.children) : item.check
这里是判断他有没有子集，没有的话就是ok，那么check的值就是合理的，如果他有子集但是它的check为true这就很不合理，因为我们不知道他的子集到底是不是都是选了的，也就是check为true，所以要做一层碰断，判断他的子集是否全为true，只要他的子集有一个不为true，那它就不能为true this.getchildStatus(item.children) 所以这里又做了一层，遍历他的所有子集。判断check的值。ok做到这里我们大概也差不多了。拿到 return data 的值我们还要做一次数据的递归，

6,至此，我们已经拿到了 this.treelist的值我们只要

这样就可以把我们的树形结构又从新渲染好了。数据用的都是模拟数据，但是和业务场景的数据其实差别不大，只要按照这个流程就ok了。不管是element，antd，我觉得这个全选和半选感觉还可以优化下。不是真的挺绕的。

接口返回这样的数据，vue如何获取data中的数据

用this.setdata({
shuju1
:
shuju2
})
shuju1：你自己命名的名字，
shuju2：调用接口后返回的数据，
然后你页面就可以用{{shuju1}}，这样来获取了。