Springboot 实践（7）springboot添加html页面，实现数据库数据的访问

        前文讲解，项目已经实现了数据库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 charset="UTF-8">”语句，避免中文乱码。

       （3）添加css样式文件

Mainfunction.html中添加“<link rel="stylesheet" type="text/css" href="css/demo.css">”常用css样式。

       （4）添加js文件

       Mainfunction.html中添加

“<script type="text/javascript" src="js/jquery.min.js"></script>”、

“<script type="text/javascript" src="js/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 id="tableFather" style="position:absolute;top:60px;left:260px;width:86.3%;height:90.5%;overflow:hidden;">            

         <table id='table'>

         </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接口，进一步完善系统的授权机制，实现用户密码加密、授权过去以及“记住我”等功能，敬请等待。