15分鐘教你使用 Spring Boot+Thymeleaf自定義一個的圖牀管理工具！

說明一下這個只是學習使用，圖牀上傳工具直接用 picgo 就行，可是，picgo 沒法對上傳的圖片進行很好的管理。本身寫一個而後部署到本身服務器上使用也很香，擴展一點的你還能夠自定義一個高大上的相冊管理，解決不少然保存相片的問題。

SpringBoot +OSS 服務自定義圖牀

源碼地址：github.com/Snailclimb/…

前言

疫情之下，天天都是好吃懶作啊！反正在家閒着沒有事情，因而乎，花了一天時間寫了這個簡單項目。其實我原本是準備繼續完善一下，而後部署到本身的雲服務器上看成本身的相冊。後來實在太懶了，也不想寫前端了，因而留下了一些代辦。

項目雖小，可是五臟俱全，能夠直接拿來看成工具使用，代碼寫的雖然倉促，可是整體上應該沒有什麼大問題，初學者也能夠直接拿來學習。

總的來講，這個項目主要能爲你提供這些幫助：

1. 阿里雲 oss 做爲圖牀服務很是經常使用，簡單封裝和了解一下有助於你之後使用；
2. 技術棧使用 SpringBoot 和 thymeleaf 模板引擎，前端框架用的是國產好評較多的 layui。這個項目能夠帶你走一遍先後端一塊兒開發的流程。

我會寫 React 和 Vue 可是考慮到大部分後端的朋友沒有接觸過，因此直接用 thymeleaf整的，話說 layui 也仍是第一次用！都是跟着 layui 官網找葫蘆畫瓢一步一步寫的前端頁面 。

效果展現

頁面長的比較醜，沒有花太多時間在這個上面，將就着看一下。

bilibili 在線觀看：www.bilibili.com/video/av880…

上傳頁面

上傳成功

技術棧

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

以前 React 和 Vue 都寫過，仍是第一次用 thymeleaf 加上 layai 來開發前端，總的來講，我仍是喜歡 React 多一點。

啓動項目

1.克隆到本地

git clone git@github.com:Snailclimb/springboot-aliyun-oss.git
複製代碼

2.使用idea或者其餘開發工具打開項目

3.添加application.yml，內容以下：

ps：我在用 git 提交的時候將application.yml 忽略掉了，因此你須要手動添加到你的本地。

spring:
 servlet:
 multipart:
 max-file-size: 10MB
 max-request-size: 10MB
 thymeleaf:
    #關閉thymeleaf的緩存，否則在開發過程當中修改頁面不會馬上生效須要重啓，生產可配置爲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
    #阿里雲主帳號AccessKey擁有全部API的訪問權限，風險很高。建議建立並使用RAM帳號進行API訪問或平常運維，請登陸 https://ram.console.aliyun.com 建立RAM帳號。
 access-key-secret: 替換爲你的key secret
 file-host: test

複製代碼

4.運行項目便可！

代辦

• 單個圖片的上傳和刪除（先後端）
• 查看全部圖片（後端）
• 查看全部圖片（前端）
• 查看全部圖片的時候能夠對圖片進行操做好比刪除
• ......