首页 > > 程序设计 > Java技术 >

SpringMVC用例篇之用户登录系统详细开发流程

2018-06-18 03:20:04来源：未知阅读 ()

一.用户登录系统环境配置：

1.1:开发环境：

Windows7(x86_64);Eclipse Java EE IDE for Web Developers.Version: Oxygen.1a Release (4.7.1a); java version "1.8.0_73"

1.2:开发框架：

spring-framework-5.0.3.RELEASE DButils

1.3：所需jar包截图：

二.数据库的设计：

三.开发流程：

1.1.配置web.xml文件

 1 <!-- 注册SpringMVC的前端控制器DispatchcerServlet -->
 2   <servlet>
 3           <servlet-name>DispatchcerServletSpringMVC</servlet-name>
 4           <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 5           <!-- 初始化SpringMVC容器 -->
 6           <init-param>
 7                   <param-name>contextConfigLocation</param-name>
 8                   <param-value>classpath:SpringMVC.xml</param-value>
 9           </init-param>
10   </servlet>
11   <!-- 拦截 以.action结尾的请求-->
12   <servlet-mapping>
13           <servlet-name>DispatchcerServletSpringMVC</servlet-name>
14           <url-pattern>*.action</url-pattern>
15   </servlet-mapping>

1.2.配置SpringMVC.xml文件

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <beans xmlns="http://www.springframework.org/schema/beans"
 3     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4     xmlns:context="http://www.springframework.org/schema/context"
 5     xmlns:mvc="http://www.springframework.org/schema/mvc"
 6     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
 7         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
 8         http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
 9     <!-- 指定使用注解方式配置 -->
10     <!-- 扫描以下包及其子包内容 --> 
11     <mvc:annotation-driven></mvc:annotation-driven>
12     <context:component-scan base-package="com.login.handler"></context:component-scan>
13     <!-- 不处理静态内容 -->
14     <mvc:default-servlet-handler/>
15     <!--配置视图解析器-->
16     <bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
17          <!-- 前缀 -->
18         <property name="prefix" value="/WEB-INF/admin/" />
19         <!-- 后缀 -->
20         <property name="suffix" value=".jsp" />
21     </bean>
22 </beans>

1.3.C3P0数据库连接池的配置：

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <c3p0-config>
 3   <named-config name="hello"> 
 4       <property name="driverClass">com.mysql.jdbc.Driver</property>
 5       <property name="jdbcUrl">jdbc:mysql://localhost:3306/springmvc</property>
 6       <property name="user">root</property>
 7       <property name="password">root</property>
 8     <property name="initialPoolSize">2</property>
 9     <property name="maxPoolSize">5</property>
10   </named-config>
11 </c3p0-config>

1.4.视图层目录结构：

1.5.各层关键代码展示：

　　<1>.view层：

　　　@1.login.jsp页面：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.css" />
 8 <style type="text/css">
 9     .div_login {
10         width: 360px;
11         height: auto;
12         margin-top: 1%;
13         background-color:white;
14         
15     }
16 </style>
17 <title>Admin Login</title>
18 </head>
19 <body style="background-color:cadetblue">
20 <!--
21     作者：weixuhui@aliyun.com
22     时间：2018-02-07
23     描述：
24 -->
25     <div class="container-fluid">
26         <div class="row" style="margin-top: 8%;">
27             <center><font color="red" size="5px">${error_msg }</font></center>
28             <center><h2>AdminLogin</h2></center>
29         </div>
30         <div class="row">
31             <center>
32                 <div class="div_login">
33                     <div class="row"><center><p style="margin-top: 10px;">请登录开启你的会话旅程</p></center></div>
34                     <div class="row">
35                             <form action="<%=request.getContextPath() %>/admin/adminCheck.action" method="post">
36                                   <div class="form-group">
37                                     <input type="text" name="name"  class="form-control" id="name" placeholder="姓名" style="width: 350px;">
38                                   </div>
39                                   <div class="form-group">
40                                     <input type="password" name="passwd" class="form-control" id="passwd" placeholder="密码" style="width: 350px;">
41                                   </div>
42                                   <div>
43                                       <div class="col-lg-5 col-md-5 checkbox">
44                                           <label><input type="checkbox" name="remember">记住登录信息</label>
45                                       </div>
46                                       <div class="col-lg-4 col-lg-offset-3 col-md-4 col-md-offset-3"><button type="submit" class="btn btn-primary">登录</button></div>
47                                   </div>
48                             </form>
49                     </div>
50                     <div class="row"><div class="col-lg-5 col-md-5"><a href="<%=request.getContextPath() %>/register.jsp">注册一个新账户</a></div></div>
51                 </div>
52             </center>
53         </div>
54     </div>
55 <!-- 消息弹出框提示 -->
56 <script type="text/javascript">
57     var msg = "${off_msg}" 
58     if (msg != "") {
59         alert("${off_msg}" );    
60     }
61 </script>
62 </body>
63 </html>

