JavaWEB用户登录实现代码




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代码:

<script type="text/javascript">
        function reset(){
            document.getElementById("userName").value = "";
            document.getElementById("password").value = "";
            document.getElementById("error").innerHTML = "";
        }
        function login(){
            document.getElementById('form').submit();
        }
    </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

CSS代码:

<style type="text/css">
        .box{
            width: 400px;
            height: 300px;
            margin:200 auto;
            display:block;
            position: relative;
        }

        .btn_style{
            width: 100px;
            height: 30px;
            display: block;
            position:absolute;

            text-decoration:none;
            text-align:center;
            line-height:30px;

            color: #fff;
            background-color: #058;

        }
        #btn_reset:HOVER {
            background-color: #047;
        }
        #btn_login:hover{
            background-color: #047;
        }
        #btn_reset{
            right:50px;
        }
        #btn_login{
            margin-left: 50px;
        }
    </style>
  • 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.为了用户体验好,信息错误也要传过去


展开阅读全文

没有更多推荐了,返回首页