Springboot制作小網(wǎng)盤(pán)系統(tǒng)(小項(xiàng)目)

前言

最近，用Springboot thymleaf ajax實(shí)現(xiàn)了一個(gè)小型網(wǎng)盤(pán)系統(tǒng)，記錄其中心得。

項(xiàng)目完成背景

有個(gè)堂姐做食品公司采購(gòu)部門(mén)，經(jīng)常收到客戶(hù)發(fā)來(lái)的質(zhì)檢，規(guī)格書(shū)，廠(chǎng)檢等等小文件信息，在郵箱中儲(chǔ)存時(shí)候自己查看起來(lái)比較麻煩，想讓我?guī)退鉀Q優(yōu)化下，恰好剛剛掌握些寫(xiě)網(wǎng)頁(yè)小知識(shí)就答應(yīng)了。

項(xiàng)目環(huán)境：

前端：html thymleaf（混合） layui jquery

后端：Springboot Mybatis mysql5 （后續(xù)要加入安全框架，我自己就簡(jiǎn)單用session了）

項(xiàng)目步驟：

分析角色：管理員，客戶(hù)

分析操作：上傳文件，（花式）查看（下載）文件，（花式）查看用戶(hù)，操作信息（管理員）。

建庫(kù)，寫(xiě)基本增刪改查。Junit單元測(cè)試方法。

測(cè)試文件上傳和下載（最重要的是上傳的路徑要唯一且能找到），因?yàn)槲募蟼饕郧皩?xiě)過(guò)（博客里javaweb里模板可用），直接移植。

修改前端，寫(xiě)前端（被坑了挺久）

渲染數(shù)據(jù)（也是我很糾結(jié)的地方）

測(cè)試，打war包上傳測(cè)試

這里面有兩個(gè)比較坑的地方，

一是Springboot上傳文件到相對(duì)路徑的時(shí)候因?yàn)镾pringboot是內(nèi)置tomcat，路徑不固定，這點(diǎn)很不友好，而SSM傳統(tǒng)項(xiàng)目相對(duì)來(lái)說(shuō)webapp路徑更好測(cè)試一些。還有模板夠強(qiáng)大路徑?jīng)]問(wèn)題。

另一個(gè)就是渲染數(shù)據(jù)了，因?yàn)橐郧皩?xiě)項(xiàng)目都是使用ajax json進(jìn)行渲染傳輸，然后發(fā)現(xiàn)現(xiàn)在很多模板引擎依然盛行，然后就想著實(shí)戰(zhàn)下模板引擎。本來(lái)想完全采用模板引擎 Model傳輸數(shù)據(jù)，后來(lái)發(fā)現(xiàn)有些場(chǎng)景真的還是用Ajax更好，更方便。

因?yàn)樽约菏浅鯇W(xué)者，將thmyleaf基礎(chǔ)使用和注意點(diǎn)記錄下來(lái)。

thymleaf文件名為 xxx.html在teamplates文件夾下。要有對(duì)應(yīng)的controller進(jìn)行渲染

雖然為html后綴，但是有些和html還是不同的，需要加上固定前綴頭，并且引入資源要用thymleaf的格式：th:href="@{xx/xx/.css}" th:src的js文件也是如此。

對(duì)應(yīng)一些屬性需要渲染時(shí)候，后臺(tái)還是傳統(tǒng)的Springmvc的Model，Modelmap，Modelandview三種map傳值，前端thymleaf有自己的寫(xiě)法，比如渲染表單的value時(shí)候后端：model.addAttribute("msg","你好");在前端渲染在文本框value里時(shí)候：th:value="${msg}",渲染文本的而不是屬性時(shí)候th:text="${msg}"即可

對(duì)于java的bean對(duì)象填入model里面時(shí)候即可渲染，對(duì)于List對(duì)象即可渲染，對(duì)于其他種類(lèi)渲染可參考其他資料。

但是，thymleaf并不是適合所有場(chǎng)景，比如 對(duì)于這種只需要局部刷新，而不需要加載整個(gè)頁(yè)面的，則用ajax最好了。如果每次都用model真的不知道多浪費(fèi)資源和時(shí)間。

另外一點(diǎn)ajax好的地方就是利于緩存，因?yàn)榻缑婵傤}樣式不變，變得是部分?jǐn)?shù)據(jù)，那么就可以將html頁(yè)面緩存，每次打開(kāi)的時(shí)間執(zhí)行ajax就可以渲染數(shù)據(jù)，而模板引擎需要查詢(xún)到后臺(tái)數(shù)據(jù)才能加載出來(lái)，返回的是整個(gè)頁(yè)面，效率也不如ajax。并且ajax更適合分工合作。而thymleaf更適合個(gè)人開(kāi)發(fā)，或者不太熟悉ajax，js語(yǔ)法庫(kù)的人使用。。

對(duì)于項(xiàng)目打包，建議打成war包，因?yàn)轫?xiàng)目里有文件夾數(shù)據(jù)，打成war如果項(xiàng)目更新只改動(dòng)更新部分而不會(huì)丟失數(shù)據(jù)。

另外附上一些功能圖，管理端，客戶(hù)端

至于項(xiàng)目比較爛，就不貼了。因?yàn)樽约撼鯇?xiě)，不善于前端，還用的之前的layui模板二次開(kāi)發(fā)。有點(diǎn)小混亂。 ?

如果對(duì)后端、爬蟲(chóng)、數(shù)據(jù)結(jié)構(gòu)算法等感性趣歡迎關(guān)注我的個(gè)人公眾號(hào)交流：bigsai

HTML Java Spring Boot

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。