前面一章我们已经创建了基本的显示主页的Web应用，实现了简单的控制器。这里我们进一步增加用户选择配料的功能，来看SpringMVC如何处理表单输入。
SpringMVC，特别是它的控制器，能够对用户的输入做出响应，这个响应可以是转到其他的页面，也可以是对请求数据进行处理，还可以是触发数据库操作。
我们在前面的一章已经用一个简单的控制器，实现对根目录"/"请求的响应。现在来用控制器实现更复杂一些的操作，对用户的更多样化的请求做出响应。
一、 展示配料
我们现在需要实现一个页面，能够让用户在页面上对玉米卷的配料进行选择。这样我们需要做下面几个事情。
-
定义一个配料的领域类。（关于领域类的解释放在下面）
-
获取用户选择的配料信息，并能够将信息传递到视图，这需要一个控制器。
-
有一个选择配料信息的视图。
二、构建配料领域类
领域这个概念，是Eric Evans在《领域驱动设计》中提出的概念，这本书也是软件设计领域的经典书籍。领域是体现业务价值，实现业务逻辑的概念范围，是与程序控制逻辑相对应的概念。领域设计的思路，能够将业务规则与程序控制解耦，使得代码结构清晰，业务逻辑易懂，层级间实现解耦。领域驱动设计近来在微服务设计中得到的广泛的应用，值得感兴趣的同学深入研究。
在这个应用中，我们的领域对象就包括配料、顾客、以及顾客下的订单等，这个就是业务逻辑和业务对象。我们现在就针对配料这个对象建立对象类。代码如下。
import lombok.Data;
import lombok.RequiredArgsConstructor;
@Data
@RequiredArgsConstructor
public class Ingredient {
private final String id;
private final String name;
private final Type type;
public static enum Type {
WRAP, PROTEIN, VEGGIES, CHEESE, SAUCE
}
}
把这个类放在src根目录下就行。这里我们使用了Lombok库。这个库能够能够自动补全我们类中变量的get、set方法，使得代码变得简洁明了。使用maven依赖就可以加入这个库。
三、创建控制器类
控制器的作用我们前面已经讲了很多，这里我们要实现对"/"的GET请求，并将配料数据传递给显示配料的视图。代码如下。
import com.example.demo.Ingredient;
import com.example.demo.Ingredient.Type;
import com.example.demo.Taco;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;
@Slf4j
@Controller
@RequestMapping("/design")
public class DesignTacoController {
@GetMapping
public String showDesignForm(Model model){
List<Ingredient> ingredients = Arrays.asList(
new Ingredient("FLTO", "Flour Tortilla", Type.WRAP),
new Ingredient("COTO", "Corn Tortilla", Type.WRAP),
new Ingredient("GRBF", "Ground Beef", Type.PROTEIN),
new Ingredient("CARN", "Carnitas", Type.PROTEIN),
new Ingredient("TMTO", "Diced Tomatoes", Type.VEGGIES),
new Ingredient("LETC", "Lettuce", Type.VEGGIES),
new Ingredient("CHED", "Cheddar", Type.CHEESE),
new Ingredient("JACK", "Monterrey Jack", Type.CHEESE),
new Ingredient("SLSA", "Salsa", Type.SAUCE),
new Ingredient("SRCR", "Sour Cream", Type.SAUCE)
);
Type[] types = Ingredient.Type.values();
for(Type type: types){
model.addAttribute(type.toString().toLowerCase(),
filterByType(ingredients,type));
}
model.addAttribute("design", new Taco());
return "design";
}
private List<Ingredient> filterByType(List<Ingredient> ingregients, Type type){
return ingregients
.stream()
.filter(x ->x.getType().equals(type))
.collect(Collectors.toList());
}
}
@Slf4j是由Lombok提供的注解，它会在程序运行时，在这个类中自动生成一个SLF4J Logger，不用你再去手工声明一个日志类了，例如：
private static final org.slf4j.Logger log = org.slf4j.LoggerFactory.getLogger(LogExample.class);
以上声明将由注解自动完成，你只要在需要日志的地方直接用就行了。
SLF4J是这么一个日志框架。它的全称是 Simple Logging Facade for Java，它提供了一个针对大多数日志框架的通用调用方法，例如对java.util.logging, logback, log4j 等，你可以用它来随时切换日志框架。
接下来我们使用了@Controller注解。它声明了下面这个类是控制器。而且由于我们使用了Springboot，由于它的自动扫描和装配功能，这个类在应用启动的时候，会自动实例化，自动创建一个DesignTacoController实例。
@RequestMapping("/design")注解则声明这个控制器会处理路径以"/design"开头的请求。
@GetMapping注解则在方法级别对上面的注解进行了细化，指明当接收到对"/design"的HPPT GET请求时，将会调用showDesignForm( ) 方法来处理。
具体的showDesignForm( ) 方法则会处理请求。它创建了一个Ingredient对象的列表。filterByType( )方法则会根据配料类型过滤列表，这里使用了Java的流特性。
流是Java 8的增加的特性，它可以极大提高Java程序员的生产力，让程序员写出高效率、干净、简洁的代码。它对Java的集合能够采用一个类似SQL语言功能，来对集合=进行排序、过滤、聚合等操作。
过滤好的配料类型的列表会作为属性添加到Model对象上。Model对象负责在控制器和展现数据的视图之间传递数据，它实际上是会被复制到Servlet 的Response属性上，这样视图就能在其中找到传递的数据了。
最后，showDesignForm( ) 方法返回“design”，这是视图的逻辑命名，用来找到对应的视图。
我们目前还没有设计能够响应“design”的这个视图，现在开始吧。
三、设计视图
视图部分仍然采用Thymeleaf模板。具体代码如下：
<!-- tag::head[] -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Taco Cloud</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>Design your taco!</h1>
<img th:src="@{/images/TacoCloud.png}"/>
<!-- tag::formTag[] -->
<form method="POST" th:object="${design}">
<!-- end::all[] -->
<span class="validationError"
th:if="${#fields.hasErrors('ingredients')}"
th:errors="*{ingredients}">Ingredient Error</span>
<!-- tag::all[] -->
<div class="grid">
<!-- end::formTag[] -->
<!-- end::head[] -->
<div class="ingredient-group" id="wraps">
<!-- tag::designateWrap[] -->
<h3>Designate your wrap:</h3>
<div th:each="ingredient : ${wrap}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
<!-- end::designateWrap[] -->
</div>
<div class="ingredient-group" id="proteins">
<h3>Pick your protein:</h3>
<div th:each="ingredient : ${protein}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="cheeses">
<h3>Choose your cheese:</h3>
<div th:each="ingredient : ${cheese}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="veggies">
<h3>Determine your veggies:</h3>
<div th:each="ingredient : ${veggies}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="sauces">
<h3>Select your sauce:</h3>
<div th:each="ingredient : ${sauce}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
</div>
<div>
<h3>Name your taco creation:</h3>
<input type="text" th:field="*{name}"/>
<!-- end::all[] -->
<span th:text="${#fields.hasErrors('name')}">XXX</span>
<span class="validationError"
th:if="${#fields.hasErrors('name')}"
th:errors="*{name}">Name Error</span>
<!-- tag::all[] -->
<br/>
<button>Submit your taco</button>
</div>
<!-- tag::closeFormTag[] -->
</form>
<!-- end::closeFormTag[] -->
</body>
</html>
<!-- end::all[] -->
我们继续使用Thymeleaf视图模板。Thymeleaf是无法直接接受SpringMVC框架的Model中的数据的，但是可以接收到Servlet的request属性。因此SpringMVC会把模型数据复制到request属性中，Thymeleaf就能访问到数据了。
Thymeleaf模板采用占位符的形式来告诉框架应该采用哪个变量的值。例如
<span th:text="${ingredient.name}">INGREDIENT</span></pre>
当模板被渲染成HTML时，${ingredient.name}里面的内容会被Servlet Request中key为“name”的属性值替换。
四、运行程序
下面我们来运行程序，可以看到下面的运行结果。
配料选择页1.png
配料选择页2.png
我们可以看到，配料页中，显示了可以选择的配料，另外还有一个提交按钮。目前，这个提交按钮还没有编码，我们接下来实现。
五、处理表单提交
在页面中的代码是这样的：
<form method="POST" th:object="${design}">
它表示视图的method属性为“POST”。这样，表单在提交的时候，浏览器会搜集表单中的所有数据，并以HTTP POST请求的形式将其发送到服务器，发送路径为与视图路径一致的“design”。
这样，我们就需要一个能够处理“/design”的POST请求的方法，而目前，我们只有一个“GET”的控制器，需要继续修改“DesignTacoController”控制器类，在其中增加下面的方法。
@PostMapping
public String processDesign(Taco design){
log.info("Processing design: " + design);
return "redirect:/orders/current";
}
这里，当用户在前台页面选择了配料，并输入了名称后，输入的信息将会绑定到Taco对象中，将这个对象以参数的形式传递给“ processDesign”方法，在这个方法里面，我们输出了design这个方法的具体数值，这就是SpringMvc的功能。
输出配料日志.png
在前台页面中，用户使用多选框选择的多项配料，都被绑定到Ingredients列表类中，这是因为我们把每个复选框都命名成了"ingredients",这样在提交表单的时候，就能够将用户选择的所有配料，都归入Ingredients列表，这样就与Taco类的属性有了对应关系。
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
我们的Taco类如下：
@Data
public class Taco {
private String name;
private List<String> ingredients;
}
包含了name和ingredients列表两个属性，能够与页面的选择项对应起来。
六、总结
这一章我们构建了一个配料类，设计了视图，让用户能够在页面上对配料进行选择。后台的控制器能够接收到用户的选择数据，然后根据用户的选择，跳转到订单页面。
目前这个订单页面和它的控制器我们还没开发实现，将在下一章做这个事情。
网友评论