wordpress的restfulAPI接口返回数据的几点分析与处理
如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！
wordpress的restfulAPI接口返回数据的几点分析与处理
从图中可以看到:分类categories和标签tags返回的都是数组，里面的数字代表了对应内容的id，需要根据id在调用相应的查询接口获得文字信息。
分类信息和标签信息里面相对麻烦点的是分类信息，因为分类信息可能有父子级的关系，而标签则不存在，是扁平化返回。下面说说我是怎么处理分类的，最实际的应用场景就是博客上方的导航菜单。
首先我们肯定是调用接口xxx.com/wp-json/wp/v2/categories获取博客里面的所有分类categories信息，这里最好将每页返回的数据条数设置大一点，方便一致性返回全部分类信息，看下接口返回格式
截图屏幕有限，具体的大家自行调用，我说一下吧，分类信息全是扁平化返回，用一个数据返回，比如你有2个大分类，里面各有3个消费，则接口换返回里面有2+2*3=8个对象的数组，唯一的区别是父分类的parent字段为0，子分类的parent字段则是对应的父分类的id。估计后端同事都喜欢这么干，确实很方便。但是前端的同志就苦逼了。扁平化数组？循环？该怎么样渲染更方便？
本例中有五个大的分类，id分别是39、54、477、600、1020其中54、600、1020有子分类，进行处理后返回一个大的对象，每个大类有children字段，其为数组，里面是一堆他的子分类。
图中id为127的就是54这个大分类的子分类。处理代码如下：
function postsHandle(data) {
let categoriesObj = {};
let categoriesMap = {};
if (data && data.length) {
data.map((item, index) => {
categoriesMap[item.id] = {
name: item.name,
slug: item.slug
};
if (item.parent != '0') { //子分类
if (!categoriesObj[item.parent]) { //其父分类不存在
categoriesObj[item.parent] = {
id: item.id,
item: '',
children: [{
id: item.id,
item
}]
};
} else {
categoriesObj[item.parent].children.push({
id: item.id,
item
})
}
} else {
if (categoriesObj[item.id]) { //已由分类创建
categoriesObj[item.id].id = item.id;
categoriesObj[item.id].item = item;
} else {
categoriesObj[item.id] = {
id: item.id,
item,
children: []
};
}
}
})
}
return {
categoriesObj,
categoriesMap
}
}
手疼，今天先写这么多。
可以让大家看看昨天做的效果，没有美化，另外wordpress的restfulAPI返回数据很慢（我在本地连接本地数据库也是很慢），为了大家感受到这种慢，我做的菜单导航设置了边框，哈哈。
网址： http://vue.w.daozhao.com/，切记不要用https访问，否则会跨域，那样你就只能看到框框了。更新时间：
上一篇：下一篇：
