前言
只有光頭才能變強。
文本已收錄至我的GitHub倉庫，歡迎Star：https://github.com/ZhongFuCheng3y/3y
在上一篇中已經講解了如何從零搭建一個SpringBoot+SpringData JPA的環境，測試接口的時候也成功獲取得到數據了。
我的目的是做一個十分簡易的管理系統，這就得有頁面，下面我繼續來講講我是怎么快速搭一個管理系統的。
ps:由於是簡易版，我的目的是能夠快速搭建，而不在於代碼的規范性。(所以在后面你可能會看到很多丑陋的代碼)
一、搭建管理系統
1.1. 搭建頁面
在上一篇的最后，我們可以通過http://localhost:8887/user接口拿到我們User表所有的記錄了。我們現在希望把記錄塞到一個管理頁面上(展示起來)。
作為一個后端，我HTML+CSS實在是丑陋，於是我就去找了一份BootStrap的模板。首先，我進到bootStrap的官網，找到基本模板這一塊：
我們在里邊可以看到挺多的模板的，這里選擇一個控制台頁面：
於是，就把這份模板下載下來，在本地中運行起來試試看。官方給出的鏈接是下載整一份文檔，我們找到想要的頁面即可：
於是我們將這兩份文件單獨粘貼在我們的項目中，發現這HTML文件需要bootstrap.css、bootstrap.js、jquery 的依賴(原來用的是相對路徑，其實我們就是看看相對路徑的文件在我們這有沒有，如果沒有，那就是我們需要的)。這里我們在CDN中找找，導入鏈接就行了。
於是我們就將所缺的依賴替換成BootCDN的依賴，最重要的幾個依賴如下：
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
如無意外的話，我們也能在項目中正常打開頁面。
1.1.2 把數據塞到頁面上
把數據塞到頁面上，有兩種方案：要么就后端返回json給前端進行解析，要么就使用模板引擎。而我為了便捷，是不想寫JS代碼的。所以，我使用freemarker這個模板引擎。
- 為什么這么多模板引擎，我選擇這個？因為我只會這個！
在SpringBoot下使用freemarker也是非常簡單，首先，我們需要加入pom文件依賴：
<!--freemarker-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
隨后，在application.yml文件中，加入freemarker的配置：
# freemarker配置
freemarker:
suffix: .ftl
request-context-attribute: request
expose-session-attributes: true
content-type: text/html
check-template-location: true
charset: UTF-8
cache: false
template-loader-path: classpath:/templates
這里我簡單解釋一下：freemarker的文件后綴名為.ftl，程序從/templates路徑下加載我們的文件。
於是乎，我將本來是.html的文件修改成.ftl文件，並放在templates目錄下：
接下來將我們Controller得到的數據，塞到Model對象中：
/**
* 得到所有用戶
*/
@GetMapping(value = "/user", produces = {"application/json;charset=UTF-8"})
public String getAllUser ( Model model) {
List<User> allUser = userService.getAllUser();
model.addAttribute("users", allUser);
return "/index";
}
圖片如下：
在ftl文件中，我們只要判斷數據是否存在，如果存在則在表格中遍歷出數據就行了：
<#if users?? && (users?size > 0)>
<#list users as user>
<tr>
<td>${user.userId}</td>
<td>${user.userNickname}</td>
<td>${user.userEmail}</td>
<td>${user.actiState}</td>
<td><a href="http://localhost:8887/deleteUser?id=${user.userId}">刪除</a></td>
</tr>
</#list>
<#else>
<h3>還沒有任何用戶</h3>
</#if>
圖片如下：
刪除的Controller代碼如下：
/**
* 根據ID刪除某個用戶
*/
@GetMapping(value = "/deleteUser", produces = {"application/json;charset=UTF-8"})
public String deleteUserById (String id,Model model) {
userService.deleteUserById(id);
return getAllUser(model);
}
我們再找幾張自己喜歡的圖片，簡單刪除一些不必要模塊，替換成我們想要的文字，就可以得到以下的效果了：
至於圖片上的評論管理、備忘錄管理的做法都如上，我只是把文件再復制一次而已(期中沒有寫任何的JS代碼,懶)。
在編寫的期中，要值得注意的是：靜態的文件一般我們會放在static文件夾中。
項目的目錄結構如下：
最后
本文涉及到的鏈接(bootstrap & cdn)：
樂於輸出干貨的Java技術公眾號：Java3y。公眾號內有200多篇原創技術文章、海量視頻資源、精美腦圖，不妨來關注一下！
覺得我的文章寫得不錯，不妨點一下贊！