如何自己动手写一个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技术站