10分钟-JavaWeb入门-登陆功能实现

1.环境搭建

2.了解MVC模型

model–view–controller

3.搭建登陆页面

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>

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>

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>

4.数据库设计

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

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();
        }
    }
}

字符串工具：

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;
        }
    }
}

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();
        }
    }

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>

8.验证

main.jsp页面很简单：

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

为空时：

错误时：

成功时：

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");
    }
 %>

10.总结

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

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

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

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

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/jimo_lonely/article/details/51035798
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-04-11 13:16:35
阅读 ( 703 )
分类：

10分钟-JavaWeb入门-登陆功能实现

1.环境搭建

2.了解MVC模型

3.搭建登陆页面

4.数据库设计

5.工具类

6.写LoginServlet类

7.在web.xml中配置servlet

8.验证

9.bug修复

10.总结

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看