　　　@2.register.jsp页面：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.css" />
 8 <style type="text/css">
 9     .div_login {
10         width: 360px;
11         height: auto;
12         margin-top: 1%;
13         background-color:white;
14         
15     }
16 </style>
17 <title>Register Admin</title>
18 </head>
19 <body style="background-color:cadetblue">
20         <div class="container-fluid">
21             <div class="row" style="margin-top: 8%;">
22             <center><font color="white" size="5px">${msg }</font></center>
23             <center><h2>RegisterAdmin</h2></center>
24         </div>
25         <div class="row">
26             <center>
27                 <div class="div_login">
28                     <div class="row"><center><p style="margin-top: 10px;">注册一个新账户</p></center></div>
29                     <div class="row">
30                             <form action="<%=request.getContextPath() %>/admin/adminAdd.action" method="post">
31                                  <div class="form-group">
32                                     <input type="text" name="account" class="form-control" id="account" placeholder="账号" style="width: 350px;">
33                                   </div>
34                                   <div class="form-group">
35                                     <input type="text" name="name"  class="form-control" id="name" placeholder="姓名" style="width: 350px;">
36                                   </div>
37                                   <div class="form-group">
38                                     <input type="password" name="passwd" class="form-control" id="passwd" placeholder="密码" style="width: 350px;">
39                                   </div>
40                                    <div class="form-group">
41                                     <input type="password" name="passwd_ref" class="form-control" id="passwd_ref" placeholder="确认密码" style="width: 350px;">
42                                   </div>
43                                    <div class="form-group">
44                                     <input type="email" name="email" class="form-control" id="email" placeholder="邮箱" style="width: 350px;">
45                                   </div>
46                                   <div>
47                                       <div class="col-lg-5 col-md-5 checkbox">
48                                           <label><input type="checkbox" name="remember">同意注册<a href="#">条约</a></label>
49                                       </div>
50                                       <div class="col-lg-4 col-lg-offset-3 col-md-4 col-md-offset-3"><button type="submit" class="btn btn-primary">注册</button></div>
51                                   </div>
52                             </form>
53                     </div>
54                     <div class="row"><div class="col-lg-3 col-md-3"><a href="<%=request.getContextPath() %>/login.jsp">登录账号</a></div></div>
55                 </div>
56             </center>
57         </div>
58         </div>
59 </body>
60 </html>

