Developping web app

Controller： Their primary job is to handle HTTP requests and either hand a request off to a view to render HTML(browser-displayed) or write data directly to the body of a response (RESTful).

CSS样式

float

浮动

padding-left

浮动之间的距离

border

边框

nth-childer(odd,even)

条目的单数，双数

/*开启浮动*/
div.ingredient-group:nth-child(odd){
    float: left;
    padding-right: 20px;
    border: 1px solid mistyrose;
}

div.ingredient-group:nth-child(even){
    float: left;
    padding-right: 0px;
    border: 1px solid green;
}

::after

表示对.grid的标签之后的标签

display

表示以table的列表形式展示

clear

取消浮动

/*表单选项之后将浮动清楚*/
.grid::after{
    content: "";
    display: table;
    clear: both;  /*Do not allow floating elements on the left or the right side of a specified element:*/

}

width

设置大小，50%可以理解为在同一行，可以浮动的块，两个

box-sizing

表示box的大小是以什么标准计算的

/*设置列表的布局*/
div.ingredient-group{
    width: 50%;  /*大小*/
}

*,*:after,*:before{
    -webkit-box-sizing: border-box;/*Webkit(Chrome/Safari)*/
    -moz-box-sizing: border-box; /*Gecko(Firefox)-moz-box-sizing */
    box-sizing: border-box;  /*https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing*/
}

Thymeleaf

常用标签

th:if

如果条件成立，则这个标签展示
<span class="validationError"
    th:if="${#fields.hasErrors('name')}"
    th:errors="*{name}">Name Error</span>

th:action

提交到这个链接
<form method="POST" th:action="@{/orders}" th:object="${order}">

th:object

这个order是model的属性值，代表一个对象，用于field，数据绑定
<form method="POST" th:action="@{/orders}" th:object="${order}">

th:text

显示文本信息，这里的${ingredient.name} 表示变量ingredient的name属性
<div th:each="ingredient : ${sauce}">
    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" th:field="*{ingredients}"/>
    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>

显示文本信息，这里的*{name},这个name是th:object{对象}的属性域
<span th:text="*{name}">NAME</span>

th:each

循环遍历容器的内容
<div th:each="ingredient: ${protein}" >
    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" th:field="*{ingredients}"/>
    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>

th:source

引入css文件
 <link rel="stylesheet" th:href="@{/styles.css}" />

th:value

与html标签的value一样，
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" th:field="*{ingredients}"/>

th:field

与对象的数据绑定相关，内容是其属性，如： ingredients在Order中是一个List对象
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" 
    th:field="*{ingredients}"/>

fields

表示是否有name这个校验的错误，name为对象的属性
<span class="validationError"
th:if="${#fields.hasErrors('name')}"
th:errors="*{name}">Name Error</span>

数据绑定

Java代码在model中添加对象

model.addAttribute("order",new Order());

在表单中拿出这个对象

<form method="POST" th:action="@{/orders}" th:object="${order}">

用field对其属性赋值

从输入框对其赋值
<input type="text" th:field="*{name}" />
单选框，将value值添加到ingredients(实际上在对象中是个列表List)这个属性中
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" th:field="*{ingredients}"/>

在Java代码中声明要接收的这个对象

//@ModelAttribute("design") 将绑定的design
<form method="POST" th:object="${design}">
赋值给参数(Taco design)不是（Design design）所以要声明

public String processDesign(@Valid @ModelAttribute("design")Taco design, Errors errors,Model model)

//Order order这种形式一样的，可以不用声明@ModelAttribute

<form method="POST" th:action="@{/orders}" th:object="${order}">
public String processOrder(@Valid Order order, Errors errors,Model model)

回显

用户填写的数据回显

当校验发生错误，后继续返回到填写页面，其中用户填写的数据仍然在表单中

Model--->View: 将属性值key-value加入到Model中
View--->Model: View层通过从Model中取值，渲染数据；用户在页面填充数据，当提交时会自动添加到Model中

Java代码发送Model--到--View层(填充数据)---到--Java代码，其中Model已经改变，其中的值从Model中取出渲染显示，然后将数据绑定到Model中（此Model非之前的Model）

检验提示显示

通过绑定的数据的对象fields值来测试是否显示该标签---（thymelead）

 <span class="validationError"
            th:if="${#fields.hasErrors('name')}"
            th:errors="*{name}">Name Error</span>

SpringMVC

常用注解

@Controller

表示为将被Spring扫描

@RequestMapping

@RequestMapping("/design")
public class DesignTacoController {

@GetMapping

@GetMapping  //@RequestMapping(method=RequestMethod.GET)
public String showDesignForm(Model model)

@ModelAttribute

指定Model中的值给声明的对象

public String processDesign(@Valid @ModelAttribute("design")Taco design, Errors errors,Model model)

@Configuration

配置那些只请求连接不处理数据，WebMvcConfigurer接口

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("home");
    }
}

控制器方法返回值

View的逻辑名称

 return "designForm";  //定位到designForm.html

重定向

return "redirect:/orders/current";

测试

@RunWith

@WebMvcTest

@RunWith(SpringRunner.class)  //内部封装了junit
@WebMvcTest(WebConfig.class) //测试的控制器
public class HomePageControllerTest {
    @Autowired
    private MockMvc mockMvc;
    @Test
    public void testHomePage() throws Exception {
        mockMvc.perform(get("/"))
                .andExpect(status().isOk())
                .andExpect(view().name("home"))
                .andExpect(content().string(
                        containsString("Hello Q10Viking,welcome to ...")
                ));
    }
}

检验

**javaxavax.validation.constraints.* **
java自带的校验

@Valid

当用户的数据传递过来准备处理之前，需要进行校验，当有错误发生会将信息存储到Errors对象

@PostMapping
public String processOrder(@Valid Order order, Errors errors,Model model)

@NotBlank

@NotBlank(message="Name is required")
private String name;

@Pattern

@Pattern(regexp = "^(0[1-9]|1[0-2])([\\/])([1-9][0-9])$",
            message = "Must be formatted MM/YY")
private String ccExpiration;

@Digits

@Digits(integer = 3,fraction = 0,message = "Invalid CVV")

@NotNull

@NotNull
@Size(min=5,message="Name must be at least 5 charaters long")
private String name;

@NotEmpty

如： List不能为空

@Size

也可以用户容器里面的元素数量

@Size(min=1,message = "至少选择1个")
// @NotEmpty(message="You must choose at least 1 ingredient")
private List<String> ingredients;

org.hibernate.validator.constraints
使用hibernate的校验

@CreditCardNumber

@CreditCardNumber(message="Not a valid credit card number")
private String ccNumber;

lombok

@Slf4j

日志声明

private static final org.slf4j.Logger log =
 org.slf4j.LoggerFactory.getLogger(DesignTacoController.class);

References

Tutorial: Thymeleaf+Spring文档

chapter2l.gif