SpringBoot日記——按鈕的高亮和添加篇

場景如下：

　　我們點擊主頁，主頁那個按鈕就高亮；

　　我們點擊員工，員工那個按鈕就高亮；

高亮的處理

直接來看代碼如何編寫：

　　1.先看一下官方文檔如何編寫關於參數配置的，等下我們來解釋為何這么寫：

　　所以，我們將之前引入dashboard.html頁的sidebar，添加一個屬性：（表示該sidebar中有個屬性是activeUri，值是main.html）

<div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>

　　在list.html中同樣這樣添加：

<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

　　2.那么，既然我們寫了屬性，就要引用它才會生效，來看哪里引用，看到我們引用的側邊欄的sidebar中，有一個active的屬性，這個就是高亮的意思，那么我做下修改，加個判斷：（如果打開的是請求xx，就高亮，否則不高亮）：

<a class="nav-link active" href="#" th:href="@{/main.html}"
                th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}">

<a class="nav-link" href="#" th:href="@{/emps}" methods="get"
                   th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">

　　兩個功能按鈕，我們都加了這樣的屬性，然后頁面上看：

 

數據讀取

　　既然是列表頁，我們要把自己寫好的員工信息讀取出來，展示在這頁中。

　　之前，我們學過如何在頁面中展示我們的數據，那么我這里寫好了數據，看下如何拉出來展示吧。

　　1. 找到list.html，我們來編輯一下這個table中的各個數據：（一般表格的數據都是在這個標簽下設計的，我們添加列名，以及列數據的讀取。如何遍歷前邊的文章有講過，或者去看官方文檔）

　　　　注意，后邊那個dates.formate是模板提供給我們的時間格式化的方法。

　　2. 我把后台數據放出來，和前端展示的對比一下：（因為還沒涉及到數據庫，我只是先寫在方法里）

前端展示：

　　我似乎忘了給大家看一下這些數據是怎么取的了，展示一段代碼，大家看下吧：

@Controller
public class EmployeeController {

    @Autowired
    EmployeeDao employeeDao;

    // 查詢所有員工，返回列表頁面
    @GetMapping("/emps")
    public String list(Model model) {

        Collection<Employee> employees = employeeDao.getAll();
        // 放在請求域中共享
        model.addAttribute("emps", employees);
        // SpringBoot 默認去查找emp文件夾下的list.html；
        return "emp/list";
    }
}

 

　　數據OK，那么我們來填寫幾個按鈕吧

按鈕的添加和配置

  直接看html中的編寫情況：

　　解釋：btn表示按鈕類，btn-sm表示小按鈕，btn-pramary表示主要按鈕（模板認定主要按鈕是藍色的~）

　　還可以添加一個添加員工的按鈕，我們標記為綠色：

 

　　然后來看，現在列表頁的展示情況：（順眼多了，后邊我們還會做好多處理的~）