Developping web app
2018-12-04 本文已影响4人
Q10Viking
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
chapter2l.gif
