了解登录

向右看齐 2022-05-29 01:38 117阅读 0赞

## 转自：http://blog.csdn.net/jimo\_lonely/article/details/51035798 ##

## 1.环境搭建 ##

[环境那个建][Link 1]

## 2.了解MVC模型 ##

model–view–controller

## 3.搭建登陆页面 ##

![1][]

HTML代码：

<body background="image/bg.jpg">
    
      <div align="center" class="box">
        <form id="form"method="post" action="servlet/LoginServlet">
            userName:<input type="text" value="${userName }" name="userName" id="userName"/><p/>
            password:<input type="password" value="${password }" name="password" id="password"/><br/>
            <p/>
        </form>
        <a class="btn_style" id="btn_login"href="javascript:login()" >登陆</a>
        <a class="btn_style" id="btn_reset"href="javascript:reset()">重置</a>
        <br/>
        <font id="error"color="red">${error }</font>
      </div>
      </body>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14

Javascript代码：

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10

CSS代码：

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36

## 4.数据库设计 ##

采用mysql，用navicat图形化管理：

![5][]

## 5.工具类 ##

连接数据库，导入jar包：

public class DbUtil { 
        private String dbUrl = "jdbc:mysql://localhost:3306/db_manage";
        private String dbUserName = "root";
        private String dbPassword = "";
        private String jdbcName = "com.mysql.jdbc.Driver";
    
        /* * 获取连接 */
        public Connection getCon() throws ClassNotFoundException, SQLException{
            Class.forName(jdbcName);
            Connection con = DriverManager.getConnection(dbUrl,dbUserName,dbPassword);
            return con;
        }
    
        /* * 关闭连接 */
        public void closeCon(Connection con) throws SQLException{
            if(null!=con){
                con.close();
            }
        }
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24

字符串工具：

public class StringUtil { 
        public static boolean isEmpty(String str){
            if("".equals(str)|| str==null){
                return true;
            }else{
                return false;
            }
        }
    
        public static boolean isNotEmpty(String str){
            if(!"".equals(str)&&str!=null){
                return true;
            }else{
                return false;
            }
        }
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17

## 6.写LoginServlet类 ##

主要是处理：

public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            this.doPost(request, response);
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            String userName = request.getParameter("userName");
            String password = request.getParameter("password");
    
            System.out.println(userName+"--"+password);
    
            if(StringUtil.isEmpty(password)||StringUtil.isEmpty(userName)){
    
                //session
                HttpSession session=request.getSession();
                session.setAttribute("error", "不能为空"); 
                response.sendRedirect(request.getContextPath()+"/index.jsp");
                System.out.println("kong");
                return ;
            }
    
            User user = new User(userName, password);
            try {
                Connection con = dbUtil.getCon();
                User curr_user = userDao.login(con, user);
                if(null==curr_user){
                    HttpSession session=request.getSession();
                    session.setAttribute("error", "错误");
                    session.setAttribute("userName", userName);
                    session.setAttribute("password", password);
                    response.sendRedirect(request.getContextPath()+"/index.jsp");
                    System.out.println("error");
                }else{
                    // 
                    HttpSession session=request.getSession();
                    session.setAttribute("currentUser", "登陆成功");
                    //ת
                    response.sendRedirect(request.getContextPath()+"/main.jsp");
                    System.out.println("yes");
                }
            } catch (ClassNotFoundException e) {
                e.printStackTrace();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40
 *  41
 *  42
 *  43
 *  44
 *  45
 *  46
 *  47
 *  48
 *  49

## 7.在web.xml中配置servlet ##

<servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>jimo.web.LoginServlet</servlet-class>
      </servlet>
    
      <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/servlet/LoginServlet</url-pattern>
      </servlet-mapping>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

## 8.验证 ##

main.jsp页面很简单：

<font color="red">${currentUser }</font>

*  1

为空时：

![2][]

错误时：

![3][]

成功时：

![4][]

## 9.bug修复 ##

Bug：我们不登录，直接输入`http://localhost:8080/Test/main.jsp`也能进入主页面

修复Bug：

在main.jsp前面加入判断：

<%
        if(null==session.getAttribute("currentUser")){
            System.out.print("ddd");
            response.sendRedirect("index.jsp");
            return;
        }else{
            System.out.print("yyy");
        }
     %>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

## 10.总结 ##

1.最好采用post方式提交，更加安全

2.登陆为空验证：   
前端验证：不安全   
后台验证：推荐

3.涉及服务器端跳转到客户端

4.客户端通过EL表达式$\{error\}获取传过来的信息

5.为了用户体验好，信息错误也要传过去

[Link 1]: http://blog.csdn.net/jimo_lonely/article/details/49901991
[1]: /images/20220529/2804792cd3b54b42aa1eb3c4a8a6f28c.png
[5]: /images/20220529/0d161f78c0dc4064a6ac1fbdc706719c.png
[2]: /images/20220529/09a3d18c44934d40a9aa67078487e1f2.png
[3]: /images/20220529/b472d6a18bb348dcb60e70709512d4f0.png
[4]: /images/20220529/29439520f1224efd8fb1be91775134f9.png