哪家网站专门做折扣销售,品牌运动鞋排行榜前十名,团购网站系统建设进度安排,建筑公司网站制作前文讲解#xff0c;项目已经实现了数据库Dao数据接口#xff0c;并通过spring security数据实现了对系统资源的保护。本文重点讲解Dao数据接口页面的实现#xff0c;其中涉及页面导航栏、菜单栏及页面信息栏3各部分。
1、创建html页面 前文讲解中#xff0c;资源目录已经… 前文讲解项目已经实现了数据库Dao数据接口并通过spring security数据实现了对系统资源的保护。本文重点讲解Dao数据接口页面的实现其中涉及页面导航栏、菜单栏及页面信息栏3各部分。
1、创建html页面 前文讲解中资源目录已经建设完成如图1所示右键点击“assets”文件夹弹出菜单中选择“new” → “HTML”输入页面名称“mainfunction.html”点击“finish”按钮完成创建。 图1、项目目录
mainfunction.html创建完成之后在浏览器中输入“http://localhost:2885/assets/mainfunction.html”地址可以正确访问页面如图2所示 图2、mainfunction.html初始页面 2、配置导航栏
1本人从事软件开发多年经历项目较多写了很多类似导航栏、菜单栏等配置生成工具文件此处利用工具“createNav.js”自动配置导航栏。导航栏配置信息如下
var navData{ logoImg:../assets/img/mysql.png, name:MySQL管理工具, navArr:[ {id:nav1,img:../assets/img/MySQL3.png,name:链接配置}, {id:nav2,img:../assets/img/MySQL1.png,name:创建数据库}, {id:nav3,img:../assets/img/MySQL2.png,name:添加任务} ], btnArr:[ {id:exit,img:../assets/img/退出.svg,name:退出系统}, {id:username,img:../assets/img/管理员.svg,name:magic33416563} ]
}; 2添加页面编码格式
Mainfunction.html中添加“meta charsetUTF-8”语句避免中文乱码。 3添加css样式文件
Mainfunction.html中添加“link relstylesheet typetext/css hrefcss/demo.css”常用css样式。 4添加js文件 Mainfunction.html中添加
“script typetext/javascript srcjs/jquery.min.js/script”、
“script typetext/javascript srcjs/createNav.js/script” 5拷贝 工具“createNav.js”使用的图标
导航栏配置完成之后刷新浏览器地址栏查看页面样式如下 图3、maimfunction.html导航栏页面
备注工具“createNav.js”学友们关注博主联系博主获取。createNav.js中带有导航栏功能按键代码再次不做赘述学友们根据需求自行修改以完善各自的特定功能。
3、配置菜单栏
1此处利用工具“createMenu.js”配置生成菜单栏。菜单栏配置信息如下
var menuStyle{ width:260px, //菜单栏宽度 position:{ top:60px, //菜单栏位置 left:0px }, bgImage:../assets/img/lbj.jpg };
var arrow{arrow:../assets/img/左侧聚合图标.svg, arrow1:../assets/img/左侧下拉图标.svg};
var data[ {menu:用户管理系统, //数据库名称 name:fhgc, //数据库缩写 icon:../assets/img/防洪工程数据库栏目图标.svg, //使用图标 submenu:[ {menu:用户,icon:../assets/img/点.png,tableName:rcvmin}, //子菜单名称 子菜单图标一般信息表名称 {menu:部门,icon:../assets/img/点.png,tableName:lkcdnm}, {menu:日志,icon:../assets/img/点.png,tableName:rscmin}, ] } ]; 2添加“createMenu.js”文件
3拷贝 工具“createMenu.js”使用的图标
菜单栏配置完成之后刷新浏览器地址栏查看页面样式如下 图3、mainfunction.html导航栏页面
备注工具“createMenu.js”学友们关注博主联系博主获取。
3、添加datagrid信息栏
针对菜单栏具备多个菜单每个菜单对应一张数据库表的情况我们采用一个table.html访问不同的库表的功能显示内容根据选取菜单进行替换。
1首先在mainfunction.html中添加iframe元素用于链接table.html
在mainfunction.html内body中添加如下代码
div idtableFather styleposition:absolute;top:60px;left:260px;width:86.3%;height:90.5%;overflow:hidden; table idtable /table
/div
2配置菜单功能
打开createMenu.js文件找到subMenuClick()函数配置不同菜单栏现实的页面函数详细代码如下
function subMenuClick(){ $(.submenu).on(click,function(){ switch(this.id){ case 日志: $(#mainContent).attr(src,../assets/orangelogTable.html); break; case 用户: break; case 部门: break; default: break; } });
}
配置完成之后点击菜单“日志”页面显示如下 图4、配置菜单页面 “用户”、“部门”等其他页面学友们可以根据上述步骤进行添加在此不做赘述此文到此结束。 下文讲解springboot集成Oauth2.0授权包对接spring security接口进一步完善系统的授权机制实现用户密码加密、授权过去以及“记住我”等功能敬请等待。
