如何用Spring、Bootstrap、JavaScript创建调用Java方法的Web表单？

嘿，别慌！作为Java和Spring新手，刚入职就碰新项目确实会有点手足无措，我完全懂这种感觉😉。咱们一步步来拆解这个项目，把大目标拆成小任务，就没那么吓人了：

这是整个项目的骨架，不用从零开始写：

• 用Spring官方的初始化工具生成项目，选这些核心依赖：Spring Web（用来搭建Web服务）、Thymeleaf（新手友好的页面渲染工具，用来做Web表单）、Spring Boot DevTools（热重载，改完代码不用重启服务，省时间）。
• 把生成的项目包导入你常用的IDE（IntelliJ/Eclipse），先跑起来试试——启动后访问http://localhost:8080，能看到默认的白页就说明基础没问题。

接下来做用户能看到的表单界面：

• 在src/main/resources/templates目录下新建一个HTML文件（比如叫scan-form.html），用Thymeleaf写表单，示例如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>扫描表单提交</title>
</head>
<body>
    <h1>请上传扫描文件并填写信息</h1>
    <form th:action="@{/submit}" method="post" enctype="multipart/form-data">
        <div>
            <label>姓名：</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label>扫描文件：</label>
            <input type="file" name="scanFile" accept=".pdf,.jpg,.png" required/>
        </div>
        <button type="submit">提交</button>
    </form>
</body>
</html>

• 这个表单支持文本输入和扫描文件上传，accept属性限定了文件格式，你可以根据便携设备的输出格式调整。

现在要写代码接收用户提交的内容：

• 创建一个Controller类（比如ScanFormController），处理两个请求：GET请求返回表单页面，POST请求接收表单数据和上传的文件：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

@Controller
public class ScanFormController {

    // 访问根路径时显示表单页面
    @GetMapping("/")
    public String showForm() {
        return "scan-form"; // 对应templates下的scan-form.html文件
    }

    // 处理表单提交逻辑
    @PostMapping("/submit")
    public String handleFormSubmit(@RequestParam("username") String username,
                                   @RequestParam("scanFile") MultipartFile scanFile) throws IOException {
        // 这里可以把用户名等文本数据存入数据库（后续可以加Spring Data JPA依赖实现）
        System.out.println("提交的用户名：" + username);

        // 处理扫描文件：保存到本地指定目录
        if (!scanFile.isEmpty()) {
            String uploadDir = "scanned-files/";
            File dir = new File(uploadDir);
            if (!dir.exists()) {
                dir.mkdirs(); // 如果目录不存在就创建
            }
            File saveFile = new File(uploadDir + scanFile.getOriginalFilename());
            scanFile.transferTo(saveFile);
            System.out.println("扫描文件已保存到：" + saveFile.getAbsolutePath());
        }

        // 提交成功后跳转到成功页面（可以再写一个success.html放在templates目录）
        return "success";
    }
}

如果你的便携扫描设备支持自动上传，还可以做这一步：

• 确认设备的输出格式（比如PDF、JPG），对应调整表单的accept属性。
• 如果设备能直接发起POST请求上传文件，可以单独写一个接口，逻辑和上面的文件处理部分类似，只是不需要接收表单文本数据，直接处理上传的文件即可。

让项目可以通过双击或者命令行启动：

• 用Maven或Gradle打包：
  • Maven：在项目根目录执行命令 mvn clean package
  • Gradle：执行命令 ./gradlew clean build
• 打包完成后，在target（Maven）或build/libs（Gradle）目录下会生成一个.jar文件，直接用命令 java -jar 你的项目文件名.jar就能启动服务。

为了更方便用户，让服务启动后自动打开浏览器：

• 在Spring Boot的启动类里加一段代码：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import java.awt.*;
import java.net.URI;

@SpringBootApplication
public class ScanWebServiceApplication {

    public static void main(String[] args) {
        SpringApplication.run(ScanWebServiceApplication.class, args);

        // 启动成功后打开默认浏览器访问表单页面
        try {
            Desktop.getDesktop().browse(new URI("http://localhost:8080"));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

• 注意：这段代码在有桌面环境的系统（Windows/Mac/Linux桌面版）能正常工作，如果是服务器环境（无桌面）会报错，你可以加个环境判断，或者只在开发测试时启用。

内容的提问来源于stack exchange，提问作者Andris Sóskuti