資訊專欄INFORMATION COLUMN
摘要：帶你搭一個(gè)的我的目的是做一個(gè)十分簡(jiǎn)易的管理系統(tǒng)，這就得有頁(yè)面，下面我繼續(xù)來(lái)講講我是怎么快速搭一個(gè)管理系統(tǒng)的。由于是簡(jiǎn)易版，我的目的是能夠快速搭建，而不在于代碼的規(guī)范性。我們現(xiàn)在希望把記錄塞到一個(gè)管理頁(yè)面上展示起來(lái)。
前言
只有光頭才能變強(qiáng)。
文本已收錄至我的GitHub倉(cāng)庫(kù)，歡迎Star：https://github.com/ZhongFuCheng3y/3y
在上一篇中已經(jīng)講解了如何從零搭建一個(gè)SpringBoot+SpringData JPA的環(huán)境，測(cè)試接口的時(shí)候也成功獲取得到數(shù)據(jù)了。
帶你搭一個(gè)SpringBoot+SpringData JPA的Demo
我的目的是做一個(gè)十分簡(jiǎn)易的管理系統(tǒng)，這就得有頁(yè)面，下面我繼續(xù)來(lái)講講我是怎么快速搭一個(gè)管理系統(tǒng)的。
ps:由于是簡(jiǎn)易版，我的目的是能夠快速搭建，而不在于代碼的規(guī)范性。(所以在后面你可能會(huì)看到很多丑陋的代碼)一、搭建管理系統(tǒng) 1.1. 搭建頁(yè)面
在上一篇的最后，我們可以通過(guò)http://localhost:8887/user接口拿到我們User表所有的記錄了。我們現(xiàn)在希望把記錄塞到一個(gè)管理頁(yè)面上(展示起來(lái))。
作為一個(gè)后端，我HTML+CSS實(shí)在是丑陋，于是我就去找了一份BootStrap的模板。首先，我進(jìn)到bootStrap的官網(wǎng)，找到基本模板這一塊：
我們?cè)诶镞吙梢钥吹酵Χ嗟哪０宓?，這里選擇一個(gè)控制臺(tái)頁(yè)面：
于是，就把這份模板下載下來(lái)，在本地中運(yùn)行起來(lái)試試看。官方給出的鏈接是下載整一份文檔，我們找到想要的頁(yè)面即可：
于是我們將這兩份文件多帶帶粘貼在我們的項(xiàng)目中，發(fā)現(xiàn)這HTML文件需要bootstrap.css、bootstrap.js、jquery?的依賴(原來(lái)用的是相對(duì)路徑，其實(shí)我們就是看看相對(duì)路徑的文件在我們這有沒(méi)有，如果沒(méi)有，那就是我們需要的)。這里我們?cè)贑DN中找找，導(dǎo)入鏈接就行了。
于是我們就將所缺的依賴替換成BootCDN的依賴，最重要的幾個(gè)依賴如下：
如無(wú)意外的話，我們也能在項(xiàng)目中正常打開(kāi)頁(yè)面。
1.1.2 把數(shù)據(jù)塞到頁(yè)面上把數(shù)據(jù)塞到頁(yè)面上，有兩種方案：要么就后端返回json給前端進(jìn)行解析，要么就使用模板引擎。而我為了便捷，是不想寫(xiě)JS代碼的。所以，我使用freemarker這個(gè)模板引擎。
為什么這么多模板引擎，我選擇這個(gè)？因?yàn)槲抑粫?huì)這個(gè)！
在SpringBoot下使用freemarker也是非常簡(jiǎn)單，首先，我們需要加入pom文件依賴：
org.springframework.boot spring-boot-starter-freemarker
隨后，在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
這里我簡(jiǎn)單解釋一下：freemarker的文件后綴名為.ftl，程序從/templates路徑下加載我們的文件。
于是乎，我將本來(lái)是.html的文件修改成.ftl文件，并放在templates目錄下：
接下來(lái)將我們Controller得到的數(shù)據(jù)，塞到Model對(duì)象中：
/**
* 得到所有用戶
*/
@GetMapping(value = "/user", produces = {"application/json;charset=UTF-8"})
public String getAllUser ( Model model) {
List allUser = userService.getAllUser();
model.addAttribute("users", allUser);
return "/index";
}
圖片如下：
在ftl文件中，我們只要判斷數(shù)據(jù)是否存在，如果存在則在表格中遍歷出數(shù)據(jù)就行了：
<#if users?? && (users?size > 0)>
<#list users as user>
${user.userId}
${user.userNickname}
${user.userEmail}
${user.actiState}
刪除
<#else>
還沒(méi)有任何用戶
圖片如下：
刪除的Controller代碼如下：
/**
* 根據(jù)ID刪除某個(gè)用戶
*/
@GetMapping(value = "/deleteUser", produces = {"application/json;charset=UTF-8"})
public String deleteUserById (String id,Model model) {
userService.deleteUserById(id);
return getAllUser(model);
}
我們?cè)僬規(guī)讖堊约合矚g的圖片，簡(jiǎn)單刪除一些不必要模塊，替換成我們想要的文字，就可以得到以下的效果了：
至于圖片上的評(píng)論管理、備忘錄管理的做法都如上，我只是把文件再?gòu)?fù)制一次而已(期中沒(méi)有寫(xiě)任何的JS代碼,懶)。
在編寫(xiě)的期中，要值得注意的是：靜態(tài)的文件一般我們會(huì)放在static文件夾中。
項(xiàng)目的目錄結(jié)構(gòu)如下：
最后本文涉及到的鏈接(bootstrap & cdn)：
https://v3.bootcss.com/getting-started/#template
https://www.bootcdn.cn/all/
樂(lè)于輸出干貨的Java技術(shù)公眾號(hào)：Java3y。公眾號(hào)內(nèi)有200多篇原創(chuàng)技術(shù)文章、海量視頻資源、精美腦圖，不妨來(lái)關(guān)注一下！
覺(jué)得我的文章寫(xiě)得不錯(cuò)，不妨點(diǎn)一下贊！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/77467.html
摘要：一從零搭建環(huán)境本次我使用的是編輯器來(lái)搭建和環(huán)境首先，我們?cè)谛陆?xiàng)目的時(shí)候，選擇，然后就行了?？梢钥闯?，本次的版本為。這是一個(gè)非常好用的插件，有了它我們可以不用寫(xiě)繁瑣的方法。非常適合我們做一些簡(jiǎn)答的測(cè)試和小功能。 前言 只有光頭才能變強(qiáng)。 文本已收錄至我的GitHub倉(cāng)庫(kù)，歡迎Star：https://github.com/ZhongFuCheng3y/3y 不知道大家對(duì)SpringB...
摘要：一入門(mén)在上次學(xué)的時(shí)候，那時(shí)候的教程就已經(jīng)涉及到了一點(diǎn)的知識(shí)了。入門(mén)只是中的一個(gè)子模塊是一套標(biāo)準(zhǔn)接口，而是的實(shí)現(xiàn)底層默認(rèn)實(shí)現(xiàn)是使用的首個(gè)接口就是，它是一個(gè)標(biāo)記接口。這也導(dǎo)致了我出現(xiàn)這個(gè)錯(cuò)誤的原因。 一、SpringData入門(mén) 在上次學(xué)SpringBoot的時(shí)候，那時(shí)候的教程就已經(jīng)涉及到了一點(diǎn)SpringData JPA的知識(shí)了。當(dāng)時(shí)還是第一次見(jiàn)，覺(jué)得也沒(méi)什么大不了，就是封裝了Hiber...
摘要：正文公司使用的是現(xiàn)在流行的，數(shù)據(jù)庫(kù)方面使用的是。這幾天用的最多的就是用進(jìn)行查詢了，簡(jiǎn)單的查詢很簡(jiǎn)單，網(wǎng)上查一查就有一堆方案，直到遇到分頁(yè)查詢的時(shí)候出了問(wèn)題。 寫(xiě)作原因 之前在學(xué)校都是做前端，但是最后找了個(gè)Java后端的工作，框架什么的基本沒(méi)用過(guò)，所以工作中遇到了很多問(wèn)題，所以決定記錄下來(lái)工作中遇到的問(wèn)題，記錄成長(zhǎng)的點(diǎn)滴。 正文 公司使用的是現(xiàn)在流行的SpringBoot，數(shù)據(jù)庫(kù)方面使用...
摘要：熱加載代表的是我們不需要重啟服務(wù)器，就能夠類檢測(cè)得到，重新生成類的字節(jié)碼文件無(wú)論是熱部署或者是熱加載都是基于類加載器來(lái)完成的。驗(yàn)證階段字節(jié)碼文件不會(huì)對(duì)造成危害準(zhǔn)備階段是會(huì)賦初始值，并不是程序中的值。 一、SpringBoot入門(mén) 今天在慕課網(wǎng)中看見(jiàn)了Spring Boot這么一個(gè)教程，這個(gè)Spring Boot作為JavaWeb的學(xué)習(xí)者肯定至少會(huì)聽(tīng)過(guò)，但我是不知道他是什么玩意。 只是大...
閱讀 977·2021-11-24 09:38
閱讀 1161·2021-10-08 10:05
閱讀 2662·2021-09-10 11:21
閱讀 2860·2019-08-30 15:53
閱讀 1880·2019-08-30 15:52
閱讀 2035·2019-08-29 12:17
閱讀 3485·2019-08-29 11:21
閱讀 1677·2019-08-26 12:17
