网站动态导航配置解决方案

105 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情

今天接到一个活,着实让我头痛,网站所有内容全部是动态,达到导航菜单,小到一段文字描述。

先来说说这个让人头疼的导航吧!怎么让他动起来呢?

1、首先来说说我的数据库表,如下图

导航字典表中配置导航跳转规则

前期调研,页面基本布局如下:

导航路径是具体的规则体现:

跳转页链接+ 一级导航id+二级导航id +默认banner信息

当点击上方一级导航信息的时候会根据导航id跳转到响应的页面模板,然后根据页面模板相对应的信息获取二级导航id数据回显,以及banner图信息回显。

会根据参数跳转布局回显页面所需参数信息

导航信息表中则去配置各种导航,也支持子导航信息

各个页面也不是固定的,而是一个空页面,当选中导航的时候根据导航字典中的规则来控制页面中各个元素的内容。所以,此处的导航字典是最主要的规则来源。

2、后台基本的控制逻辑捋明白了,再来看看前端怎么来实现这么恶心的需求

前端页面根据前期调研需求,整理出页面的各种布局,根据规则去控制页面的显示隐藏以及通过接口拿到数据即可。

基本思路搞定后,剩下的实现那就明天接着搞,这其中肯定还会有很多坑,坑就由我们慢慢的来填平吧。

喜欢,请关注公众号《coder练习生》