返回

10分钟掌握Spring Boot + Vue + Antd + US3,打造个人图床

见解分享

网上已经有一些运行不错的图床了,比如SM.MS、图壳、路过图床等。那为什么我们还要自己搭建图床呢?

  • 独立自主: 自建图床,可以完全控制数据,无需担心隐私泄露或服务中断。
  • 成本低廉: US3是亚马逊云服务中性价比很高的对象存储服务,费用低廉。
  • 扩展性强: US3具有良好的可扩展性,可以满足不断增长的存储需求。

在本教程中,你将学习如何使用Spring Boot和Vue搭建一个简单的图床,并使用Antd作为前端框架和US3作为对象存储服务。

搭建步骤

1. 创建Spring Boot项目

首先,创建一个新的Spring Boot项目,可以使用Spring Initializr。

2. 添加Maven依赖

在pom.xml文件中添加以下依赖:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-actuator</artifactId>
</dependency>

<dependency>
    <groupId>com.amazonaws</groupId>
    <artifactId>aws-java-sdk-s3</artifactId>
</dependency>

3. 配置数据库

创建一个名为image.sql的文件,并添加以下内容:

CREATE TABLE image (
    id INT NOT NULL AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    type VARCHAR(255) NOT NULL,
    size INT NOT NULL,
    url VARCHAR(255) NOT NULL,
    PRIMARY KEY (id)
);

然后,在application.properties文件中添加以下配置:

spring.datasource.url=jdbc:mysql://localhost:3306/image
spring.datasource.username=root
spring.datasource.password=123456
spring.jpa.hibernate.ddl-auto=update

4. 创建实体类

创建一个名为Image.java的文件,并添加以下内容:

import javax.persistence.*;

@Entity
@Table(name = "image")
public class Image {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Column(name = "name")
    private String name;

    @Column(name = "type")
    private String type;

    @Column(name = "size")
    private Long size;

    @Column(name = "url")
    private String url;

    //省略getter和setter方法
}

5. 创建Repository接口

创建一个名为ImageRepository.java的文件,并添加以下内容:

import org.springframework.data.jpa.repository.JpaRepository;

public interface ImageRepository extends JpaRepository<Image, Integer> {

}

6. 创建Service接口

创建一个名为ImageService.java的文件,并添加以下内容:

import org.springframework.stereotype.Service;

public interface ImageService {

    void save(Image image);

    Image findById(Integer id);

    List<Image> findAll();

    void delete(Integer id);
}

7. 创建ServiceImpl类

创建一个名为ImageServiceImpl.java的文件,并添加以下内容:

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ImageServiceImpl implements ImageService {

    @Autowired
    private ImageRepository imageRepository;

    @Override
    public void save(Image image) {
        imageRepository.save(image);
    }

    @Override
    public Image findById(Integer id) {
        return imageRepository.findById(id).orElse(null);
    }

    @Override
    public List<Image> findAll() {
        return imageRepository.findAll();
    }

    @Override
    public void delete(Integer id) {
        imageRepository.deleteById(id);
    }
}

8. 创建Controller类

创建一个名为ImageController.java的文件,并添加以下内容:

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/image")
public class ImageController {

    @Autowired
    private ImageService imageService;

    @PostMapping