案例：用户登录界面最全详解（JavaWeb）

朴灿烈づ我的快乐病毒、 2023-10-04 17:14 54阅读 0赞

## 一.用户登录案例需求： ##

**1.编写login.html登录页面  
username & password 两个输入框  
2.使用Druid数据库连接池技术,操作mysql，day14数据库中user表  
3.使用JdbcTemplate技术封装JDBC  
4.登录成功跳转到SuccessServlet展示：登录成功！用户名,欢迎您  
5.登录失败跳转到FailServlet展示：登录失败，用户名或密码错误**

## **二.功能分析** ##

**![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16][]**

图1 功能分析图

## 三.开发步骤 ##

###  **3.1. 创建项目，导入html页面，配置文件，jar包** ###

**![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_13_color_FFFFFF_t_70_g_se_x_16][]**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_13_color_FFFFFF_t_70_g_se_x_16 1][]

### 3.2. 创建数据库环境 ###

CREATE DATABASE day14;
    			USE day14;
    			CREATE TABLE USER(
    			
    				id INT PRIMARY KEY AUTO_INCREMENT,
    				username VARCHAR(32) UNIQUE NOT NULL,
    				PASSWORD VARCHAR(32) NOT NULL
    			);

### 3.3创建前端html和css页面 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form action="/loginProject/loginServlet" method="post">
            用户名:<input type="text" name="username"> <br>
            密码:<input type="password" name="password"><br>
    
            <input type="submit" value="登录">
    
        </form>
    </body>
    </html>

### 3.4 创建类User,封装前端传过来的参数信息 ###

/**
    			 * 用户的实体类
    			 */
    			public class User {
    			
    			    private int id;
    			    private String username;
    			    private String password;
    			
    			
    			    public int getId() {
    			        return id;
    			    }
    			
    			    public void setId(int id) {
    			        this.id = id;
    			    }
    			
    			    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;
    			    }
    			
    			    @Override
    			    public String toString() {
    			        return "User{" +
    			                "id=" + id +
    			                ", username='" + username + '\'' +
    			                ", password='" + password + '\'' +
    			                '}';
    			    }
    			}

### 3.5 创建包util,编写工具类JDBCUtils，主要建立数据库连接池对象 ###

package util;
    
    			import com.alibaba.druid.pool.DruidDataSourceFactory;
    			
    			import javax.sql.DataSource;
    			import javax.xml.crypto.Data;
    			import java.io.IOException;
    			import java.io.InputStream;
    			import java.sql.Connection;
    			import java.sql.SQLException;
    			import java.util.Properties;
    			
    			/**
    			 * JDBC工具类 使用Durid连接池
    			 */
    			public class JDBCUtils {
    			
    			    private static DataSource ds ;
    			
    			    static {
    			
    			        try {
    			            //1.加载配置文件
    			            Properties pro = new Properties();
    			            //使用ClassLoader加载配置文件，获取字节输入流
    			            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
    			            pro.load(is);
    			
    			            //2.初始化连接池对象
    			            ds = DruidDataSourceFactory.createDataSource(pro);
    			
    			        } catch (IOException e) {
    			            e.printStackTrace();
    			        } catch (Exception e) {
    			            e.printStackTrace();
    			        }
    			    }
    			
    			    /**
    			     * 获取连接池对象
    			     */
    			    public static DataSource getDataSource(){
    			        return ds;
    			    }
    			
    			
    			    /**
    			     * 获取连接Connection对象
    			     */
    			    public static Connection getConnection() throws SQLException {
    			        return  ds.getConnection();
    			    }
    			}

### 3.6 创建包dao,创建类UserDao,提供login方法，主要是与mysql数据库连接，对数据库进行操作 ###

