乐趣区

关于java:用户信息列表展示案例

jiezi

〇、写在后面

本文是【黑马程序员】用户信息列表展现案例的实际。
本文实际所需材料（jar 包、页面、配置文件）下载地址为：案例材料（提取码：java）。

一、需要

用户信息的增删改查操作。

二、设计

技术选型：Servlet + JSP + MySQL + JDBCTempleat + Duird + BeanUtilS + Tomcat

数据库设计：

CREATE DATABASE demo2;
USE demo2;
CREATE TABLE user(
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(20) NOT NULL,
    gender VARCHAR(5),
    age INT,
    address VARCHAR(32),
    qq VARCHAR(20),
    email VARCHAR(50)
);

应用 SQLyog 图形治理 MySQL。

三、开发

（一）数据库环境

CREATE DATABASE demo2;
USE demo2;
CREATE TABLE user(
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(20) NOT NULL,
    gender VARCHAR(5),
    age INT,
    address VARCHAR(32),
    qq VARCHAR(20),
    email VARCHAR(50)
);

（二）我的项目环境

  1. 在 IDEA 中创立 JavaEE 我的项目。
  2. 在 IDEA 集成配置 Tomcat 服务器。
  3. 导入 jar 包。
    新建 src/main/webapp/WEB-INF/lib 文件夹，将下载材料中的 jar 包 复制到 lib 文件夹中。
    全选中后，右键 -> Add as Library。
  4. 增加案例页面。
    将下载材料中 页面 文件夹中的所有文件、文件夹复制粘贴到本我的项目的 src/main/webapp 文件夹中。
    我的项目目录如下：

  5. 批改配置文件。
    将下载材料中的 配置文件 中的 druid.properties 复制粘贴到 src/main/resources 文件夹中。批改配置文件内容（数据库名、MySQL 用户名、MySQL 明码）：

    driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql:///demo2
username=root
password= 你的数据库明码
# 初始化连贯数量
initialSize=5
# 最大连接数
maxActive=10
# 最大等待时间
maxWait=3000
  6. 创立包。在 src/main/java/com/.../demo2 中 domain、web、service、dao、util 包。
  7. 测试。
    启动 Tomcat 服务器，拜访http://localhost:8080/ 虚构门路 /index.html。（虚构门路为第二步中 Tomcat 配置的虚构门路。本文的虚构门路为demo2。）
    如能失常交互则我的项目环境搭建胜利。

（三）编码

domain/User.java

依据数据库设计编写 User 实体类。应用 IDEA 快捷键 Alt + Insert 疾速生成结构器、Get/Set 办法、toString 办法。

package com.shadowck.demo2.domain;

public class User {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String address;
    private String qq;
    private String email;

    public User() {}

    public User(int id, String name, String gender, int age, String address, String qq, String email) {
        this.id = id;
        this.name = name;
        this.gender = gender;
        this.age = age;
        this.address = address;
        this.qq = qq;
        this.email = email;
    }

    public int getId() {return id;}

    public void setId(int id) {this.id = id;}

    public String getName() {return name;}

    public void setName(String name) {this.name = name;}

    public String getGender() {return gender;}

    public void setGender(String gender) {this.gender = gender;}

    public int getAge() {return age;}

    public void setAge(int age) {this.age = age;}

    public String getAddress() {return address;}

    public void setAddress(String address) {this.address = address;}

    public String getQq() {return qq;}

    public void setQq(String qq) {this.qq = qq;}

    public String getEmail() {return email;}

    public void setEmail(String email) {this.email = email;}

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                ", address='" + address + '\'' +
                ", qq='" + qq + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

util/JDBCUtils.java

将下载材料中 配置文件 文件夹中 JDBCUtils.java 的内容复制粘贴即可。

package com.shadowck.demo2.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();
    }
}

dao/UserDAO.java

编写用户操作的 DAO。

package com.shadowck.demo2.dao;

import com.shadowck.demo2.domain.User;

import java.util.List;

public interface UserDAO {public List<User> findAll();
    
}

dao/impl/UserDAOImpl.java

package com.shadowck.demo2.dao.impl;

import com.shadowck.demo2.dao.UserDAO;
import com.shadowck.demo2.domain.User;
import com.shadowck.demo2.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;

public class UserDAOImpl implements UserDAO {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public List<User> findAll() {

        //1. 定义 sql
        String sql = "SELECT * FROM user";
        List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));

        return users;
    }
}

service/UserService.java

编写用户治理的业务接口。

package com.shadowck.demo2.service;

import com.shadowck.demo2.domain.User;

import java.util.List;

public interface UserService {public List<User> findAll();
}

service/impl/UserServiceImpl.java

package com.shadowck.demo2.service.Impl;

import com.shadowck.demo2.dao.UserDAO;
import com.shadowck.demo2.dao.impl.UserDAOImpl;
import com.shadowck.demo2.domain.User;
import com.shadowck.demo2.service.UserService;

import java.util.List;

public class UserServiceImpl implements UserService {private UserDAO dao = new UserDAOImpl();
    
    @Override
    public List<User> findAll() {
        // 调用 DAO
        return dao.findAll();}
}

index.jsp

将 index.html 的内容复制后进行改变。留神应用 EL 表达式动静获取虚拟目录：${pageContext.request.contextPath}。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!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>

    <!-- 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>
    <script type="text/javascript">
    </script>
</head>
<body>
<div align="center">
    <a
            href="${pageContext.request.contextPath}/userListServlet" style="text-decoration:none;font-size:33px"> 查问所有用户信息
    </a>
</div>
</body>
</html>

web/servlet/UserListServlet.java

package com.shadowck.demo2.web.servlet;

import com.shadowck.demo2.domain.User;
import com.shadowck.demo2.service.Impl.UserServiceImpl;

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.util.List;

@WebServlet("/userListServlet")
public class UserListServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //1. 调用 userService 实现查问。UserServiceImpl service = new UserServiceImpl();
        List<User> users = service.findAll();

        //2. 将 List 存入 request 域
        req.setAttribute("user", users);

        //3. 转发到 list.jsp
        req.getRequestDispatcher("/list.jsp").forward(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);
    }
}

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-2.1.0.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>
            <th> 籍贯 </th>
            <th>QQ</th>
            <th> 邮箱 </th>
            <th> 操作 </th>
        </tr>

        <c:forEach items="${users}" var="user" varStatus="s">
            <tr>
                <td>${s.count}</td>
                <td>${user.name}</td>
                <td>${user.gender}</td>
                <td>${user.age}</td>
                <td>${user.address}</td>
                <td>${user.qq}</td>
                <td>${user.email}</td>
                <td><a class="btn btn-default btn-sm" href="update.html"> 批改 </a>&nbsp;<a class="btn btn-default btn-sm" href=""> 删除 </a></td>
            </tr>
        </c:forEach>

        <tr>
            <td colspan="8" align="center"><a class="btn btn-primary" href="add.html"> 增加联系人 </a></td>
        </tr>
    </table>
</div>
</body>
</html>
退出移动版