虽然想尽量用文字记录一些东西,但也参考一下敏捷开发的原则,以代码为准。这里的设计文档,就不再具体描述更细节的问题,主要侧重于整体性和宏观性的表述,尽可能借助图来表述B/S通用菜单的设计思路。后面的开发估计与这个设计文档还是会有一些出入,但思路大致如此。
1. 引言
。
2. 需求范围
l 系统的菜单项可方便的在后台进行管理。包括菜单项的增减、名称修改、顺序修改、图标修改、菜单类型维护及菜单与模块进行关联。
l 可实现菜单多级组织方式,每个菜单项下可挂子菜单。
l 一级菜单位于页面顶部,logo下,以横向方式展现。
l 显示菜单的频道有两级,默认只显示第一级频道,当需要显示第二级频道时,在一级频道下方再扩充出二级频道,二级频道用于显示当前级别的菜单。
l 可支持多种类型的菜单项。
l 菜单与系统模块之间的关联可灵活配置扩充,可直接配置模块URL,或者配置客户端JS函数。客户端JS函数可被重写进行自定义扩充。
l 菜单可方便的与系统权限管理进行集成。
l 用于B/S框架,可跨主流浏览器。
l 达到较好的性能要求
3. 通用菜单功能
通用菜单划分为三个子模块,菜单配置、菜单权限和菜单导航。
4. 通用菜单分层结构
5. 关键技术点
- 页面上的菜单使用JQuery生成,并实现菜单的导航功能。JQuery菜单封装成为一个JQuery插件,以更好的实现封装,提供更好的灵活性和可扩充性。
- 服务器和客户端之间的数据传输采用Ajax技术,实现页面的无刷新。Ajax传输的数据格式采用JSON格式,便于客户端页面直接使用JSON对象。
6. 数据库设计
l NavigationType 菜单导航方式,包括以下几种类型
HSubMenu 子菜单横向显示
VSubMenu 子菜单纵向显示
DropdownHMenu 下拉横向导航
ChangeChannel 频道切换
ReturnParent 返回上级菜单
ReturnHome 返回首页
l LinkType 链接类型
FrameShow 框架中显示
OpenDialog 打开对话框
ExecuteFunction 执行函数
l ModuleInfo用于记录菜单关联模块的信息,例如:URL或者JS函数。
l Parameter 是菜单的参数,例如:类似于QueryString的格式,Parameter1=value1&Parameter2=value2。也可为其它的自定义格式,如:xml或json格式,使用时需要根据具体的菜单类型来设定。
l IsInitialize 是否初始化,父级菜单点击时,如果没有指定打开的页面,将打开第一个IsInitialize设置为True的菜单链接的页面。
7. 客户端接收的JSON数据格式
l Menu类
l JSON数据格式
{
Menus: [
{
ID: "", //菜单ID
Name: "", //菜单名称
Title:"", //菜单标题
ParentID:"", //父菜单ID
Sequence:0, //菜单顺序
IsUse:1, //是否使用
Icon:"", //菜单图标
NavigationType:"", //导航方式
LinkType:"", //链接方式
ModuleInfo:"", //模块信息
Parameter:"", //菜单参数
IsInitialize:0, //是否初始化
SubMenus: [{ // 子菜单
ID: "",
Name: "",
Title:"",
ParentID:"",
Sequence:0,
IsUse:1,
Icon:"",
NavigationType:"",
LinkType:"",
ModuleInfo:"",
Parameter:"",
IsInitialize: 0,
SubMenus: null
}]
}]
}