1. 程式人生 > >【極簡版】SpringBoot+SpringData JPA 管理系統

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

開發十年,就只剩下這套架構體系了! >>>   

前言

只有光頭才能變強。

文字已收錄至我的GitHub倉庫,歡迎Star:https://github.com/ZhongFuCheng3y/3y

在上一篇中已經講解了如何從零搭建一個SpringBoot+SpringData JPA的環境,測試介面的時候也成功獲取得到資料了。

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

ps:由於是簡易版,我的目的是能夠快速搭建,而不在於程式碼的規範性。(所以在後面你可能會看到很多醜陋的程式碼)

一、搭建管理系統

1.1. 搭建頁面

在上一篇的最後,我們可以通過http://localhost:8887/user介面拿到我們User表所有的記錄了。我們現在希望把記錄塞到一個管理頁面上(展示起來)。

作為一個後端,我HTML+CSS實在是醜陋,於是我就去找了一份BootStrap的模板。首先,我進到bootStrap的官網,找到基本模板這一塊:

bootStrap

我們在裡邊可以看到挺多的模板的,這裡選擇一個控制檯

頁面:

bootstrap example

於是,就把這份模板下載下來,在本地中執行起來試試看。官方給出的連結是下載整一份文件,我們找到想要的頁面即可:

files

於是我們將這兩份檔案單獨貼上在我們的專案中,發現這HTML檔案需要bootstrap.css、bootstrap.js、jquery 的依賴(原來用的是相對路徑,其實我們就是看看相對路徑的檔案在我們這有沒有,如果沒有,那就是我們需要的)。這裡我們在CDN中找找,匯入連結就行了。

bootcdn

於是我們就將所缺的依賴替換成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目錄下:

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";
    }

圖片如下:

user code

在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>

圖片如下:

code image

刪除的Controller程式碼如下:

/**
 * 根據ID刪除某個使用者
 */
@GetMapping(value = "/deleteUser", produces = {"application/json;charset=UTF-8"})
public String  deleteUserById (String id,Model model) {

  userService.deleteUserById(id);
  return getAllUser(model);

}

我們再找幾張自己喜歡的圖片,簡單刪除一些不必要模組,替換成我們想要的文字,就可以得到以下的效果了:

result iamge

至於圖片上的評論管理、備忘錄管理的做法都如上,我只是把檔案再複製一次而已(期中沒有寫任何的JS程式碼,懶)。

在編寫的期中,要值得注意的是:靜態的檔案一般我們會放在static資料夾中。

專案的目錄結構如下:

project structure

最後

本文涉及到的連結(bootstrap & cdn):

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

帥的人都關注了

覺得我的文章寫得不錯,不妨點一下