javascript - 如果后台要动态添加tab标签页的个数以及每个页面列表个数,前端应该如何请求?
迷茫
迷茫 2017-04-11 11:45:24
0
2
728

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

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

répondre à tous(2)
左手右手慢动作

首先,你给的这个网站,应该是后台模板直接编译生成的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的时候,可以带上需要的数量给后台。也可以让后台把所有的发给你,你自己取前几个就好。

迷茫

正好遇到此类问题过,我先针对性的一一回答,看看能否帮助题主:
首先我们得确定后台传递到前台的是对象数组,这样方便动态的更新修改。
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就可以

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal