Spring 注解学习手札（三） 表单页面处理

昨天小歇一天，看着两篇博客迅速飙升的点击率，十分欣慰。今天来研究一下表单页面的处理问题。


如果要说表单，最简单的就是用户登录页面了！估计大多数做B/S出身的兄弟可能写的第一个表单就是登录表单了！ 今天，我也不例外，做一个登录验证实现！

首先，改造一下账户类Account，增加一个id字段：

Account.java

Java代码

1. /** 
2.  * 2010-1-23 
3.  */  
4. package org.zlex.spring.domain;  
5.   
6. import java.io.Serializable;  
7.   
8. /** 
9.  * 账户 
10.  *  
11.  * @author <a href="mailto:[e-mail]">梁栋</a> 
12.  * @version 1.0 
13.  * @since 1.0 
14.  */  
15. public class Account implements Serializable {  
16.   
17.     /** 
18.      *  
19.      */  
20.     private static final long serialVersionUID = -533698031946372178L;  
21.   
22.     /** 
23.      * 主键 
24.      */  
25.     private int id;  
26.     /** 
27.      * 用户名 
28.      */  
29.     private String username;  
30.     /** 
31.      * 密码 
32.      */  
33.     private String password;  
34.   
35.       
36.   
37.     public Account() {  
38.     }  
39.   
40.     /** 
41.      * @param id 
42.      */  
43.     public Account(int id) {  
44.         this.id = id;  
45.     }  
46.   
47.      // get、set方法省略  
48.   
49. }  

接下来，为了协调逻辑处理，我们改造接口AccountService及其实现类AccountServiceImpl：

AccountService.java

Java代码

1. /** 
2.  * 2010-1-23 
3.  */  
4. package org.zlex.spring.service;  
5.   
6. import org.springframework.transaction.annotation.Transactional;  
7. import org.zlex.spring.domain.Account;  
8.   
9. /** 
10.  * 账户业务接口 
11.  *  
12.  * @author <a href="mailto:[e-mail]">梁栋</a> 
13.  * @version 1.0 
14.  * @since 1.0 
15.  */  
16. @Transactional  
17. public interface AccountService {  
18.   
19.     /** 
20.      * 获得账户 
21.      *  
22.      * @param username 
23.      * @param password 
24.      * @return 
25.      */  
26.     Account read(String username, String password);  
27.   
28.     /** 
29.      * 获得账户 
30.      *  
31.      * @param id 
32.      * @return 
33.      */  
34.     Account read(int id);  
35. }  

我们暂时抛开AccountDao该做的事情，在AccountServiceImpl中完成数据提取：

AccountServiceImpl.java

Java代码

1. /** 
2.  * 2010-1-23 
3.  */  
4. package org.zlex.spring.service.impl;  
5.   
6. import org.springframework.beans.factory.annotation.Autowired;  
7. import org.springframework.stereotype.Service;  
8. import org.zlex.spring.dao.AccountDao;  
9. import org.zlex.spring.domain.Account;  
10. import org.zlex.spring.service.AccountService;  
11.   
12. /** 
13.  * 账户业务 
14.  *  
15.  * @author <a href="mailto:[e-mail]">梁栋</a> 
16.  * @version 1.0 
17.  * @since 1.0 
18.  */  
19. @Service  
20. public class AccountServiceImpl implements AccountService {  
21.   
22.     @Autowired  
23.     private AccountDao accountDao;  
24.   
25.     @Override  
26.     public Account read(String username, String password) {  
27.         Account account = null;  
28.         if (username.equals("snowolf") && password.equals("zlex")) {  
29.             account = new Account();  
30.             account.setId(1);  
31.             account.setUsername(username);  
32.             account.setPassword(password);  
33.         }  
34.         return account;  
35.     }  
36.   
37.     @Override  
38.     public Account read(int id) {  
39.         Account account = new Account();  
40.         account.setId(1);  
41.         account.setUsername("snowolf");  
42.         account.setPassword("zlex");  
43.         return account;  
44.     }  
45. }  

先来一个账户信息的展示，构建一个控制器ProfileController：

ProfileController.java

Java代码

1. /** 
2.  * 2010-1-26 
3.  */  
4. package org.zlex.spring.controller;  
5.   
6. import org.springframework.beans.factory.annotation.Autowired;  
7. import org.springframework.stereotype.Controller;  
8. import org.springframework.ui.ModelMap;  
9. import org.springframework.web.bind.annotation.RequestMapping;  
10. import org.springframework.web.bind.annotation.RequestMethod;  
11. import org.springframework.web.bind.annotation.RequestParam;   
12. import org.zlex.spring.domain.Account;  
13. import org.zlex.spring.service.AccountService;  
14.   
15. /** 
16.  * 账户信息控制器 
17.  *  
18.  * @author <a href="mailto:[e-mail]">梁栋</a> 
19.  * @version 1.0 
20.  * @since 1.0 
21.  */  
22. @Controller  
23. @RequestMapping(value = "/profile.do")  
24. public class ProfileController {  
25.     @Autowired  
26.     private AccountService accountService;  
27.   
28.     /** 
29.      * 账户信息展示 
30.      *  
31.      * @param id 
32.      * @param model 
33.      * @return 
34.      */  
35.     @RequestMapping(method = RequestMethod.GET)  
36.     public String profile(@RequestParam("id") int id, ModelMap model) {  
37.         Account account = accountService.read(id);  
38.         model.addAttribute("account", account);  
39.   
40.         // 跳转到用户信息页面  
41.         return "account/profile";  
42.     }  
43. }  

