〇、写在后面
本文是【黑马程序员】用户信息列表展现案例的实际。
本文实际所需材料（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));（二）我的项目环境
- 在IDEA中创立JavaEE我的项目。
- 在IDEA集成配置Tomcat服务器。
- 导入jar包。
新建src/main/webapp/WEB-INF/lib文件夹，将下载材料中的jar包复制到lib文件夹中。
全选中后，右键 -> Add as Library。 - 增加案例页面。
将下载材料中页面文件夹中的所有文件、文件夹复制粘贴到本我的项目的src/main/webapp文件夹中。
我的项目目录如下： 批改配置文件。
将下载材料中的配置文件中的druid.properties复制粘贴到src/main/resources文件夹中。批改配置文件内容（数据库名、MySQL用户名、MySQL明码）：driverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql:///demo2username=rootpassword=你的数据库明码# 初始化连贯数量initialSize=5# 最大连接数maxActive=10# 最大等待时间maxWait=3000- 创立包。在
src/main/java/com/.../demo2中domain、web、service、dao、util包。 - 测试。
启动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> <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>