自己动手写一个java版简单云相册

如何自己动手写一个java版简单云相册？

在这个攻略中我们将使用Spring Boot和Thymeleaf模板引擎来搭建一个简单的云相册，允许用户上传并分享自己的照片。以下是该应用程序的主要功能：

用户可以在相册中上传自己的照片
用户可以查看所有已上传的照片
用户可以通过链接轻松共享照片
未登录的用户无法上传照片

接下来，让我们一起进行这个项目的实现吧。

第一步：创建Spring Boot应用程序

首先，我们需要安装并配置好Java和Maven，然后创建一个Spring Boot项目。在命令行输入以下命令：

$ mvn spring-boot:run

这将启动一个简单的Spring Boot应用程序，并在浏览器中打开localhost:8080。我们将在下一个步骤中进行更改以创建相册。

第二步：添加照片上传功能

我们需要添加一个视图来允许用户上传照片。

在resource目录下创建一个名为tempate的文件夹，然后在该文件夹中创建一个名为"upload.html"的文件。在该html文件中添加以下代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Upload Photo</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data" th:action="@{/upload}">
        <input type="file" name="file" id="file"/>
        <input type="submit" value="Submit"/>
    </form>
</body>
</html>

这会创建一个简单的HTML表单，允许用户上传照片。现在我们需要创建一个控制器，让Spring Boot直接从文件系统上加载和保存上传的照片。

在package根目录下创建一个名为"controller"的子目录，然后在其中添加一个名为"PhotoController.java"的文件。该文件的内容如下：

@Controller
public class PhotoController {

    private static String UPLOAD_DIR = System.getProperty("user.dir") + "/uploads";

    @GetMapping("/upload")
    public String index() {
        return "upload";
    }

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            Path fileLocation = Paths.get(UPLOAD_DIR + File.separator + file.getOriginalFilename());
            Files.copy(file.getInputStream(), fileLocation, StandardCopyOption.REPLACE_EXISTING);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "redirect:/";
    }
}

这个类中，@GetMapping注释将我们的控制器方法映射到“/upload”路径，它将显示一个能够上传文件的表单。@PostMapping注释指定了它将的处理HTTP POST请求，即上传文件。我们使用Java NIO的Path和Files类以及MultipartFile类的方法来将上传的文件从表单中读取并写入磁盘。

第三步：展示所有照片

我们需要一个控制器来检索并显示已上传的所有照片。在"controller"目录中创建一个名为"GalleryController.java"的文件，将以下代码添加到其中：

@Controller
public class GalleryController {

    private static String UPLOAD_DIR = System.getProperty("user.dir") + "/uploads";

    @GetMapping("/")
    public String index(Model model) {
        File[] files = new File(UPLOAD_DIR).listFiles();

        // Add the file names to a list
        List<String> filenames = new ArrayList<>();
        for (File file : files) {
            if (file.isFile()) {
                filenames.add(file.getName());
            }
        }

        model.addAttribute("data", filenames);
        return "index";
    }
}

该控制器负责从文件系统中读取照片，并将文件名存储在一个List中，然后将List传递给前端以便展示。

在resource/template目录中创建一个名为"index.html"的文件，加入以下代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Gallery</title>
</head>
<body>
    <h1>Welcome to the Gallery</h1>
    <div th:each="pic : ${data}">
        <a th:href="@{'/uploads/' + ${pic}}"><img src="@{'/uploads/' + ${pic}}" width="200"/></a>
    </div>
</body>
</html>

@{...}用于链接到静态资源。这将从/uploads目录中获取照片并在前端显示它们。

第四步：添加安全性

访问GalleryController中的"/upload"路径时，我们希望仅允许已登录用户才能上传照片。为此，我们将在以下类中添加Spring Security：com.example.demo.SecurityConfiguration。

在本项目中，我们使用基于内存的认证管理器。在SecurityConfiguration.java文件中，我们将定义一个包含用户名、密码和角色的映射，以及一个PasswordEncoder作为密码编码器。

@Configuration
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
                .withUser("user")
                .password(passwordEncoder().encode("password"))
                .roles("USER");
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .authorizeRequests()
                .antMatchers("/upload").hasRole("USER")
                .anyRequest().permitAll()
                .and()
                .formLogin()
                .loginPage("/login").permitAll();
    }
}

然后，在security中创建一个login.html页面，对应于Spring Security中的登录页。该页面包含用于输入用户名和密码的输入框、登录按钮和取消按钮，如下所示：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Login</title>
    <meta charset="UTF-8">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <h1> Please Login </h1>

            <form th:action="@{/login}" method="post">
                <input type="text" id="username" name="username" placeholder="Username"  autofocus/>

                <input type="password" id="password" name="password" placeholder="Password"/>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                <a href="#" class="btn btn-lg btn-default btn-block">Cancel</a>
            </form>
        </div>
    </div>
</div>
</body>
</html>

第五步：结束语

本文教程我们学习了如何使用Spring Boot和Thymeleaf构建一个非常简单的云相册。该应用程序允许用户上传照片、查看已上传的照片，并限制未授权用户的访问。通过本篇文章的学习，相信您已经掌握了Spring Boot和Thymeleaf的编程技巧，希望您们能在此基础上，完成更优美的云相册的应用开发。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：自己动手写一个java版简单云相册 - Python技术站