@RequestMapping(value = "/profile.do")为该控制器绑定url（/profile.do）

@RequestMapping(method = RequestMethod.GET)指定为GET请求

model.addAttribute("account", account);绑定账户

return "account/profile";跳转到“/WEB-INF/page/account/porfile.jsp”页面

对应构建这个页面：

porfile.jsp

Jsp代码

1. <fieldset><legend>用户信息</legend>  
2. <ul>  
3.     <li><label>用户名:</label><c:out value="${account.username}" /></li>  
4. </ul>  
5. </fieldset>  

账户信息已经绑定在response的属性上。自然，使用<c:out />标签就可以获得账户信息内容。

访问地址http://localhost:8080/spring/profile.do?id=1，结果如图所示：



接着构建一个登录控制器LoginController

LoginController.java

Java代码

1. /** 
2.  * 2010-1-25 
3.  */  
4. package org.zlex.spring.controller;  
5.   
6. import org.springframework.beans.factory.annotation.Autowired;  
7. import org.springframework.stereotype.Controller;  
8. import org.springframework.ui.ModelMap;  
9. import org.springframework.web.bind.annotation.ModelAttribute;  
10. import org.springframework.web.bind.annotation.RequestMapping;  
11. import org.springframework.web.bind.annotation.RequestMethod;  
12. import org.zlex.spring.domain.Account;  
13. import org.zlex.spring.service.AccountService;  
14.   
15. /** 
16.  * 登录控制器 
17.  *  
18.  * @author <a href="mailto:[e-mail]">梁栋</a> 
19.  * @version 1.0 
20.  * @since 1.0 
21.  */  
22. @Controller  
23. @RequestMapping(value = "/login.do")  
24. public class LoginController {  
25.   
26.     @Autowired  
27.     private AccountService accountService;  
28.   
29.     /** 
30.      * 初始化表单 
31.      *  
32.      * @param model 
33.      * @return 
34.      */  
35.     @RequestMapping(method = RequestMethod.GET)  
36.     public String initForm(ModelMap model) {  
37.         Account account = new Account();  
38.         model.addAttribute("account", account);  
39.         // 直接跳转到登录页面  
40.         return "account/login";  
41.     }  
42.   
43.     /** 
44.      * 登录 
45.      *  
46.      * @param account 
47.      * @return 
48.      */  
49.     @RequestMapping(method = RequestMethod.POST)  
50.     public String login(@ModelAttribute("account") Account account) {  
51.         Account acc = accountService.read(account.getUsername(), account  
52.                 .getPassword());  
53.         if (acc != null) {  
54.             return "redirect:profile.do?id=" + acc.getId();  
55.         } else {  
56.             return "redirect:login.do";  
57.         }  
58.     }  
59. }  

分段详述，先说初始化表单：

Java代码

1. /** 
2.  * 初始化表单 
3.  *  
4.  * @param model 
5.  * @return 
6.  */  
7. @RequestMapping(method = RequestMethod.GET)  
8. public String initForm(ModelMap model) {  
9.     Account account = new Account();  
10.     model.addAttribute("account", account);  
11.     // 直接跳转到登录页面  
12.     return "account/login";  
13. }  

@RequestMapping(method = RequestMethod.GET)指定了GET请求方式，这与POST表单提交相对应！

model.addAttribute("account", account);绑定账户对象，也就是这个登录表单对象

return "account/login";指向登录页面

再看登录方法：

Java代码

1. /** 
2.  * 登录 
3.  *  
4.  * @param account 
5.  * @return 
6.  */  
7. @RequestMapping(method = RequestMethod.POST)  
8. public String login(@ModelAttribute("account") Account account) {  
9.     Account acc = accountService.read(account.getUsername(), account  
10.             .getPassword());  
11.     if (acc != null) {  
12.         return "redirect:profile.do?id=" + acc.getId();  
13.     } else {  
14.         return "redirect:login.do";  
15.     }  
16. }  

@RequestMapping(method = RequestMethod.POST)绑定POST表单提交请求

@ModelAttribute("account") Account account绑定表单对象。

最后，再来看看页面：

login.jsp

Jsp代码

1. <fieldset><legend>登录</legend><form:form commandName="account">  
2.     <form:hidden path="id" />  
3.     <ul>  
4.         <li><form:label path="username">用户名:</form:label><form:input  
5.             path="username" /></li>  
6.         <li><form:label path="password">密码:</form:label><form:password  
7.             path="password" /></li>  
8.         <li>  
9.         <button type="submit">登录</button>  
10.         <button type="reset">重置</button>  
11.         </li>  
12.     </ul>  
13. </form:form></fieldset>  

注意，<form:form commandName="account">必须指明commandName，且与表单初始化、提交方法中的表单对象名称保持一致！

页面目录结构如下图所示：



在页面中，我加入了一部分css效果，这部分代码我就不在这里唠叨了！

登录试试，如图：



用户名：snwolf 密码：zlex

如果登录成功，我们就会跳转到之前的账户信息页面！

注解的确减少了代码的开发量，当然，这对于我们理解程序是一种挑战！如果你不知道原有的SpringMVC的流程，很难一开始就能摆弄清楚这些内容！