JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】
生活随笔
收集整理的这篇文章主要介绍了
JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
- Java后端 学习路线 笔记汇总表【黑马程序员】
目录
三层架构：软件设计架构
案例：用户信息列表展示
步骤分析
案例资料
jar包
配置文件
页面
数据库设计
列表查询分析
案例效果
案例代码
druid.properties
package cn.itcast.dao;
UserDaoImpl.java
UserDao.java
package cn.itcast.domain;
User.java
package cn.itcast.service;
UserServiceImpl.java
UserService.java
package cn.itcast.util;
JDBCUtils.java
package cn.itcast.web;
UserListServlet.java
web页面
index.jsp
list.jsp
index.html
add.html
list.html
login.html
update.html
三层架构：软件设计架构
案例：用户信息列表展示
步骤分析
1. 需求：用户信息的增删改查操作
2. 设计：
1. 技术选型：Servlet + JSP + MySQL + JDBCTempleat + Duird + BeanUtilS + tomcat
2. 数据库设计：
create database day17; -- 创建数据库
use day17; -- 使用数据库
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)
);
3. 开发：
1. 环境搭建
1. 创建数据库环境
2. 创建项目，导入需要的jar包
2. 编码
4. 测试
5. 部署运维
案例资料
jar包
配置文件
页面
数据库设计
user表数据：
INSERT INTO `user`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) VALUES (1,'张三','男',13,'陕西','12345','zhangsan@itcast.cn');
INSERT INTO `user`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) VALUES (2,'李四','女',15,'北京','88888','ls@itcast.cn');
列表查询分析
列表查询分析案例效果
案例代码
druid.properties
driverClassName=com.mysql.jdbc.Driver url=jdbc:mysql:///day17 username=root password=root # 初始化连接数量 initialSize=5 # 最大连接数 maxActive=10 # 最大等待时间 maxWait=3000package cn.itcast.dao;
UserDaoImpl.java
package cn.itcast.dao.impl;import cn.itcast.dao.UserDao; import cn.itcast.domain.User; import cn.itcast.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());@Overridepublic List<User> findAll() {//使用JDBC操作数据库...//1.定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;} }UserDao.java
package cn.itcast.dao;import cn.itcast.domain.User;import java.util.List;/*** 用户操作的DAO*/ public interface UserDao {public List<User> findAll(); }package cn.itcast.domain;
User.java
package cn.itcast.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 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;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +", gender='" + gender + '\'' +", age=" + age +", address='" + address + '\'' +", qq='" + qq + '\'' +", email='" + email + '\'' +'}';} }package cn.itcast.service;
UserServiceImpl.java
package cn.itcast.service.impl;import cn.itcast.dao.UserDao; import cn.itcast.dao.impl.UserDaoImpl; import cn.itcast.domain.User; import cn.itcast.service.UserService;import java.util.List;public class UserServiceImpl implements UserService {private UserDao dao = new UserDaoImpl();@Overridepublic List<User> findAll() {//调用Dao完成查询return dao.findAll();} }UserService.java
package cn.itcast.service;import cn.itcast.domain.User;import java.util.List;/*** 用户管理的业务接口*/ public interface UserService {/*** 查询所有用户信息** @return*/public List<User> findAll(); }package cn.itcast.util;
JDBCUtils.java
package cn.itcast.util;import com.alibaba.druid.pool.DruidDataSourceFactory;import javax.sql.DataSource; 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();}}package cn.itcast.web;
UserListServlet.java
package cn.itcast.web.servlet;import cn.itcast.domain.User; import cn.itcast.service.UserService; import cn.itcast.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 {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.调用UserService完成查询UserService service = new UserServiceImpl();List<User> users = service.findAll();//2.将list存入request域request.setAttribute("users", users);//3.转发到list.jsprequest.getRequestDispatcher("/list.jsp").forward(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);} }web页面
index.jsp
<%@ 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>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>index.html
<!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="list.html" style="text-decoration:none;font-size:33px">查询所有用户信息</a> </div> </body> </html>add.html
<!-- HTML5文档--> <!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> </head> <body> <div class="container"><center><h3>添加联系人页面</h3></center><form action="" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"></div><div class="form-group"><label>性别：</label><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄"></div><div class="form-group"><label for="address">籍贯：</label><select name="address" class="form-control" id="jiguan"><option value="广东">广东</option><option value="广西">广西</option><option value="湖南">湖南</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" name="email" 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>list.html
<!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><tr><td>1</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>2</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>3</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>4</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>5</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加联系人</a></td></tr></table> </div> </body> </html>login.html
<!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 class="container" style="width: 400px;"><h3 style="text-align: center;">管理员登录</h3><form action="login" method="post"><div class="form-group"><label for="user">用户名：</label><input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"/></div><div class="form-group"><label for="password">密码：</label><input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/></div><div class="form-inline"><label for="vcode">验证码：</label><input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/><a href="javascript:refreshCode()"><img src="vcode" title="看不清点击刷新" id="vcode"/></a></div><hr/><div class="form-group" style="text-align: center;"><input class="btn btn btn-primary" type="submit" value="登录"></div></form><!-- 出错显示的信息框 --><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert"><span>×</span></button><strong>登录失败!</strong></div> </div> </body> </html>update.html
<!DOCTYPE html> <!-- 网页使用的语言 --> <html lang="zh-CN"> <head><base href="<%=basePath%>"/><!-- 指定字符集 --><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" style="width: 400px;"><h3 style="text-align: center;">修改联系人</h3><form action="" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" readonly="readonly" placeholder="请输入姓名"/></div><div class="form-group"><label>性别：</label><input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女</div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄"/></div><div class="form-group"><label for="address">籍贯：</label><select name="address" class="form-control"><option value="广东">广东</option><option value="广西">广西</option><option value="湖南">湖南</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" name="email" 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>《醒世诗》明朝状元·罗殿
急急忙忙苦追求，寒寒暖暖度春秋。
朝朝暮暮营家计，昧昧昏昏为己谋。
是是非非何日了，烦烦恼恼几时休。
明明白白一条路，万万千千不肯修。
总结
以上是生活随笔为你收集整理的JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： IntelliJ IDEA 导入 Int
- 下一篇： JavaWeb-综合案例(用户信息)-学