[MVC+JDBC] 用户登录系统

---

用户登录系统

1. 搭建环境

2. 准备数据

CREATE DATABASE mvc;

USE mvc;

DROP TABLE IF EXISTS `user`;

CREATE TABLE `user` (
	`id` DOUBLE ,
	`username` VARCHAR (96),
	`password` VARCHAR (96)
);

LOCK TABLES `user` WRITE;

INSERT INTO `user` (`id`, `username`, `password`) VALUES('1','admin','123');
INSERT INTO `user` (`id`, `username`, `password`) VALUES('2','reggie','abc');

UNLOCK TABLES;

3. 后端代码

a. UserDao & UserDaoImpl

package com.regino.dao;

import com.regino.domian.User;

import java.util.List;

public interface UserDao {

    // Login
    public abstract User login(String username, String password);

    // Create
    public abstract boolean add(User user);

    // Retrieve all
    public abstract List<User> findAll();

    // Retrieve
    public abstract User findById(String id);

    // Update
    public abstract boolean update(User newUser);

    // Delete
    public abstract boolean delete(String id);
}

package com.regino.dao;

import com.regino.domian.User;
import com.regino.utils.JdbcUtils;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class UserDaoImpl implements UserDao {

    private Connection connection = null;
    private PreparedStatement preparedStatement = null;
    private Statement statement = null;
    private ResultSet resultSet = null;

    @Override
    public User login(String username, String password) {
        User user = null;
        try {
            // 从连接池获取连接
            connection = JdbcUtils.getConnection();
            String sql = "select * from user where username = ? and password = ?";
            // 获取 SQL 预编译执行对象
            preparedStatement = connection.prepareStatement(sql);
            // 设置实际参数
            preparedStatement.setString(1, username);
            preparedStatement.setString(2, password);
            // 执行 SQL 并返回结果
            resultSet = preparedStatement.executeQuery();
            // 处理结果
            if (resultSet.next()) {
                // 获取 id、用户名、密码
                int id = resultSet.getInt("id");
                username = resultSet.getString("username");
                password = resultSet.getString("password");
                user = new User(id, username, password);
            }
            return user;
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 释放资源
            JdbcUtils.close(resultSet, preparedStatement, connection);
        }
        return null;
    }

    @Override
    public boolean add(User user) {
        boolean isAdded = false;
        try {
            // 从连接池获取连接
            connection = JdbcUtils.getConnection();
            String sql = "insert into user values(?, ?, ?)";
            // 获取 SQL 预编译执行对象
            preparedStatement = connection.prepareStatement(sql);
            // 设置实际参数
            preparedStatement.setInt(1, user.getId());
            preparedStatement.setString(2, user.getUsername());
            preparedStatement.setString(3, user.getPassword());
            // 执行 SQL 并返回结果
            int i = preparedStatement.executeUpdate();
            // 处理结果
            if (i > 0) {
                isAdded = true;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 释放资源
            JdbcUtils.close(resultSet, preparedStatement, connection);
        }
        return isAdded;
    }

    @Override
    public List<User> findAll() {
        List<User> list = new ArrayList<User>();
        User user = null;
        try {
            // 从连接池获取连接
            connection = JdbcUtils.getConnection();
            String sql = "select * from user";
            // 获取 SQL 执行对象（不需要 Statement 的子接口 PreparedStatement 来提升性能和安全性）
            statement = connection.createStatement();
            // 执行 SQL 并返回结果
            resultSet = statement.executeQuery(sql);
            // 处理结果
            while (resultSet.next()) {
                // 获取数据
                int id = resultSet.getInt("id");
                String username = resultSet.getString("username");
                String password = resultSet.getString("password");
                user = new User(id, username, password);
                list.add(user);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 释放资源
            JdbcUtils.close(resultSet, statement, connection);
        }
        return list;
    }

    @Override
    public User findById(String id) {
        User user = null;
        try {
            // 从连接池获取连接
            connection = JdbcUtils.getConnection();
            String sql = "select * from user where id = ?";
            // 获取 SQL 预编译执行对象
            preparedStatement = connection.prepareStatement(sql);
            // 设置实际参数
            preparedStatement.setString(1, id);
            // 执行 SQL 并返回结果
            resultSet = preparedStatement.executeQuery();
            // 处理结果
            if (resultSet.next()) {
                // 获取数据
                String username = resultSet.getString("username");
                String password = resultSet.getString("password");
                user = new User(Integer.valueOf(id), username, password);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 释放资源
            JdbcUtils.close(resultSet, preparedStatement, connection);
        }
        return user;
    }

    @Override
    public boolean update(User user) {
        boolean isUpdated = false;
        try {
            // 从连接池获取连接
            connection = JdbcUtils.getConnection();
            String sql = "update user set username = ?, password = ? where id = ?";
            // 获取 SQL 预编译执行对象
            preparedStatement = connection.prepareStatement(sql);
            // 设置实际参数
            preparedStatement.setString(1, user.getUsername());
            preparedStatement.setString(2, user.getPassword());
            preparedStatement.setInt(3, user.getId());
            // 执行 SQL 并返回结果
            int i = preparedStatement.executeUpdate();
            // 处理结果
            if (i > 0) {
                isUpdated = true;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 释放资源
            JdbcUtils.close(resultSet, preparedStatement, connection);
        }
        return isUpdated;
    }

    @Override
    public boolean delete(String id) {
        boolean isDeleted = false;
        try {
            // 从连接池获取连接
            connection = JdbcUtils.getConnection();
            String sql = "delete from user where id = ?";
            // 获取 SQL 预编译执行对象
            preparedStatement = connection.prepareStatement(sql);
            // 设置实际参数
            preparedStatement.setString(1, id);
            // 执行 SQL 并返回结果
            int i = preparedStatement.executeUpdate();
            // 处理结果
            if (i > 0) {
                isDeleted = true;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 释放资源
            JdbcUtils.close(resultSet, preparedStatement, connection);
        }
        return isDeleted;
    }
}

• 在调用 preparedStatement 与 statement 的 executeQuery() 和 executeUpdate() 方法时，statement 需要传递 SQL 语句作为参数，而 preparedStatement 不需要，因为 prepareStatement 在创建时就已经获得了 SQL 语句（connection.prepareStatement(sql);），而 statement 则没有（connection.createStatement();）。

b. 实体类

package com.regino.domian;

import java.io.Serializable;

public class User implements Serializable {

    private Integer id;
    private String username;
    private String password;

    public User() {
    }

    public User(Integer id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

	// 省略set/get/toString ...

c. UserService & UserServiceImpl

package com.regino.service;

import com.regino.domian.User;

import java.util.List;

public interface UserService {

    // Login
    public abstract User login(String username, String password);

    // Create
    public abstract boolean add(User user);

    // Retrieve all
    public abstract List<User> findAll();

    // Retrieve
    public abstract User findById(String id);

    // Update
    public abstract boolean update(User newUser);

    // Delete
    public abstract boolean delete(String id);
}

package com.regino.service;

import com.regino.dao.UserDaoImpl;
import com.regino.domian.User;

import java.util.List;

public class UserServiceImpl implements UserService {

    private UserDaoImpl userDaoImpl = new UserDaoImpl();

    @Override
    public User login(String username, String password) {
        return userDaoImpl.login(username, password);
    }

    @Override
    public boolean add(User user) {
        return userDaoImpl.add(user);
    }

    @Override
    public List<User> findAll() {
        return userDaoImpl.findAll();
    }

    @Override
    public User findById(String id) {
        return userDaoImpl.findById(id);
    }

    @Override
    public boolean update(User newUser) {
        return userDaoImpl.update(newUser);
    }

    @Override
    public boolean delete(String id) {
        return userDaoImpl.delete(id);
    }
}

d. JdbcUtils

package com.regino.utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

public class JdbcUtils {

	private static DataSource dataSource = null;

	// 初始化连接池 Druid 对象，一个项目只有一个 static{}
	static {
		try {
			// 通过类加载器读取src目录下配置文件，获取io流
			InputStream is = JdbcUtils.class.getClassLoader().getResourceAsStream("druid.properties");
			// 创建Properties对象
			Properties properties = new Properties();
			properties.load(is);
			// Druid连接池工厂对象，初始化连接池
			dataSource = DruidDataSourceFactory.createDataSource(properties);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	// 提供获取连接池对象静态方法
	public static DataSource getDataSource() {
		return dataSource;
	}

	// 提供连接对象的静态方法
	public static Connection getConnection() throws SQLException {
		return dataSource.getConnection();
	}

	// 提供释放资源的静态方法（归还 Connection）
	public static void close(ResultSet resultSet, Statement statement, Connection connection) {
		if (resultSet != null) {
			try {
				resultSet.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}

		if (statement != null) {
			try {
				statement.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}

		if (connection != null) {
			try {
				connection.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}

	// 重载关闭方法
	public static void close(Statement statement, Connection connection) {
		close(null, statement, connection);
	}
}

e. CharacterEncondingFilter

package com.regino.web.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

//该字符串过滤器要解决全局乱码问题
/*
乱码的分类：
     1. 请求乱码(即HTML页面提交表单数据---Servlet通过getParameter()方法获取参数的时候是否乱码)
            get请求：没有
            post请求：有乱码
     2. 响应乱码
            response.getWrite().write("好人"); //向浏览器输出数据乱码
            不管任何请求方式都会乱码的。
 */
//配置过滤路径
@WebFilter("/*")
public class CharacterEncondingFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        // 强制类型转换 (目的是为了使用 HttpServletRequest 的 getMethod 方法)
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;

        // 解决 Response 响应乱码问题
        response.setContentType("text/html;charset=utf-8");

        //3. 获取客户请求方式，如果是 post 请求方式我们需要解决获取请求参数乱码问题
        String method = request.getMethod();
        if("post".equalsIgnoreCase(method)){
            request.setCharacterEncoding("utf-8");
        }

        //解决完毕乱码之后记得要放行
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }

    @Override
    public void init(FilterConfig config) throws ServletException {

    }
}

f. CheckServlet

package com.regino.web.servlet;

import javax.imageio.ImageIO;
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 javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@WebServlet(name = "CheckServlet", urlPatterns = "/checkServlet")
public class CheckServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request,
                          HttpServletResponse response) throws ServletException, IOException {
        int width = 120;
        int height = 40;
        //首先创建一个画布
        BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        //创建当前画布的画笔
        Graphics gh = bufferedImage.getGraphics();

        //设置背景色颜色
        gh.setColor(Color.white);
        //绘画 背景
        gh.fillRect(0, 0, width, height);

        //设置边框的颜色
        gh.setColor(Color.red);
        //绘画边框
        gh.drawRect(0, 0, width - 1, height - 1);

        //定义一个random
        Random rd = new Random();
        //在画布上绘画验证码的内容
        String str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        //定义一个变量保存验证码
        String checkStr = "";
        for (int i = 1; i < 5; i++) {

            //设置字体
            Font font = new Font("宋体", Font.PLAIN, 28);
            gh.setFont(font);
            //设置字体的颜色
            gh.setColor(new Color(rd.nextInt(255), rd.nextInt(255), rd.nextInt(255)));
            //获取需要绘画的文字
            String s = str.charAt(rd.nextInt(str.length())) + "";
            //将字体画到画布上去
            gh.drawString(s, 10 + (i - 1) * 30, 30);
            checkStr += s;
        }

        //绘画障碍物
        for (int i = 1; i < 10; i++) {
            //设置线条的颜色
            gh.setColor(new Color(rd.nextInt(255), rd.nextInt(255), rd.nextInt(255)));
            //绘画线条
            gh.drawLine(rd.nextInt(width), rd.nextInt(height), rd.nextInt(width), rd.nextInt(height));
        }
        //将图片保存到session中
        HttpSession session = request.getSession();
        session.setAttribute("checkImg", checkStr);
        //将图片输出到前端
        /*
         * 第一个参数：需要输出的画布
         * 第二个参数：格式
         * 第三个参数：输出流
         */
        ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
    }
}

g. UserServlet

package com.regino.web.servlet;

import com.regino.domian.User;
import com.regino.service.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;

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;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import java.util.Map;

@WebServlet("/user")
public class UserServlet extends HttpServlet {

    private UserServiceImpl userServiceImpl = new UserServiceImpl();

    // 请求入口
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 判断请求 action
        String action = request.getParameter("action");

        if (action.equals("login")) {
            this.login(request, response);
        } else if (action.equals("add")) {
            this.add(request, response);
        } else if (action.equals("list")) {
            this.findAll(request, response);
        } else if (action.equals("findById")) {
            this.findById(request, response);
        } else if (action.equals("update")) {
            this.update(request, response);
        } else if (action.equals("delete")) {
            this.delete(request, response);
        }
    }

    // Login
    protected void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 获取请求参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String checkStr = request.getParameter("checkStr");
        String checkStrServer = (String) request.getSession().getAttribute("checkImg");
        if (checkStr.equalsIgnoreCase(checkStrServer)) {
            // 调用 service
            User user = userServiceImpl.login(username, password);
            if (user == null) {
                // 登陆失败
                request.setAttribute("msg", "用户名或密码错误！");
                request.getRequestDispatcher("/login.jsp").forward(request, response);
            } else {
                // 登陆成功
                request.getSession().setAttribute("loginUser", user);
                response.sendRedirect(request.getContextPath() + "/index.jsp");
            }
        } else {
            request.setAttribute("msg", "验证码错误！");
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }
    }

    // Create
    protected void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try {
            // 接收请求参数 map
            Map<String, String[]> parameterMap = request.getParameterMap();
            // 快速封装 User 实体
            User newUser = new User();
            BeanUtils.populate(newUser, parameterMap);  //如果该实体类没有action数据的时候，beanUtils不会给user封装的。
            // 调用 service 添加 User
            boolean isAdded = userServiceImpl.add(newUser);
            if (isAdded) {
                System.out.println("删除成功");
            } else {
                System.out.println("删除失败");
            }
            // 重定向到 Retrieve all
            response.sendRedirect(request.getContextPath() + "/user?action=list");
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }

    // Retrieve all
    protected void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 调用 service 查询
        List<User> list = userServiceImpl.findAll();
        // 将 List 存储到 Request 域
        request.setAttribute("list", list);
        // 转发到 list.jsp
        request.getRequestDispatcher("/list.jsp").forward(request, response);
    }

    // Retrieve
    protected void findById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 接收请求参数 id
        String id = request.getParameter("id");
        // 调用 service，根据 id 查询
        User user = userServiceImpl.findById(id);
        // 将 user 存储到 request 域
        request.setAttribute("user", user);
        // 转发到 update.jsp
        request.getRequestDispatcher("/update.jsp").forward(request, response);
    }

    // Update
    protected void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try {
            // 接收请求参数
            Map<String, String[]> parameterMap = request.getParameterMap();
            // 快速封装到 User 实体
            User newUser = new User();
            BeanUtils.populate(newUser, parameterMap);
            // 调用 service 更新
            boolean isUpdated = userServiceImpl.update(newUser);
            if (isUpdated) {
                System.out.println("更新成功");
            } else {
                System.out.println("更新失败");
            }
            // 重定向到 Retrieve all
            response.sendRedirect(request.getContextPath() + "/user?action=list");
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }

    // Delete
    protected void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 接收请求参数 ID
        String id = request.getParameter("id");
        // 调用 service 删除
        boolean isDeleted = userServiceImpl.delete(id);
        if (isDeleted) {
            System.out.println("删除成功");
        } else {
            System.out.println("删除失败");
        }
        // 重定向到 Retrieve all（再请求转发至 list.jsp）
        response.sendRedirect(request.getContextPath() + "/user?action=list");
    }
}

4. 前端代码

a. index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        ol li {
            list-style: none;
        }

        .list-inline {
            text-align: center;
        }
    </style>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<div class="container-fluid">
    <div class="col-md-3" style="padding-top:20px">
        <ol class="list-inline">
            <c:choose>
                <c:when test="${loginUser!=null}">
                    <li>欢迎，${loginUser.username}</li>
                    <a href="${pageContext.request.contextPath}/user?action=list" style="text-decoration:none;font-size:33px">用户列表</a>
                </c:when>
                <c:otherwise>
                    <%--"./login.jsp" 也可以--%>
                    <li><a href="login.jsp" style="text-decoration:none;font-size:33px">用户登陆</a></li>
                </c:otherwise>
            </c:choose>
        </ol>
    </div>
</div>
</body>
</html>

b. login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会员登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="css/style.css" type="text/css"/>

    <style>
        body {
            margin-top: 20px;
            margin: 0 auto;
        }

        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }

        .container .row div {
            /* position:relative;
                         float:left; */

        }

        font {
            color: #666;
            font-size: 22px;
            font-weight: normal;
            padding-right: 17px;
        }
    </style>
</head>
<body>

<!-- 引入header.jsp -->


<div class="container"
     style="width: 100%; height: 460px; background: #FF2C4C url('images/login.gif') no-repeat;">
    <div class="row">
        <div class="col-md-7">
            <!--<img src="./image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
        </div>

        <div class="col-md-5">
            <div
                    style="width: 440px; border: 1px solid #E7E7E7; padding: 20px 0 20px 30px; border-radius: 5px; margin-top: 60px; background: #fff;">
                <font>会员登录</font>USER LOGIN
                <div style="color: red;">${msg}</div>
                <%--由于 get 方式提交参数是需要拼接在 url 地址上的，那么是表单的 url 后面本身就已经有参数就会被覆盖。
                 post 方式不会在 url 地址上重新去拼接参数，所以 action 没有被覆盖。--%>
                <form class="form-horizontal" action="${pageContext.request.contextPath}/user" method="post">
                    <div class="form-group">
                        <input type="hidden" name="action" value="login"/>
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="username" name="username"
                                   placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="inputPassword" name="password"
                                   placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword2" class="col-sm-2 control-label">验证码</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="inputPassword2" name="checkStr"
                                   placeholder="请输入验证码">
                        </div>
                        <div class="col-sm-3">
                            <img src="${pageContext.request.contextPath}/checkServlet"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label> <input type="checkbox"> 自动登录
                                </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label>
                                <input type="checkbox"> 记住用户名
                            </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" width="100" value="登录" name="submit"
                                   style="background: url('./images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 引入footer.jsp -->

</body>
</html>

c. list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 style="text-align: center">用户信息列表</h3>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${list}" var="user">
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.password}</td>
                <td>
                    <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/user?action=findById&id=${user.id}">修改</a>
                    &nbsp;<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/user?action=delete&id=${user.id}">删除</a>
                </td>
            </tr>
        </c:forEach>
    </table>
    <h5 style="text-align: center"><a class="btn btn-default btn-sm" href="./add.jsp">添加</a></h5>
</div>
</body>
</html>

d. update.jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改用户</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
    <div class="container">
        <h3 style="text-align: center;">修改用户</h3>
        <form action="${pageContext.request.contextPath}/user?action=update" method="post">
            <div class="form-group">
                <label for="id">编号：</label>
                <input type="text" class="form-control" id="id" readonly="readonly" name="id" value="${user.id}">
            </div>

            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"/>
            </div>

            <div class="form-group">
                <label for="password">密码：</label>
                <input type="text" class="form-control" id="password" name="password" placeholder="请输入密码"/>
            </div>

            <div class="form-group" style="text-align: center">
                <input class="btn btn-primary" type="submit" value="提交"/>
                <input class="btn btn-default" type="reset" value="重置"/>
                <input class="btn btn-default" type="button" value="返回"/>
            </div>
        </form>
    </div>
</div>
</body>
</html>

e. add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加用户</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <center><h3>添加联系人页面</h3></center>
    <form action="${pageContext.request.contextPath}/user?action=add" method="post">
        <div class="form-group">
            <label for="username">编号：</label>
            <input type="text" class="form-control" id="id" name="id" placeholder="请输入编号">
        </div>

        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="text" class="form-control" id="password" name="password" placeholder="请输入密码">
        </div>

        <div class="form-group" style="text-align: center">
            <input class="btn btn-primary" type="submit" value="提交" />
            <input class="btn btn-default" type="reset" value="重置" />
            <input class="btn btn-default" type="button" value="返回" />
        </div>
    </form>
</div>
</body>
</html>

5. 配置文件

a. druid.properties

# 数据库基本四项
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/mvc
username=root
password=root

# 初始化个数
initialSize=5
# 最大连接个数
maxActive=10
# 等待时间，毫秒
maxWait=3000

b. web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
		  http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
           version="3.0">
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

6. 测试

a. 登录演示

b. 用户列表

c. 修改用户

d. 添加用户

e. 删除用户

---

原文链接：https://qwert.blog.csdn.net/article/details/106108118