javascript - 如果后台要动态添加tab标签页的个数以及每个页面列表个数，前端应该如何请求？

Question

比如这个网站：http://www.chinatelecom.com.cn/
1/这一块的tab标签页，它有：通信博览，技术社区，招贤纳士等五个标签。如果后台动态发布的话，可以发布1个，2个，3个。。标签页。
2/每个标签页下面的列表的个数也是动态发布的，比如通信博览下面后台人员发布可以发布3条列表，4条列表，5条列表。。
3/如何限定最大的个数，假如后台发布人员发布了7个标签页，但是只显示五个标签页。发布了10条列表只显示8条列表。

这三种情况，前端应该如何请求呢？
对于动态的发布的问题不了解，以上是我个人的理解，不知道具体开发中这样做是否合理，请教各位以上三个问题，谢谢。

Answer 1

首先，你给的这个网站，应该是后台模板直接编译生成的html。

其次，你也可以选择后台模板编译，或者用ajax前台获取都可以

后台模板编译
这个不多说，就跟前端模板差不多，直接获取数据，编译出来就好,比如我之前用过的freemarker

ajax获取

这一块的tab标签页，它有：通信博览，技术社区，招贤纳士等五个标签。如果后台动态发布的话，可以发布1个，2个，3个。。标签页

1. 后台管理页面动态发布，每添加一个标签，都会生成一个对应标签的id。发布文章，也会map到这个标签的id下面。这些其实都是后台开发考虑的问题，和前端没有太大关联

2. 前端页面打开以后，发送ajax先获取标签列表，比如列表是这样子的[{id:1, title: "通信博览"}, {id:2, title: "技术社区"}, {id:3, title: "招贤纳士"}]，然后你获取这个列表，按照顺序把内容粘贴到标签栏上，可以把id也当作一个属性放到上面, <li data-id="1">通信博览</li>

每个标签页下面的列表的个数也是动态发布的，比如通信博览下面后台人员发布可以发布3条列表，4条列表，5条列表。。

页面初始化的时候，或者点击一个标签的时候，再发一个ajax，携带当前标签的id，让后台给你提供当前id标签下的内容列表，然后把内容一个个粘贴出来就好了。

如何限定最大的个数，假如后台发布人员发布了7个标签页，但是只显示五个标签页。发布了10条列表只显示8条列表

1. 这个其实不用前端来限制，可以直接告诉后台写死只给你几个。比如你页面上只需要5个，就只让后台给你发5个。

2. 如果你的数量也是根据页面动态定的，那么在发送ajax的时候，可以带上需要的数量给后台。也可以让后台把所有的发给你，你自己取前几个就好。

Answer 2

正好遇到此类问题过，我先针对性的一一回答，看看能否帮助题主：
首先我们得确定后台传递到前台的是对象数组，这样方便动态的更新修改。
1、动态发布标签，可以通过请求后台接口返回的JSON对象数组来实现:

data={labelname:["通信博览","技术社区","招贤纳士","招标采购","企业文化"]}
然后前端通过遍历这个对象数组可以动态显示出来，当然为了避免重复请求浪费资源，我们可以在本地对这个栏目进行缓存，每次需要更新时候再调用请求。
2、标签页下面的文章列表，其实也是同样道理
data={

txbl:{
    name:"通信博览",
    id:"txbl",
    list:[
        {title:"金鸡报晓贺新春1",content:"简介内容",img:"显示图片"},
        {title:"金鸡报晓贺新春2",content:"简介内容",img:"显示图片"}
    ]
},
jssq:{
    name:"技术社区",
    id:"jssq",
    list:[
        {title:"金鸡报晓贺新春1",content:"简介内容",img:"显示图片"},
        {title:"金鸡报晓贺新春2",content:"简介内容",img:"显示图片"}
    ]
}

}
这样的传递格式就能每一次请求都可以动态的从后台加载最新数据；
3、最大限定个数可以从前台这边对显示数目进行控制，在遍历循环过程中，限定最大值5和8，不让它为对象数组的length就可以