15分钟教你使用 Spring Boot+Thymeleaf自定义一个的图床管理工具!

2020/2/12 17:25:02

本文主要是介绍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.运行项目即可!

代办

  • 单个图片的上传和删除(前后端)
  • 查看所有图片(后端)
  • 查看所有图片(前端)
  • 查看所有图片的时候可以对图片进行操作比如删除
  • ......


这篇关于15分钟教你使用 Spring Boot+Thymeleaf自定义一个的图床管理工具!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程