　　　@3.adminWelcome.jsp页面：

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3     <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5 <html>
  6 <head>
  7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8 <link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.css" />
  9 <style type="text/css">
 10     .style_display{
 11         width: 360px;
 12         display: none;
 13     }
 14     .style_display2{
 15         width: 360px;
 16     }
 17 </style>
 18 <script type="text/javascript">
 19     function $(id){
 20         return document.getElementById(id);
 21     }
 22     function alterAdmin(){
 23         var display_element = $("AdminInfo");
 24         display_element.setAttribute("class","style_display2");
 25     }
 26     function deleteAdmin(){
 27         window.location.href="<%=request.getContextPath() %>/admin/adminDelete.action";
 28     }
 29     function adminLogout(){
 30         window.location.href="<%=request.getContextPath() %>/admin/adminLogout.action";
 31     }
 32     function showPicture(){
 33         window.location.href="<%=request.getContextPath() %>/image/showImage.action";
 34     }
 35 </script>
 36 <title>AdminWelcome</title>
 37 </head>
 38 <body>
 39 <!-- 消息弹出框提示 -->
 40 <script type="text/javascript">
 41     var msg = "${error_msg}" 
 42     if (msg != "") {
 43         alert("${error_msg}" );    
 44     }
 45 </script>
 46             <div class="container-fluid">
 47                 <!--
 48                     作者：weixuhui@aliyun.com
 49                     时间：2018-02-08
 50                     描述：导航条
 51                 -->
 52                 <div class="row" style="background-color: #2B542C; height: 60px;">
 53                     <div class="col-lg-3 col-md-3 col-lg-offset-9 col-md-offset-9" style="padding-top: 15px;">
 54                         <font color="white" size="3px">${username }：欢迎你！</font>
 55                         <button class="btn btn-default" onclick="adminLogout()" >注销</button>
 56                     </div>
 57                 </div>
 58                 <!--
 59                     作者：weixuhui@aliyun.com
 60                     时间：2018-02-08
 61                     描述：表单内容显示区
 62                 -->
 63                 <div class="row" style="margin-top: 2px;">
 64                     <div class="col-lg-4 col-md-6 col-lg-offset-4 col-md-offset-3">
 65                         <table class="table table-striped table-bordered table-hover">
 66                             <tr style="background-color: cornflowerblue;">
 67                                 <th>账号</th>
 68                                 <th>姓名</th>
 69                                 <th>密码</th>
 70                                 <th>邮箱</th>
 71                                 <th>修改</th>
 72                                 <th>销毁</th>
 73                                 <th>相册</th>
 74                             </tr>
 75                             <tr>
 76                                 <input  type="hidden" value="${adminInfo.id }"/>
 77                                 <td>${adminInfo.account }</td>
 78                                 <td>${adminInfo.name }</td>
 79                                 <td>${adminInfo.passwd }</td>
 80                                 <td>${adminInfo.email }</td>
 81                                 <td><button class="btn btn-warning" onclick="alterAdmin()">修改</button></td>
 82                                 <td><button class="btn btn-danger" onclick="deleteAdmin()">销毁</button></td>
 83                                 <td><button class="btn btn-primary" onclick="showPicture()">查看</button></td>
 84                             </tr>
 85                         </table>
 86                     </div>
 87                 </div>
 88                 <!--
 89                     作者：weixuhui@aliyun.com
 90                     时间：2018-02-08
 91                     描述：修改内容区
 92                 -->
 93                 <center>
 94                 <div class="row  style_display" id="AdminInfo" style="border-bottom: none;">
 95                         <div >
 96                             <form action="<%=request.getContextPath() %>/admin/adminAlter.action" method="post">
 97                                 <input type="hidden" name="id" value="${adminInfo.id }" />
 98                                  <div class="form-group">
 99                                   <input type="text" name="account"   class="form-control" id="account" value="${adminInfo.account }" style="width: 300px;">
100                                   </div>
101                                   <div class="form-group">
102                                  <input type="text" name="name"  class="form-control" id="name" value="${adminInfo.name }" style="width: 300px;">
103                                   </div>
104                                   <div class="form-group">
105                                    <input type="text" name="passwd" class="form-control" id="passwd" value="${adminInfo.passwd }" style="width: 300px;">
106                                   </div>
107                                    <div class="form-group">
108                                  <input type="email" name="email" class="form-control" id="email" value="${adminInfo.email }" style="width: 300px;">
109                                   </div>
110                                   <div>
111                                       <div><button type="submit" class="btn btn-primary" style="width: 300px;">修改</button></div>
112                                   </div>
113                             </form>
114                     </div>
115                 </div>
116                 </center>
117             </div>
118 </body>
119 </html>

　　<2>.Handler代码展示：

