共计 7761 个字符,预计需要花费 20 分钟才能阅读完成。
〇、写在后面
本文是【黑马程序员】用户信息列表展现案例的实际。
本文实际所需材料(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.Driver url=jdbc:mysql:///demo2 username=root password= 你的数据库明码 # 初始化连贯数量 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>
正文完