首页 > 编程语言 >配置 Web 应用程序表单

配置 Web 应用程序表单

时间:2022-12-22 10:01:53浏览次数:42  
标签:Web form PersonForm 应用程序 表单 import public

配置 Web 应用程序表单_应用程序

本指南将引导您完成配置 Web 应用程序表单以支持验证的过程。

您将构建什么

您将构建一个简单的Spring MVC应用程序,该应用程序接受用户输入并使用标准验证注释检查输入。您还将了解如何在屏幕上显示错误消息,以便用户可以重新输入输入以使其有效。

你需要什么

  • 约15分钟
  • 最喜欢的文本编辑器或 IDE
  • JDK 1.8或以后
  • 格拉德尔 4+​或梅文 3.2+
  • 您也可以将代码直接导入到 IDE 中:
  • 弹簧工具套件 (STS)
  • 智能理念
  • VSCode

如何完成本指南

像大多数春天一样入门指南,您可以从头开始并完成每个步骤,也可以绕过您已经熟悉的基本设置步骤。无论哪种方式,您最终都会得到工作代码。

要从头开始,请继续从 Spring 初始化开始.

要跳过基础知识,请执行以下操作:

  • 下载​并解压缩本指南的源存储库,或使用吉特:git clone https://github.com/spring-guides/gs-validating-form-input.git
  • 光盘成gs-validating-form-input/initial
  • 跳转到创建对象PersonForm.

完成后,您可以根据 中的代码检查结果。​​gs-validating-form-input/complete​

从 Spring 初始化开始

你可以使用这个预初始化项目,然后单击生成以下载 ZIP 文件。此项目配置为适合本教程中的示例。

手动初始化项目:

  1. 导航到https://start.spring.io.此服务拉入应用程序所需的所有依赖项,并为您完成大部分设置。
  2. 选择 Gradle 或 Maven 以及您要使用的语言。本指南假定您选择了 Java。
  3. 单击“依赖项”,然后选择“Spring Web”、“Thymeleaf”和“验证”。
  4. 单击生成
  5. 下载生成的 ZIP 文件,该文件是配置了您选择的 Web 应用程序的存档。

如果您的 IDE 集成了 Spring Initializr,则可以从 IDE 完成此过程。

您也可以从 Github 分叉项目,然后在 IDE 或其他编辑器中打开它。

创建对象​​PersonForm​

该应用程序涉及验证用户的姓名和年龄,因此您首先需要创建一个支持用于创建人员的表单的类。以下清单(来自 )显示了如何执行此操作:​​src/main/java/com/example/validatingforminput/PersonForm.java​

package com.example.validatingforminput;

import jakarta.validation.constraints.Min;
import jakarta.validation.constraints.NotNull;
import jakarta.validation.constraints.Size;

public class PersonForm {

@NotNull
@Size(min=2, max=30)
private String name;

@NotNull
@Min(18)
private Integer age;

public String getName() {
return this.name;
}

public void setName(String name) {
this.name = name;
}

public Integer getAge() {
return age;
}

public void setAge(Integer age) {
this.age = age;
}

public String toString() {
return "Person(Name: " + this.name + ", Age: " + this.age + ")";
}
}

该类有两个属性:和 。它使用一些标准验证注释进行标记:​​PersonForm​​​​name​​​​age​

  • ​@Size(min=2, max=30)​​:允许名称长度在 2 到 30 个字符之间。
  • ​@NotNull​​:不允许空值,这是Spring MVC在条目为空时生成的。
  • ​@Min(18)​​:不允许年龄小于18岁。

除此之外,您还可以看到 getter 和 setter 以及一种方便的方法。​​name​​​​age​​​​toString()​

创建 Web 控制器

现在您已经定义了表单支持对象,是时候创建一个简单的 Web 控制器了。以下清单(来自 )显示了如何执行此操作:​​src/main/java/com/example/validatingforminput/WebController.java​

package com.example.validatingforminput;

import jakarta.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Controller
public class WebController implements WebMvcConfigurer {

@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/results").setViewName("results");
}

@GetMapping("/")
public String showForm(PersonForm personForm) {
return "form";
}

