• Java后端 學(xué)習(xí)路線 筆記匯總表【黑馬程序員】

JavaWeb-綜合案例(用戶信息)-學(xué)習(xí)筆記01【列表查詢】

JavaWeb-綜合案例(用戶信息)-學(xué)習(xí)筆記02【登錄功能】

JavaWeb-綜合案例(用戶信息)-學(xué)習(xí)筆記03【添加刪除修改功能】

JavaWeb-綜合案例(用戶信息)-學(xué)習(xí)筆記04【刪除選中功能】

JavaWeb-綜合案例(用戶信息)-學(xué)習(xí)筆記05【分頁查詢功能】

JavaWeb-綜合案例(用戶信息)-學(xué)習(xí)筆記06【復(fù)雜條件查詢功能】

目錄

三層架構(gòu)：軟件設(shè)計架構(gòu)

案例：用戶信息列表展示

步驟分析

案例資料

jar包

配置文件

頁面

數(shù)據(jù)庫設(shè)計

列表查詢分析

案例效果

案例代碼

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

---

三層架構(gòu)：軟件設(shè)計架構(gòu)

界面層(表示層)：用戶看的得界面。用戶可以通過界面上的組件和服務(wù)器進(jìn)行交互。

業(yè)務(wù)邏輯層：處理業(yè)務(wù)邏輯的。

數(shù)據(jù)訪問層：操作數(shù)據(jù)存儲文件。

三層架構(gòu)

案例：用戶信息列表展示

步驟分析

1. 需求：用戶信息的增刪改查操作
2. 設(shè)計：
?? ?1. 技術(shù)選型：Servlet + JSP + MySQL + JDBCTempleat + Duird + BeanUtilS + tomcat
?? ?2. 數(shù)據(jù)庫設(shè)計：
?? ??? ?create database day17; -- 創(chuàng)建數(shù)據(jù)庫
?? ??? ?use day17; ?? ??? ??? ? ? -- 使用數(shù)據(jù)庫
?? ??? ?create table user( ? -- 創(chuàng)建表
?? ??? ??? ?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. 開發(fā)：
?? ?1. 環(huán)境搭建
?? ??? ?1. 創(chuàng)建數(shù)據(jù)庫環(huán)境
?? ??? ?2. 創(chuàng)建項目，導(dǎo)入需要的jar包
?? ?2. 編碼
4. 測試
5. 部署運維

案例資料

jar包

配置文件

頁面

數(shù)據(jù)庫設(shè)計

user表數(shù)據(jù)：

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 # 初始化連接數(shù)量 initialSize=5 # 最大連接數(shù) maxActive=10 # 最大等待時間 maxWait=3000

package 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操作數(shù)據(jù)庫...//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() {//調(diào)用Dao完成查詢return dao.findAll();} }

UserService.java

package cn.itcast.service;import cn.itcast.domain.User;import java.util.List;/*** 用戶管理的業(yè)務(wù)接口*/ 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加載配置文件，獲取字節(jié)輸入流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.調(diào)用UserService完成查詢UserService service = new UserServiceImpl();List<User> users = service.findAll();//2.將list存入request域request.setAttribute("users", users);//3.轉(zhuǎn)發(fā)到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. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入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> <!-- 網(wǎng)頁使用的語言 --> <html lang="zh-CN"> <head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的瀏覽器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport視口：網(wǎng)頁可以根據(jù)設(shè)置的寬度自動進(jìn)行適配，在瀏覽器的內(nèi)部虛擬一個容器，容器的寬度與設(shè)備的寬度相同。width: 默認(rèn)寬度與設(shè)備的寬度相同initial-scale: 初始的縮放比，為1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>用戶信息管理系統(tǒng)</title><!-- 1. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入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">添加聯(lián)系人</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. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入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> <!-- 網(wǎng)頁使用的語言 --> <html lang="zh-CN"> <head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的瀏覽器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport視口：網(wǎng)頁可以根據(jù)設(shè)置的寬度自動進(jìn)行適配，在瀏覽器的內(nèi)部虛擬一個容器，容器的寬度與設(shè)備的寬度相同。width: 默認(rèn)寬度與設(shè)備的寬度相同initial-scale: 初始的縮放比，為1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>添加用戶</title><!-- 1. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"><center><h3>添加聯(lián)系人頁面</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> <!-- 網(wǎng)頁使用的語言 --> <html lang="zh-CN"> <head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的瀏覽器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport視口：網(wǎng)頁可以根據(jù)設(shè)置的寬度自動進(jìn)行適配，在瀏覽器的內(nèi)部虛擬一個容器，容器的寬度與設(shè)備的寬度相同。width: 默認(rèn)寬度與設(shè)備的寬度相同initial-scale: 初始的縮放比，為1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>用戶信息管理系統(tǒng)</title><!-- 1. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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">添加聯(lián)系人</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. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入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>&times;</span></button><strong>登錄失敗!</strong></div> </div> </body> </html>

update.html

<!DOCTYPE html> <!-- 網(wǎng)頁使用的語言 --> <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;">修改聯(lián)系人</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>

? ? ? 《醒世詩》明朝狀元·羅殿

急急忙忙苦追求，寒寒暖暖度春秋。
朝朝暮暮營家計，昧昧昏昏為己謀。
是是非非何日了，煩煩惱惱幾時休。
明明白白一條路，萬萬千千不肯修。

總結(jié)

以上是生活随笔為你收集整理的JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。