一步步学习 《Spring 实战 第5版》--（6） 创建配料页面

前面一章我们已经创建了基本的显示主页的Web应用，实现了简单的控制器。这里我们进一步增加用户选择配料的功能，来看SpringMVC如何处理表单输入。

SpringMVC，特别是它的控制器，能够对用户的输入做出响应，这个响应可以是转到其他的页面，也可以是对请求数据进行处理，还可以是触发数据库操作。

我们在前面的一章已经用一个简单的控制器，实现对根目录"/"请求的响应。现在来用控制器实现更复杂一些的操作，对用户的更多样化的请求做出响应。

一、 展示配料

我们现在需要实现一个页面，能够让用户在页面上对玉米卷的配料进行选择。这样我们需要做下面几个事情。

  1. 定义一个配料的领域类。（关于领域类的解释放在下面）

  2. 获取用户选择的配料信息，并能够将信息传递到视图，这需要一个控制器。

  3. 有一个选择配料信息的视图。

二、构建配料领域类

领域这个概念，是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列表两个属性，能够与页面的选择项对应起来。

六、总结

这一章我们构建了一个配料类，设计了视图，让用户能够在页面上对配料进行选择。后台的控制器能够接收到用户的选择数据，然后根据用户的选择，跳转到订单页面。

目前这个订单页面和它的控制器我们还没开发实现，将在下一章做这个事情。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,542评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,596评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,021评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,682评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,792评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,985评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,107评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,845评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,299评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,441评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,072评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2赞 350