想让wordpress作为后端提供数据,必不可少的就是调用xxx.com/wp-json/wp/v2/posts这个接口了,(具体内容请参考官方文档)该接口返回一个文章列表,数组中的每条文章返回了该文章的详细信息,其中自然办好文章的分类categories和标签tags了,做过项目的都知道,这类数据一般也不推荐直接返回文字信息,一般都是返回码值,根据映射关系找到对应的文字。
接口数据
从图中可以看到:分类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
    }
}

categoriesObj就是上面所说的大分类,大家可能发现还有个categoriesMap,什么鬼?这个是我用来记录分类id和展示名称及路径

手疼,今天先写这么多。
可以让大家看看昨天做的效果,没有美化,另外wordpress的restfulAPI返回数据很慢(我在本地连接本地数据库也是很慢),为了大家感受到这种慢,我做的菜单导航设置了边框,哈哈。
网址: http://vue.w.daozhao.com/,切记不要用https访问,否则会跨域,那样你就只能看到框框了。

分类: JavascriptWordPress

发表评论

电子邮件地址不会被公开。 必填项已用*标注