　　　　@1.AdminOperationHandler

 1 @Controller
 2 @RequestMapping("/admin")
 3 public class AdminOperationHandler {
 4     
 5     private AdminOperationService adminService;
 6     public  AdminOperationHandler() {
 7         this.adminService = new AdminOperationServiceImpl();
 8     }
 9     /*账户登录校验*/
10     @RequestMapping(path={"adminCheck.action"},method= {RequestMethod.POST})
11     public String adminCheck(Admin admin,HttpSession session,HttpServletRequest request ) {
12         try {
13             int temp = adminService.adminCheck(admin);
14             if( temp != -1) {
15                 session.setAttribute("username", admin.getName());
16                 session.setAttribute("aid", temp);
17                 return "forward:/admin/adminQuery.action";
18             }
19         } catch (SQLException e) {
20             e.printStackTrace();
21         }
22         request.setAttribute("error_msg", "用户名或者密码错误！");
23         return "forward:/login.jsp";
24     }
25     /*账户注册*/
26     @RequestMapping(path= {"adminAdd.action"},method= {RequestMethod.POST})
27     public String adminAdd(Admin admin,HttpServletRequest request) {
28         String msg = "";
29         try {
30             if(adminService.adminAdd(admin)) {
31                 msg = "用户添加成功！";
32             }else {
33                 msg = "用户添加失败！";
34             }
35         } catch (SQLException e) {
36             e.printStackTrace();
37         }
38         request.setAttribute("msg", msg);
39         return "forward:/register.jsp";
40     }
41     /*账户销毁*/
42     @RequestMapping("/adminDelete.action")
43     public String adminDelete(HttpServletRequest request,HttpSession session) {
44         try {
45             if (!adminService.adminDelete((Integer)session.getAttribute("aid"))) {
46                 request.setAttribute("error_msg", "账户销毁失败！");
47                 return "forward:/admin/adminQuery.action";
48             }
49         } catch (SQLException e) {
50             e.printStackTrace();
51         }
52         return "redirect:/login.jsp";
53     }
54     /*账户更新*/
55     @RequestMapping(path="adminAlter.action",method=RequestMethod.POST)
56     public String adminAlter(int id,Admin admin,HttpServletRequest request) {
57         try {
58             if (adminService.adminAlter(id, admin)) {
59                 request.setAttribute("error_msg", "信息更新成功！");
60             }else {
61                 request.setAttribute("error_msg", "信息更新失败！");
62             }
63         } catch (SQLException e) {
64             request.setAttribute("error_msg",e.getMessage());
65             e.printStackTrace();
66         }
67         return "forward:/admin/adminQuery.action";
68     }
69     /*账号查询*/
70     @RequestMapping("/adminQuery.action")
71     public String adminQuery(HttpServletRequest request,HttpSession session) {
72         Admin admin;
73         try {
74             admin = adminService.adminQuery((Integer)session.getAttribute("aid"));
75             request.setAttribute("adminInfo", admin);
76         } catch (SQLException e) {
77             e.printStackTrace();
78         }
79         return "adminWelcome";
80     }
81     /*账户注销*/
82     @RequestMapping("/adminLogout.action")
83     public String adminLogout(HttpServletRequest request,HttpSession session) {
84         session.invalidate();
85         request.setAttribute("off_msg", "您将退出了会话状态！");
86         return "forward:/login.jsp";
87     }
88 }

　　<3>.Service层代码展示：

　　　　@1.AdminOperationService接口展示：

 1 public interface AdminOperationService {
 2 
 3     /* 增加管理员 */
 4     public boolean adminAdd(Admin admin) throws SQLException;
 5 
 6     /* 删除管理员 */
 7     public boolean adminDelete(int aid) throws SQLException;
 8 
 9     /* 修改管理员 */
10     public boolean adminAlter(int aid, Admin admin) throws SQLException;
11 
12     /* 检查账号 */
13     public int adminCheck(Admin admin) throws SQLException;
14     
15     /*查询账号信息*/
16     public Admin adminQuery(int id) throws SQLException;
17 }

　　　　@2.实现类AdminOperationServiceImpl展示：

public class AdminOperationServiceImpl implements AdminOperationService {
    
    private AdminOperationDao adminDao;
    public AdminOperationServiceImpl() {
        this.adminDao = new AdminOperationDaoImpl();
    }
    
