使用 HTML 表单和 Javalin 后端

使用 HTML 表单和 Javalin 后端

原文：https://javalin.io/tutorials/html-forms-example

依赖项

首先，我们需要创建一个具有以下依赖项的项目：（→教程）

<dependencies>
    <dependency>
        <groupId>io.javalin</groupId>
        <artifactId>javalin-bundle</artifactId>
        <version>6.6.0</version>
    </dependency>
</dependencies>

设置后端

使用以下代码创建一个类：

import io.javalin.Javalin;
import io.javalin.http.staticfiles.Location;
import io.javalin.util.FileUtil;
import java.util.HashMap;
import java.util.Map;

public class JavalinHtmlFormsExampleApp {

    private static final Map<String, String> reservations = new HashMap<>() {{
        put("saturday", "No reservation");
        put("sunday", "No reservation");
    }};

    public static void main(String[] args) {

        Javalin app = Javalin.create(config -> {
            config.staticFiles.add("/public", Location.CLASSPATH);
        });

        app.post("/make-reservation", ctx -> {
            reservations.put(ctx.formParam("day"), ctx.formParam("time"));
            ctx.html("Your reservation has been saved");
        });

        app.get("/check-reservation", ctx -> {
            ctx.html(reservations.get(ctx.queryParam("day")));
        });

        app.start();

    }

}

这将创建一个应用程序，它监听端口7070，并在您的文件夹中查找静态文件/src/resources/public。我们映射了两个端点，一个post用于进行预订，另一个get用于检查您的预订。

设置 HTML 表单

现在我们需要创建两个 HTML 表单来与这些端点交互。我们可以将这些表单放在一个文件中/resources/public/index.html，该文件可在http://localhost:7777/.

制作预订表格

<h2>Make reservation:</h2>
<form method="post" action="/make-reservation">
    Choose day
    <select name="day">
        <option value="saturday">Saturday</option>
        <option value="sunday">Sunday</option>
    </select>
    <br>
    Choose time
    <select name="time">
        <option value="8:00 PM">8:00 PM</option>
        <option value="9:00 PM">9:00 PM</option>
    </select>
    <br>
    <button>Submit</button>
</form>

要进行预订，我们需要在服务器上创建一些内容（在本例中是一个简单的map.put()，但通常你会有一个数据库）。在服务器上创建内容时，你应该使用POST方法，该方法可以通过添加到 元素method=”post”中来指定<form>。

在我们的 Java 代码中，我们有一个帖子端点：app.post(“/make-reservation”, ctx -> {…}。我们需要告诉我们的表单使用带有 action 属性的此端点：action=”/make-reservation”。操作是相对的，因此当您单击提交时，浏览器将创建一个以/值作为请求主体的POST请求。http://localhost:7777/make-reservationdaytime

查看预订表格

<h2>Check your reservation:</h2>
<form method="get" action="/check-reservation">
    Choose day
    <select name="day">
        <option value="saturday">Saturday</option>
        <option value="sunday">Sunday</option>
    </select>
    <br>
    <button>Submit</button>
</form>

要检查预订，我们需要告诉服务器我们对哪一天感兴趣。在这种情况下，我们不会创建任何东西，我们的操作也不会以任何方式改变服务器的状态，这使得它成为GET请求的良好候选者。

GET请求没有请求主体，因此当您单击“提交”时，浏览器会创建一个GET请求http://localhost:7777/check-reservation?day=saturday。表单的值将作为查询参数添加到URL中。

HTML 表单 GET 与 POST 总结

• POST如果请求可以改变服务器状态，则应该使用请求。
• POST请求的信息存储在请求体中。为了从请求体中提取信息，你必须使用ctx.formParam(key)Javalin。
• 执行一系列GET请求应该始终返回相同的结果（如果POST其间没有执行其他请求）。
• GET请求没有请求主体，表单信息作为 URL 中的查询参数发送。为了从请求主体中提取信息，您必须使用ctx.queryParam(key)Javalin。

文件上传示例

让我们稍微扩展一下示例以包含文件上传。

端点

app.post("/upload-example", ctx -> {
    ctx.uploadedFiles("files").forEach(file -> {
        FileUtil.streamToFile(file.content(), "upload/" + file.filename());
    });
    ctx.html("Upload successful");
});

ctx.uploadedFiles("files")给出了与名称匹配的文件列表files。然后我们将这些文件保存到一个upload文件夹中。

HTML 表单

<h1>Upload example</h1>
<form method="post" action="/upload-example" enctype="multipart/form-data">
    <input type="file" name="files" multiple>
    <button>Submit</button>
</form>

上传文件时，您需要将其添加enctype="multipart/form-data"到您的<form>。如果您想上传多个文件，请将multiple属性添加到您的<input>。