Servlet开发(2)

 

Jsp&Servlet用户登录功能实现(采用MVC模式)

我们使用Jsp&Servlet开发一个用户登录功能的小项目（麻雀大小，但是五脏俱全呦,关键是技术问题！）。

数据库：mysql   

驱动包为 mysql-connector-java-3.1.12-bin.jar(下载链接：链接: https://pan.baidu.com/s/1_MlQONkdr5l1nKtO8OZCPQ 提取码: 442t)

驱动包放置在 HeadFirstJspServlet05/com.java1234.model/WeebContent/WEB-INF/lib下

开发工具：eclipse   

客户端：Chrome浏览器

系统架构：　　

①在com.java1234.model下是User模型；

在User类中 属性有id,userName,password;

主要作用是建立一个基础用户（id,用户名，密码（没有涉及加密，以后会更新，打算采用MD5加密））的模型。

代码如下：

package com.java1234.model;
public class User {
    private int id;
    private String userName;
    private String password;
    
    public User(String userName, String password) {
        super();
        this.userName = userName;
        this.password = password;
    }

    public User() {
        super();
        // TODO Auto-generated constructor stub
    }

    public String getUserName() {
        return userName;
    }
    
    public void setUserName(String userName) {
        this.userName = userName;
    }
    
    public String getPassword() {
        return password;
    }
    
    public void setPassword(String password) {
        this.password = password;
    }
    
    public int getId() {
        return id;
    }
    
    public void setId(int id) {
        this.id = id;
    }
}

②在com.java1234.util下是建立的DbUtil模型，主要是连接数据库用的。

这部分代码需要加强记忆；

其实细分也很简单的，主要存在的知识要点：

数据库链接地址dbUrl="jdbc:mysql://localhost:3306/db_jsp"(数据库名字);

数据库驱动：jdbcName="com.mysql.jdbc.Driver";

数据库名称：dbUserName="root";

数据库密码：dbpassword="123456";

数据库连接getcon()方法，数据库关闭closecon()方法;

 代码如下：

package com.java1234.util;
import java.sql.Connection;
import java.sql.DriverManager;
public class DbUtil {
    private String dbUrl="jdbc:mysql://localhost:3306/db_jsp";//数据库链接地址
    private String dbUserName="root";//数据库用户名称
    private String dbPassword="123456";//数据库密码
    private String jdbcName="com.mysql.jdbc.Driver";//jdbc驱动
    public Connection getcon() throws Exception{
        Class.forName(jdbcName);//反射实例化jdbc驱动包
        Connection con
        =DriverManager.getConnection(dbUrl, dbUserName, dbPassword);
        return con;
    }
    public void closeCon(Connection con) throws Exception{
        if(con !=null){
            con.close();
        }
    }
    public static void main(String[] args) {
        DbUtil dbutil=new DbUtil();
       try {
        Connection con=dbutil.getcon();
        System.out.println("数据库连接成功！");
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
       
    }
}

数据库表为：

t_user :

③在com.java1234.dao下建立的Dao模型，主要是对User模型进行操作。

主要操作login()方法(主要是获取数据库数据String sql=”SELECT * from t_user where userName =? and password=?”; )   

-----> PrepareStatement pstmt = prepareStatement(sql)   

----> 对第1个参数和第2个参数进行设置  

pstmt.setString(1, user.getUserName()); pstmt.setString(2, user.getPassword());

----->执行数据库查询指令 ResultSet rs=pstmt.executeQuery();

代码如下：

package com.java1234.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.java1234.model.User;
public class Userdao {
    public User login(Connection con,User user) throws Exception{
        User resultUser=null;
        String sql="SELECT * from t_user where userName=? and password=? ";
        PreparedStatement pstmt=con.prepareStatement(sql);
        pstmt.setString(1, user.getUserName());
        pstmt.setString(2, user.getPassword());
        ResultSet rs=pstmt.executeQuery();
        if(rs.next()){
            resultUser=new User();
            resultUser.setUserName(rs.getString("userName"));
            resultUser.setPassword(rs.getString("passWord"));
        }
        return resultUser;
    }
}

④com.java1234.web下的LoginServlet.java 进行后端处理，主要将前端页面的数据传到后端。（还有验证功能，对数据库中不存在的数据会进行判错，error 并且在前端页面输出）

代码如下：

package com.java1234.web;
import java.io.IOException;
import java.sql.Connection;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.java1234.dao.Userdao;
import com.java1234.model.User;
import com.java1234.util.DbUtil;

public class LoginServlet extends HttpServlet{
    private static final long serialVersionUID = 1L;
    DbUtil dbutil=new DbUtil();
    Userdao userdao=new Userdao();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String  userName=request.getParameter("userName");
        String  password=request.getParameter("password");
        Connection con=null;
        try {
            User user=new User(userName,password);
            con=dbutil.getcon();
            User currentuser = userdao.login(con,user);
            if(currentuser == null){
                request.setAttribute("error", "用户名或者密码错误");
                request.setAttribute("userName", userName);
                request.setAttribute("password", password);
                request.getRequestDispatcher("Login.jsp").forward(request, response);
            }else{
                HttpSession session=request.getSession(); 
                session.setAttribute("currentuser", currentuser);
                response.sendRedirect("main.jsp");
            }
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            }
        }
}

涉及技术要点：

RequestDispatcher接口 服务器跳转... 参考博客（博客写的确实好！）

https://www.cnblogs.com/lulipro/p/7471987.html

⑤jsp页面，我们可以看到是一个简单的用户登录功能的实现。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>target-redirect</title>
<script type="text/javascript">
    function resetInfo(){
        document.getElementById("userName").value="";//document操纵html文档内容。
        document.getElementById("password").value="";
    }
</script>
</head>
<body>
    <form action="login" method="post">
        <h4>用户登录</h4>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="userName" name="userName" value="${userName}"/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" id="password" name="password" value="${password}"></td>
            </tr>
            <tr>
                <td><input type="submit" value="登录"/></td>
                <td colspan="2"><input type="button" value="重置" onclick="resetInfo()"/> 
                <font color="red">${error}</font>
                </td>
                
            </tr>
        </table>
    </form>
</body>
</html>

涉及的技术点：

1. javascript脚本: document.getElementById(" ").     

   每个载入浏览器的 HTML 文档都会成为 Document 对象。

   Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

    

2.  value="${userName}"；el表达式

界面：

登录界面：

报错处理：

重置：

登陆成功：

小 项 目 就 此 ok！