SpringBoot簡單項目學習筆記04（頁面列表選項的高亮設置、員工信息的添加頁面設定）

github項目地址：https://github.com/H-Designer/SpringBoot

上一節總結的是：員工列表、多個頁面的項目佈局的提取（http://www.javashuo.com/article/p-efifkgfb-kh.html）

這一節要總結的是;頁面列表選項的高亮設置、員工信息的添加頁面設定

##9.想要在不用的界面中顯示不一樣的列表項的高亮，好比在員工管理界面顯示「員工管理」的高亮，在首頁就進行「dashboard」的高亮
這樣就是在後面的dashboard.html和list.html進模塊的調用的時候，進行參數的傳遞
根據傳遞的參數的不一樣，bar.html根據在不一樣的參數的接收，顯示是否要高亮
就好比在dashboard.html中進行模塊的引入時候，
<div th:replace="commons/bar::#sidebar(activeuri='main.html')"></div>
在這裏面就進行了參數的傳遞，在引入的模塊的名稱的同時，也進行參數的傳遞（activeuri='main.html'）
在list.html進行模塊的接收的時候，同時也進行參數的傳遞
<div th:replace="commons/bar::#sidebar(activeuri='emps')"></div>
在這裏面就進行了參數的傳遞，在引入的模塊的名稱的同時，也進行參數的傳遞(activeuri='emps')
在bar.html 界面根毫不同值的獲取進行類的不一樣設置
<!--sidebar的抽取-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active"
th:class="${activeuri=='main.html'?'nav-link active':'nav-link'}"
th:href="@{/main.html}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
在這裏面，側邊欄的模塊提取的時候，在dashboard進行參數的接受，在th:class="${activeuri=='main.html'?'nav-link active':'nav-link'}" 
這個就是根據在後面頁面進行模塊引入的時候進行參數的傳入，而後在這裏面進行接受
就好比在list界面中，傳入的是main.html在這裏面，在dashboard這裏就是判斷傳入的是不是main.html若是是就進行高亮處理
在員工管理的欄塊：
<li class="nav-item">
<a class="nav-link active" href="#"
th:class="${activeuri=='emps'?'nav-link active':'nav-link'}"
th:href="@{/emps}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
員工管理
</a>
</li>
這裏接受的activeuri就是判斷是否是emp，利用三元表達式，判斷傳入的若是是emp就進行顯示高亮，這樣，就在不一樣的界面傳入的參數，進行不一樣參數的接收，顯示不一樣的高亮效果

##10、員工信息添加頁面跳轉
<h2><a class="btn btn-ms btn-success" th:href="@{/emp}">添加員工</a></h2>
在list頁面進行連接的設置，進行跳轉到add頁面
@GetMapping("/emp")
a標籤就是以get的方式進行提交
public String toAddPage(Model model){
//查出全部的部門在頁面進行顯示
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "emp/add";
}
這裏面，獲取到部門的全部信息，由於在前臺進行員工信息添加的時候，在選擇部門的時候，選擇的是已經存在的部門，因此要先將部門的全部信息查詢出來，
而後進行存儲，存儲到model中，而後進行model.addAttribute進行存儲，而後在前臺界面就能夠進行顯示部門的信息
在add前臺：
<div class="form-group">
<label>department</label>
<!--提交的收拾部門信息的id-->
<select class="form-control">
<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">部門</option>
</select>
</div>
在這裏面根據在後臺進行addAttribute存儲的depts， 在前臺進行接收，而且提取顯示的是部門的名稱，
在信息進行提交的時候提交的信息是部門信息裏面的id、因此在value裏面存的就是${dept.id}

 

下一節要總結的是：員工信息提交、員工信息修改（http://www.javashuo.com/article/p-oplnshll-ka.html）