package dao;
    
    			import cn.itcast.domain.User;
    			import cn.itcast.util.JDBCUtils;
    			import org.springframework.dao.DataAccessException;
    			import org.springframework.jdbc.core.BeanPropertyRowMapper;
    			import org.springframework.jdbc.core.JdbcTemplate;
    			
    			/**
    			 * 操作数据库中User表的类
    			 */
    			public class UserDao {
    			
    			    //声明JDBCTemplate对象共用
    			    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    			
    			    /**
    			     * 登录方法
    			     * @param loginUser 只有用户名和密码
    			     * @return user包含用户全部数据,没有查询到，返回null
    			     */
    			    public User login(User loginUser){
    			        try {
    			            //1.编写sql
    			            String sql = "select * from user where username = ? and password = ?";
    			            //2.调用query方法
    			            User user = template.queryForObject(sql,
    			                    new BeanPropertyRowMapper<User>(User.class),
    			                    loginUser.getUsername(), loginUser.getPassword());
    			
    			
    			            return user;
    			        } catch (DataAccessException e) {
    			            e.printStackTrace();//记录日志
    			            return null;
    			        }
    			    }
    			}

### 3.7. 编写LoginServlet类，主要是进行前端参数数据和UserDao进行交互 ###

package servlet;
    
    import cn.itcast.dao.UserDao;
    import cn.itcast.domain.User;
    			
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    			
    			
    @WebServlet("/loginServlet")
    public class LoginServlet extends HttpServlet {
    		
    			
      @Override
      protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    			  //1.设置编码
    			        req.setCharacterEncoding("utf-8");
                  /*
    			  //2.获取请求参数
    			        String username = req.getParameter("username");
    			        String password = req.getParameter("password");
    			        //3.封装user对象
    			        User loginUser = new User();
    			        loginUser.setUsername(username);
    			        loginUser.setPassword(password);
                  */
    			//2.封装成对象,可以使用BeanUtils类直接封装前端传过来的参数信息；需提前导入jar包
                //下面等同于上面注释的语句
    		   Users loginUsers=new Users();
    		   Map<String,String[]> pMap=req.getParameterMap();
    		   //使用BeanUtil封装对象
    		   try {
    			   BeanUtils.populate(loginUsers, pMap);
    		   } catch (IllegalAccessException e) {
    			  // TODO Auto-generated catch block
    			  e.printStackTrace();
    		   } catch (InvocationTargetException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		   }
    		
    	                //4.验证用户名和密码
    			        //4.调用UserDao的login方法
    			        UserDao dao = new UserDao();
    			        User user = dao.login(loginUser);
    			
    			        //5.判断user
    			        if(user == null){
    			            //登录失败
    			            req.getRequestDispatcher("/failServlet").forward(req,resp);
    			        }else{
    			            //登录成功
    			            //存储数据
    			            req.setAttribute("user",user);
    			            //转发
    			            req.getRequestDispatcher("/successServlet").forward(req,resp);
    			        }
    			
    			    }
    			
       @Override
       protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    			        this.doGet(req,resp);
    			    }
    			}

### 3.8.编写FailServlet和SuccessServlet类 ###

@WebServlet("/successServlet")
    			public class SuccessServlet extends HttpServlet {
    			    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    			        //获取request域中共享的user对象
    			        User user = (User) request.getAttribute("user");
    			
    			        if(user != null){
    			            //给页面写一句话
    			
    			            //设置编码
    			            response.setContentType("text/html;charset=utf-8");
    			            //输出
    			            response.getWriter().write("登录成功！"+user.getUsername()+",欢迎您");
    			        }
    			
    			
    			    }		
    
                @WebServlet("/failServlet")
    			public class FailServlet extends HttpServlet {
    			    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    			        //给页面写一句话
    			
    			        //设置编码
    			        response.setContentType("text/html;charset=utf-8");
    			        //输出
    			        response.getWriter().write("登录失败，用户名或密码错误");
    			
    			    }
    			
    			    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    			        this.doPost(request,response);
    			    }
    			}

其他：

BeanUtils工具类，简化数据封装  
\* 用于封装JavaBean的  
1. JavaBean：标准的Java类  
1. 要求：  
1. 类必须被public修饰  
2. 必须提供空参的构造器  
3. 成员变量必须使用private修饰  
4. 提供公共setter和getter方法  
2. 功能：封装数据

最后：用户登录的模块功能全部结束！！！

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2135a25267614fe68899b4d6ff9efda9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6f5567bf7d454ff1a9eba16deaf31225.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_13_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/263157bf7b1640069382f342ec144aaf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_13,color_FFFFFF,t_70,g_se,x_16