@PostMapping("/")
public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {

if (bindingResult.hasErrors()) {
return "form";
}

return "redirect:/results";
}
}

此控制器具有 GET 方法和 POST 方法。这两种方法都映射到 。​​/​

该方法返回模板。它在其方法签名中包含 ,以便模板可以将表单属性与 .​​showForm​​​​form​​​​PersonForm​​​​PersonForm​

该方法接受两个参数:​​checkPersonInfo​

  • 标记为 的对象,用于收集表单中填写的属性。personForm@Valid
  • 一个对象,以便您可以测试和检索验证错误。bindingResult

您可以从绑定到对象的表单中检索所有属性。在代码中,测试错误。如果遇到错误,可以将用户发送回原始模板。在这种情况下,将显示所有错误属性。​​PersonForm​​​​form​

如果此人的所有属性都有效,则会将浏览器重定向到最终模板。​​results​

构建 HTML 前端

现在构建“主”页面,如以下列表(来自)所示:​​src/main/resources/templates/form.html​

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<form action="#" th:action="@{/}" th:object="${personForm}" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" th:field="*{name}" /></td>
<td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" th:field="*{age}" /></td>
<td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>
</tr>
<tr>
<td><button type="submit">Submit</button></td>
</tr>
</table>
</form>
</body>
</html>

该页面包含一个简单的表单,其每个字段都位于表格的单独单元格中。该表单适合发布到 。它被标记为由您在 Web 控制器的方法中看到的对象备份。这被称为“豆背形式”。Bean 中有两个字段,您可以看到它们被标记为 和 .每个字段旁边都有一个辅助元素,用于显示任何验证错误。​​/​​​​personForm​​​​GET​​​​PersonForm​​​​th:field="*{name}"​​​​th:field="*{age}"​

最后,您有一个提交表单的按钮。通常,如果用户输入的名称或年龄违反约束,它将反弹回此页面并显示错误消息。如果输入了有效的名称和年龄,则会将用户路由到下一个网页。​​@Valid​

以下示例(来自 )显示了结果页:​​src/main/resources/templates/results.html​

<html>
<body>
Congratulations! You are old enough to sign up for this site.
</body>
</html>

在这个简单的示例中,这些网页没有任何复杂的CSS或JavaScript。

运行应用程序

对于此应用程序,您使用的模板语言为百里香叶.此应用程序需要的不仅仅是原始 HTML。Spring 初始化器为您创建了一个应用程序类。以下清单(来自)显示了该类:​​src/main/java/com/example/validatingforminput/ValidatingFormInputApplication.java​

package com.example.validatingforminput;

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

@SpringBootApplication
public class ValidatingFormInputApplication {

public static void main(String[] args) throws Exception {
SpringApplication.run(ValidatingFormInputApplication.class, args);
}

}

要激活Spring MVC,您通常会添加到类中。但是 Spring Boot 在检测到您的类路径时已经添加了此注释。同样的注解允许它找到带批注的类及其方法。​​@EnableWebMvc​​​​Application​​​​@SpringBootApplication​​​​spring-webmvc​​​​@Controller​

