细心的读者已经注意到了,我们在上节的profilePage的页面中,我们是有ADDTASTE的按钮。那么这个按钮的功能要怎么实现呢?这一节,我们主要就是来学习这个。
1.视图功能
这个按钮将会被显示出来,它允许我们去添加新的keyword的多个这样的值。第一个列表的值可以被修改并按钮可以移除。处理列表的数据表单是一件繁琐的事。不过,我们使用SpringMVC和Thymeleaf将会相对简单了。将下面的代码添加到profilePage.html的文件中。
<!--添加Add Taste的功能-->
<fieldset class="row">
<legend th:text="#{tastes.legend}">What do you like?</legend>
<button class="btn teal" type="submit" name="addTaste"
th:text="#{add.taste}">Add taste
<i class="mdi-content-add left"></i>
</button>
<div th:errors="*{tastes}" class="red-text">Error</div>
<div class="row" th:each="row,rowStat : *{tastes}">
<!--rowStat是输入的信息,rowStat.index对应索引的信息-->
<div class="col s6">
<input type="text" required="required" th:field="*{tastes[__${rowStat.index}__]}" th:placeholder="#{taste.placeholder}"/>
</div>
<div class="col s6">
<button class="btn red" type="submit" name="removeTaste"
th:value="${rowStat.index}" th:text="#{remove}">Remove
<i class="mdi-action-delete right waves-effect"></i>
</button>
</div>
</div>
</fieldset>
上面这一小片段的代码的目的昌,当用户已经登录时,我们要通过th:each来遍历显示出所有的tastes的值,这就有点像Java中的for…in方法。
通过上面的代码我们可以看出,查找的结果是放在两个部分,而不是一个地方。第一个就是row所包含的数据,第二个就是rowStat包含的信息;这也是当前所填写的信息。我们会比较陌生的是这样的一处代码:th:field="*{tastes[__${rowStat.index}__]}"。你也可以将这个代码看作这样的形式:th:field="*{tastes[rowStat.index]}"。但是如果这样写的话,那就不能运行了。我们来看${rowStat.index}的值,这个就是当前遍历的值,在我们要展示出来之前,就要明确。
2.按钮事件处理
这里有两个新我按钮在我们的页面中,它们都是提交的按钮。早先的那个按钮我们取名为save,而新增加的两个按钮我们分别取名为addTaste和removeTaste.
在我们的控制层,我们要增加函数,而且要更好地来区别按钮的事件。让我们添加下面的代码到profileController。
package masterSpringMVC.profile;
import masterSpringMVC.date.USLocalDateFormatter;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import javax.servlet.http.HttpServletRequest;
import javax.validation.Valid;
import java.util.Locale;
/**
* Profile后端业务的逻辑处理
* Created by OwenWilliam on 2016/5/15.
*/
@Controller
public class ProfileController {
@RequestMapping("/profile")
public String displayProfile(ProfileForm profileForm)
{
return "profile/profilePage";
}
/**
* 信息提交的处理
* @param profileForm
* @param bindingResult
* @return
*/
@RequestMapping(value="/profile", params = {"save"}, method = RequestMethod.POST)
public String saveProfile(@Valid ProfileForm profileForm, BindingResult bindingResult)
{
//提交信息的错误
if (bindingResult.hasErrors())
{
return "profile/profilePage";
}
System.out.println("save ok" + profileForm);
return "redirect:/profile";
}
/**
* 添加Taste
* @param profileForm
* @return
*/
@RequestMapping(value = "/profile", params = {"addTaste"})
public String addRow(ProfileForm profileForm)
{
profileForm.getTastes().add(null);
return "profile/profilePage";
}
/**
* 删除已经添加的Taste
* @param profileForm
* @param req
* @return
*/
@RequestMapping(value = "/profile" , params = {"removeTaste"})
public String removeRow(ProfileForm profileForm, HttpServletRequest req)
{
Integer rowId = Integer.valueOf(req.getParameter("removeTaste"));
profileForm.getTastes().remove(rowId.intValue());
return "profile/profilePage";
}
/**
* 获取要提示用户输入的日期格式
* @ModelAttribute("dateFormat")就是映射到前端
* @param locale
* @return
*/
@ModelAttribute("dateFormat")
public String localeFormat(Locale locale)
{
return USLocalDateFormatter.getPattern(locale);
}
}
当然为了区分我们是在添加Taste,还是提交 用户的信息,所以还需要我们在视图页面添加JavaScript的代码。
<!--只有提交submit的按键时才会提交,其它的情况是添加Teste 有了bug-->
<script layout:fragment="script">
$('button').bind('click', function(e) {
if (e.currentTarget.name === 'save') {
$(e.currentTarget.form).removeAttr('novalidate');
} else {
<!--添加无作用的标签novalidate-->
$(e.currentTarget.form).attr('novalidate', 'novalidate');
}
});
</script>
3.总结
这一章节,我们实现了原告没有实现 的按钮。这个按钮也是用SpringMVC来添加list列表的信息。最后结果如下:
源码路径:git@github.com:owenwilliam/masterSpringMVC.git