如何使用 Spring Boot+Thymeleaf自定義一個(gè)圖床管理工具

SpringBoot +OSS 服務(wù)自定義圖床

前言

疫情之下，每天都是好吃懶做??！反正在家閑著沒有事情，于是乎，花了一天時(shí)間寫了這個(gè)簡(jiǎn)單項(xiàng)目。其實(shí)我本來(lái)是準(zhǔn)備繼續(xù)完善一下，然后部署到自己的云服務(wù)器上當(dāng)作自己的相冊(cè)。后來(lái)實(shí)在太懶了，也不想寫前端了，于是留下了一些代辦。

項(xiàng)目雖小，但是五臟俱全，可以直接拿來(lái)當(dāng)作工具使用，代碼寫的雖然倉(cāng)促，但是總體上應(yīng)該沒有什么大問題，初學(xué)者也可以直接拿來(lái)學(xué)習(xí)。

總的來(lái)說，這個(gè)項(xiàng)目主要能為你提供這些幫助：

1.  oss 作為圖床服務(wù)非常常用，簡(jiǎn)單封裝和了解一下有助于你以后使用；
2. 技術(shù)棧使用 SpringBoot 和 thymeleaf 模板引擎，前端框架用的是國(guó)產(chǎn)好評(píng)較多的 layui。這個(gè)項(xiàng)目可以帶你走一遍前后端一起開發(fā)的流程。

我會(huì)寫 React 和 Vue 但是考慮到大部分后端的朋友沒有接觸過，所以直接用 thymeleaf整的，話說 layui 也還是第一次用！都是跟著 layui 官網(wǎng)找葫蘆畫瓢一步一步寫的前端頁(yè)面 。

效果展示

“  

頁(yè)面長(zhǎng)的比較丑，沒有花太多時(shí)間在這個(gè)上面，將就著看一下。

”    

上傳頁(yè)面

 

上傳成功

 

技術(shù)棧

• 后端：Spring Boot
• 前端：thymeleaf 模板引擎 +layui 框架

之前 React 和 Vue 都寫過，還是第一次用 thymeleaf 加上 layai 來(lái)開發(fā)前端，總的來(lái)說，我還是喜歡 React 多一點(diǎn)。

啟動(dòng)項(xiàng)目

1.克隆到本地

git clone git@github.com:Snailclimb/springboot-aliyun-oss.git

2.使用idea或者其他開發(fā)工具打開項(xiàng)目

3.添加application.yml，內(nèi)容如下：

“  

ps：我在用 git 提交的時(shí)候?qū)?code>application.yml 忽略掉了，所以你需要手動(dòng)添加到你的本地。

”  

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB
  thymeleaf:
    #關(guān)閉thymeleaf的緩存，不然在開發(fā)過程中修改頁(yè)面不會(huì)立刻生效需要重啟，生產(chǎn)可配置為true
    prefix: classpath:/web/
    cache: false
    suffix: .html
aliyun:
  oss:
    bucket-name: my-blog-to-use
    endpoint: oss-cn-beijing.aliyuncs.com
    access-key-id: 替換為你的key id
    #阿里云主賬號(hào)AccessKey擁有所有API的訪問權(quán)限，風(fēng)險(xiǎn)很高。建議創(chuàng)建并使用RAM賬號(hào)進(jìn)行API訪問或日常運(yùn)維，請(qǐng)登錄 https://ram.console.aliyun.com 創(chuàng)建RAM賬號(hào)。
    access-key-secret: 替換為你的key secret
    file-host: test

4.運(yùn)行項(xiàng)目即可！

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。