百里香叶配置也由 负责。默认情况下,模板位于 下的类路径中,并通过去除文件名中的“.html”后缀来解析为视图。(Thymeleaf 设置可以通过多种方式更改和覆盖,具体取决于您需要实现的目标,但详细信息与本指南无关。​​@SpringBootApplication​​​​templates/​

构建可执行的 JAR

您可以使用 Gradle 或 Maven 从命令行运行应用程序。您还可以构建一个包含所有必需依赖项、类和资源的可执行 JAR 文件并运行该文件。通过构建可执行 jar,可以轻松地在整个开发生命周期中跨不同环境等将服务作为应用程序进行交付、版本控制和部署。

如果使用 Gradle,则可以使用 .或者,您可以使用 JAR 文件生成 JAR 文件,然后运行该文件,如下所示:​​./gradlew bootRun​​​​./gradlew build​

java -jar build/libs/gs-validating-form-input-0.1.0.jar

如果使用 Maven,则可以使用 运行应用程序。或者,您可以使用 JAR 文件生成 JAR 文件,然后运行该文件,如下所示:​​./mvnw spring-boot:run​​​​./mvnw clean package​

java -jar target/gs-validating-form-input-0.1.0.jar

此处描述的步骤将创建一个可运行的 JAR。你也可以构建经典 WAR 文件.

应用程序应在几秒钟内启动并运行。

如果您访问 ,您应该看到类似于下图的内容:​​http://localhost:8080/​

应用程序应在几秒钟内启动并运行。

如果您访问 ,您应该看到类似于下图的内容:​​http://localhost:8080/​

配置 Web 应用程序表单_spring_02

以下一对图像显示了如果您输入姓名和年龄并单击“提交”会发生什么情况:​​N​​​​15​

前面的图像显示,由于值违反了类中的约束,因此会退回到“主页”。请注意,如果单击“提交”,但输入框中没有任何内容,则会收到不同的错误,如下图所示:​​PersonForm​

如果输入有效的姓名和年龄,则最终会出现在页面上,如下图所示:​​results​

总结

祝贺!您已经编写了一个简单的 Web 应用程序,其中验证内置于域对象中。这样,您可以确保数据满足特定条件,并且用户正确输入数据。

标签:Web,form,PersonForm,应用程序,表单,import,public
From: https://blog.51cto.com/u_15326439/5962367

相关文章

  • 使用 Spring Boot Actuator 构建 RESTful Web 服务
    弹簧启动执行器是SpringBoot的一个子项目。它为您的应用程序添加了多个生产级服务,而您几乎不费吹灰之力。在本指南中,您将构建一个应用程序,然后了解如何添加这些服务。您将......
  • WebRTC 的音频弱网对抗之 NACK
    基础知识音频的NACK机制在WebRTC中默认是关闭的.rtcpfeedbacknack开启就可以了WebRTC的音频数据传输中,尽管对低延时有着很高的要求,但也实现了NACK,以用于一些音......
  • .net core web api 路由约束
    路由约束在传入URL发生匹配时执行,URL路径标记为路由值。路径约束通常检查通过路径模板关联的路径值,并对该值是否为可接受做出对/错决定。某些路由约束使用路由值以外......
  • forms组件渲染标签 form表单展示信息 forms组件校验方式 form组件源码 modelform组件
    目录forms组件渲染标签方式一:全自动渲染表单as_pas_ulas_table表单类的label标签方式二:手动渲染方式三:for循环表单对象(推荐)查看源码渲染标签的注意事项form表单展示信息表......
  • vue中webpack环境中动态注册插件
    //webpack动态引入文件constrequireComonents=require.context("./",true,/\.vue$/);//Vue提供的install方法进行插件的注册/**install方法第一个参数是vue......
  • WebFlux 详解
    今天我们开始来学习下​​WebFlux​​,为什么突然要学这个东西?因为我之前是想学习​​SpringCloudGateway​​​来着,然后发现它是基于​​Spring5.0+SpringBoot2.0+Web......
  • jquery Ajax serialize()表单序列化方式上传文件
    通过Ajaxserialize()表单进行序列化方式上传文件,使用FormData进行Ajax请求通过传统的form表单提交的方式上传文件:<formid="uploadForm"action=/cfJAX_RS/rest/file/upl......
  • Web服务器基础 -- Nginx rewrite 案例实战(错误页面重定向、虚拟目录别名重定向、域名
    Nginxrewrite案例实战(错误页面重定向、虚拟目录别名重定向、域名跳转)​​一、Nginx中的正则​​​​二、Nginxrewrite案例实战​​​​1、错误页面重定向​​​​2、虚......
  • Javaweb 登陆与验证码
    本次记录分角色登陆以及验证码的Servlet。1.登陆验证<html><%--CreatedbyIntelliJIDEA.User:jiachenglinDate:2022/11/11Time:14:31Tochangethis......
  • CTFSHOW_菜狗杯_WEB
    web签到<?php/*#-*-coding:utf-8-*-#@Author:h1xa#@Date:2022-11-1017:20:38#@LastModifiedby:h1xa#@LastModifiedtime:2022-11-1109:38:59......