最近因需要快速搭建一个后台，目标功能为实现图片上传功能，然后通过Java后台调用Python模块运行，返回运行结果显示。
由于对后台功能要求简单，可创建最简单的 springboot demo即可。
本文主要内容：
一. 10步快速搭建Springboot 后台
二：实现springboot 前后端数据传输，以及实现上传图片和图片预加载功能
一. 快速搭建Springboot 后台
-
推荐使用 IDEA 开发工具；
-
新建项目，选择 spring initallizr，选择 jdk 版本，然后next
image.png
-
勾选 spring web 即可创建项目，新建项目可能需要几分钟的下载时间
image.png
-
目录结构如下：
image.png
-
在 pom.xml 下配置 页面启动器
<!--01web启动器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--02thymeleaf启动器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
- 在 src/main/resources 目录下 application.properties 文件中配置HTML和js的存放路径：
spring.thymeleaf.prefix=classpath:/templates/
spring.web.resources.static-locations=classpath:/
-
在 resource/templates 文件下编写 HTML 页面，在 resources/static 目录下存放 js，css等文件
image.png
-
在java中新建 controller包，新建 indexcontroller类，按需要设立即可
IndexController 类中代码如下：
@Controller
public class IndexController {
@RequestMapping("/index") // 定义路径
public String showHelloWorld(){
return "index_form"; // 返回页面名字
}
此处注意 @RequestMapping("/index") 中路径 “/index” 和 返回的页面名字 “index_form” 不要相同，否则会报错
-
在idea中运行自动生成的SpringbootFashionApplication main函数（不同项目名对应不同名字），出现以下信息代表运行成功：
image.png
- 然后在浏览器中输入 localhost:8080/index 即可打开 index_form.html 页面，至此 简单的 springboot demo搭建完毕。
二：实现springboot 前后端数据传输，以及实现上传图片和图片预加载功能：
- 数据传输：前端使用jQuery插件，方便使用
index_form.html 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>
<a href="http://localhost:8080/hello">点击测试 Hello World</a><br><br>
<a href="http://localhost:8080/index">点击测试 index form</a><br><br>
<br><br>
<button id="btn1" >这里是大大的测试button </button>
<h1>实现文件长传</h1>
<!--enctype="开启多媒体标签" -->
<form action="http://localhost:8080/filetest" method="post"
enctype="multipart/form-data">
<input name="fileImage" type="file" />
<input type="submit" value="提交"/>
</form>
<input id="upload_image", type="file">
<div id="img_show"></div>
<img src="" id="img_preview">
<br><br>
</body>
<!-- 引入使用 jQuery-->
<script src="../static/js/jquery-3.6.0.min.js"></script>
</html>
界面：
image.png
-
实现图片预览功能：
image.png
HTML中新建 input 类型选择 文件，js代码如下
$('#upload_image').change(function (){
// 获取filelist 的第一个元素
var file = document.getElementById('upload_image').files[0];
var src = window.URL.createObjectURL(file);
document.getElementById('img_preview').src = src;
})
当在页面中选择文件加入图片时，实现效果如下：
image.png
- 实现图片上传功能
-
HTML中增加一个提交按钮：
image.png
- 定义 接收图片数据的 Controller类，代码如下：
@Controller
public class FileTestController {
@RequestMapping("/filetest")
@ResponseBody
public String file(MultipartFile fileImage) throws IOException {
File directory = new File(""); // 定义当前路径
String path = directory.getCanonicalPath(); // 获取当前路径
File file_dir = new File(path, "images"); // 文件存放路径
if (!file_dir.exists()) {
file_dir.mkdirs();
}
String fileName = fileImage.getOriginalFilename();
if (null == fileName || fileName.isEmpty()) {
System.out.println("file name is empty!");
return "empty";
}
File imageFile = new File(file_dir,fileName);
System.out.println(imageFile.getAbsoluteFile());
try {
fileImage.transferTo(imageFile); //Transfer the received file to the given destination file.
}catch(IOException e){
e.printStackTrace();
}
return "ok";
}
}
- 点击上传，上传成功时会返回 ok并在页面上显示。
- 至此实现图片上传功能。
网友评论