    @Override
    public boolean adminAdd(Admin admin) throws SQLException {
        boolean isTrue = false;
        if (0 != adminDao.adminAdd(admin)) {
            isTrue = true;
        }
        return isTrue;
    }

    @Override
    public boolean adminDelete(int aid) throws SQLException {
        boolean isTrue = false;
        if (adminDao.adminDelete(aid) != 0) {
            isTrue = true;
        }
        return isTrue;
    }

    @Override
    public boolean adminAlter(int aid, Admin admin) throws SQLException {
        boolean isTrue = false;
        if(adminDao.adminAlter(aid, admin) != 0) {
            isTrue = true;
        }
        return isTrue;
    }

    @Override
    public int adminCheck(Admin admin) throws SQLException {
        int user_id;
        user_id = adminDao.adminCheck(admin);
        return user_id;
    }

    @Override
    public Admin adminQuery(int id) throws SQLException {
        Admin admin;
        admin = adminDao.adminQuery(id);
        return admin;
    }

}

　　<4>.Dao层代码展示：

　　　　@1.AdminOperationDao接口展示：

public interface AdminOperationDao {
    
    /*增加管理员*/
    public int adminAdd(Admin admin) throws SQLException;
    
    /*删除管理员*/
    public int adminDelete(int aid) throws SQLException;
    
    /*修改管理员*/
    public int adminAlter(int aid,Admin admin) throws SQLException;
    
    /*检查账号*/
    public int adminCheck(Admin admin) throws SQLException;
    
    /*查询账号*/
    public Admin adminQuery(int id) throws SQLException;
}

　　　　@实现类AdminOperationDaoImpl展示：

 1 public class AdminOperationDaoImpl implements AdminOperationDao {
 2     
 3     private QueryRunner qr;
 4     public AdminOperationDaoImpl() {
 5         this.qr = new QueryRunner(MyDataSource.getDataSource());
 6     }
 7     
 8     @Override
 9     public int adminAdd(Admin admin) throws SQLException {
10         String sql = "insert into admin(a_account,a_name,a_passwd,a_email) values(?,?,?,?) ";
11         return qr.update(sql, admin.getAccount(),admin.getName(),admin.getPasswd(),admin.getEmail());
12     }
13 
14     @Override
15     public int adminDelete(int aid) throws SQLException {
16         int flag = 0;
17         String sql = "delete from admin where a_id=?";
18         flag = qr.update(sql, aid);
19         return flag;
20     }
21 
22     @Override
23     public int adminAlter(int aid, Admin admin) throws SQLException {
24         int flag = 0;
25         String sql = "update admin set a_account=?,a_name=?,a_passwd=?,a_email=? where a_id=?";
26         flag = qr.update(sql, admin.getAccount(),admin.getName(),admin.getPasswd(),admin.getEmail(),admin.getId());
27         return flag;
28     }
29 
30     @Override
31     public int adminCheck(Admin admin) throws SQLException {
32         int user_id = -1; 
33         String sql = "select a_id id from admin where a_name=? and a_passwd=?";
34         Admin user = qr.query(sql, new BeanHandler<Admin>(Admin.class),admin.getName(),admin.getPasswd());
35         if (null != user) {
36             user_id = user.getId();
37         }
38         return user_id;
39     }
40 
41     @Override
42     public Admin adminQuery(int id) throws SQLException {
43         Admin admin;
44         String sql = "select a_id id,a_account account,a_name name,a_passwd passwd,a_email email from admin where a_id=?";
45         admin = qr.query(sql, new BeanHandler<Admin>(Admin.class), id);
46         return admin;
47     }
48 
49 }

　　<5>.Utils类展示：

　　　　@数据库连接池提供数据源类MyDataSource展示：

 1 public class MyDataSource {
 2     private static DataSource ds = new ComboPooledDataSource("hello");
 3     private MyDataSource() {
 4     }
 5     public static DataSource getDataSource() {
 6         return ds;
 7     }
 8     public static Connection getConnection() {
 9         Connection con = null;
10         try {
11             con = ds.getConnection();
12         } catch (SQLException e) {
13             e.printStackTrace();
14         }
15         return con;
16     }
17 }