【極簡版】SpringBoot+SpringData JPA 管理系統

前言

只有光頭才能變強。

文本已收錄至個人GitHub倉庫，歡迎Star：https://github.com/ZhongFuCheng3y/3y

在上一篇中已經講解了如何從零搭建一個SpringBoot+SpringData JPA的環境，測試接口的時候也成功獲取獲得數據了。

• 帶你搭一個SpringBoot+SpringData JPA的Demo

個人目的是作一個十分簡易的管理系統，這就得有頁面，下面我繼續來說講我是怎麼快速搭一個管理系統的。

ps:因爲是簡易版，個人目的是可以快速搭建，而不在於代碼的規範性。(因此在後面你可能會看到不少醜陋的代碼)

1、搭建管理系統

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)：

• https://v3.bootcss.com/getting-started/#template
• https://www.bootcdn.cn/all/

樂於輸出乾貨的Java技術公衆號：Java3y。公衆號內有200多篇原創技術文章、海量視頻資源、精美腦圖，不妨來關注一下！

以爲個人文章寫得不錯，不妨點一下贊！