????????前文講解，項目已經實現了數據庫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接口，進一步完善系統的授權機制，實現用戶密碼加密、授權過去以及“記住我”等功能，敬請等待。