當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
列表查询，添加功能---JSP，servlet
生活随笔
收集整理的這篇文章主要介紹了
列表查询，添加功能---JSP，servlet
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.列表查詢以及添加功能的需求
列表查詢功能：
*用戶可以通過點擊一個超鏈接或者按鈕，經過UserListServlet 類處理后，跳轉到查詢后的界面list.jsp
*使用Druid數據庫連接池技術,操作mysql，day17數據庫中user表
* 使用JdbcTemplate技術封裝JDBC
*編寫UserListServlet 類，來響應用戶點擊查詢的請求，將請求提交給service層處理，然后將處理后的數據，存儲到request域或者session域中，之后跳轉到list.jsp頁面
*service層，將數據提交給dao層處理。
*dao層：利用JdbcTemplate技術操作數據庫。
添加功能：
*用戶可以通過點擊一個超鏈接或者按鈕，跳轉到增加的界面add.jsp。
*創建一個UserListServlet 類來處理add.jsp添加的信息。
*封裝add.jsp中的數據，然后將它插入到數據庫中
*UserListServlet 類處理add.jsp后，重新跳轉到UserListServlet 類中，重新查詢。
2.分析
三.開發步驟?
1.創建項目，配置文件，導入相關的jar包
? ? 參考前面的登錄功能：用jsp實現登錄界面_籠中鳥-CSDN博客
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),eamil VARCHAR(50) );
?3.創建前端查詢的jsp頁面?
（效果圖如下）
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!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"><%--點擊按鈕就調轉到userListServlet處理--%><ahref="${pageContext.request.contextPath }/userListServlet" style="text-decoration:none;font-size:33px">查詢所有用戶信息</a></div></body> </html>4.在domain包下創建類User?---存儲客戶信息
package 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 + "]";}}5.寫utils包下的工具類JDBCUtils?，主要是與mysql數據庫連接，創建數據庫連接池對象
package utils; 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();} }6.在web層創建userListServlet
?用來處理前端（前面第三點）的請求
package web.servlet;import java.io.IOException; import java.util.List;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 domain.User; import service.USerService; import service.UserServiceImpl; @WebServlet("/userListServlet") public class UserListServlet extends HttpServlet{/*** */private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubthis.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.設置編碼req.setCharacterEncoding("utf-8");//2.調用UserServiceimplUSerService us=(USerService) new UserServiceImpl();List<User> ul=us.findAll(); //查詢的結果//3.存儲到request域中req.setAttribute("list", ul);//4.轉發jsp頁面list.jspreq.getRequestDispatcher("/list.jsp").forward(req, resp); } }7.在service層UserService接口，UserServiceImpl實現類
package service; //user的業務接口import java.util.List; import domain.User;public interface USerService {//定義業務查詢所有用戶的抽象方法public List<User> findAll();//定義業務添加抽象方法public void addUser(User user);//定義刪除的抽象方法public void deluser(String id);//按id查詢用戶信息的抽象方法public User findUserById(String idString);//修改用戶信息抽象方法public void updateuser(User user);} package service;import java.util.List;import dao.UserDao; import dao.UserDaoImpl; import domain.User;public class UserServiceImpl implements USerService{UserDao userDao=new UserDaoImpl();@Overridepublic List<User> findAll() {//調用dao,操作數據庫//查詢所有用戶的信息return userDao.findAll();}public void addUser(User user) {//調用添加用戶的方法userDao.addUser(user);}public void deluser(String id) {//刪除用戶信息userDao.deluser(Integer.parseInt(id)); //將參數變為整數}@Overridepublic User findUserById(String idString) {//通過id來查詢需要修改的用戶信息 return userDao.findUserById(Integer.parseInt(idString)); }@Overridepublic void updateuser(User user) {// 根據update.jsp中的用戶信息修改數據庫的用戶信息userDao.updateuser(user); } }8.在Dao層UserDao接口，UserDaoImpl實現類
與數據庫之間進行操作
package dao;import java.util.List;import domain.User;public interface UserDao {public List<User> findAll(); //抽象方法public void addUser(User user);public void deluser(int id);public User findUserById(int parseInt);public void updateuser(User user);} package dao;import java.util.List;import javax.xml.transform.Templates;import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate;import domain.LoginUser; import domain.User; import utils.JDBCUtils;public class UserDaoImpl implements UserDao{JdbcTemplate jdbcTemplate =new JdbcTemplate(JDBCUtils.getDataSource());public List<User> findAll() {// 操作數據庫,查詢所有用戶的信息String sql="select * from user";List<User> users=jdbcTemplate.query(sql,new BeanPropertyRowMapper(User.class));return users;}public LoginUser checkLoginUser( LoginUser loginUser) {//查詢登錄用戶信息String sqlString="select* from loginuser where username=? and password=?";//System.out.println("111"+loginUser);try {LoginUser lu=(LoginUser) jdbcTemplate.queryForObject(sqlString, new BeanPropertyRowMapper<LoginUser>(LoginUser.class),loginUser.getUserName(),loginUser.getPassword());return lu;} catch (Exception e) {// TODO: handle exceptione.printStackTrace();return null;} }public void addUser(User user) {//調用添加用戶的方法，//使用sql語句String sql="insert into user values(null,?,?,?,?,?,?)";jdbcTemplate.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail());}@Overridepublic void deluser(int id) {//刪除用戶信息String sql="delete from user where id=?";jdbcTemplate.update(sql,id);}@Overridepublic User findUserById(int parseInt) {//根據id查詢用戶的信息String sql="select * from user where id=?";User user=jdbcTemplate.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),parseInt);return user; }@Overridepublic void updateuser(User user) {// 根據update.jsp中的用戶信息修改數據庫的用戶信息String sql="update user set name=?,gender=?,age=?,address=?,qq=?,email=? where id=?";jdbcTemplate.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail(),user.getId()); }}9.編寫查詢后的list.jsp頁面
將查詢的數據庫所有用戶信息封裝到user中，存儲到request域中
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@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><script type="text/javascript">function deluser(i) {//用戶安全提示if(confirm("您確定需要刪除嗎?")){location.href="${pageContext.request.contextPath }/delUserServlet?id="+i;}}</script> </head> <body> <div class="container"><h3 style="text-align: center">用戶信息列表</h3><div style="float: left;"><form class="form-inline"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍貫</label><input type="text" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">郵箱</label><input type="email" class="form-control" id="exampleInputEmail2" ></div><button type="submit" class="btn btn-default">查詢</button></form></div><div style="float: right; margin: 5px;"> <a class="btn btn-primary" href="${pageContext.request.contextPath }/add.jsp">添加聯系人</a><a class="btn btn-primary" href="delete.jsp">刪除選中</a> </div><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox"></th><th>編號</th><th>姓名</th><th>性別</th><th>年齡</th><th>籍貫</th><th>QQ</th><th>郵箱</th><th>操作</th></tr><c:forEach items="${list}" var="user" varStatus="s"><tr><td><input type="checkbox"></td><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="${pageContext.request.contextPath }/queryupdate?id=${user.id}">修改</a> <a class="btn btn-default btn-sm"href="javascript:deluser(${user.id});" >刪除</a></td></tr></c:forEach></table><div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li><span style="font-size: 25px;margin-left: 5px;">共16條記錄，共4頁</span></ul></nav></div> </div> </body> </html>展示效果：
?注意：這里修改，刪除，添加功能還沒實現，只是單純顯示所有用戶這個頁面
其他：
? 在jsp頁面中查詢用到標簽庫jstl,? 所以必須首先導入jstl庫
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
標簽：
1.? ?<c:if></c:if>,???
<c:if test="${number %2 !=0}">
?? ??? ??? ??? ? ? ${number}是奇數
?? ??? ??? ??? ?</c:if>
注意：
?? ? ? ? ? ?? ??? ? * c:if標簽沒有else情況，想要else情況，則可以在定義一個c:if標簽
2.? ?<c:forEach></c:forEach>
容器遍歷：l
屬性：
?? ??? ??? ? ? ?items : 容器對象
?? ??? ??? ??? ?var ? : 容器中元素的臨時變量
?? ??? ??? ??? ?varStatus ?:循環狀態對象
?? ??? ??? ??? ? ? ? ?index ： 容器中的索引，從0開始
?? ??? ??? ??? ??? ? ?count ： 循環次數 ，從1開始
?? ??? ??? ??? ??? ? ?
?? ??? ??? ??? ?<c:forEach items="${list}" var="str" varStatus="s">
?? ??? ??? ??? ? ? ${s.index} ${s.count} ${str}<br>
?? ??? ??? ??? ?</c:forEach>
示例：
<c:forEach items="${l}" ?var="s" varStatus="n">
普通遍歷：
foreach:相當于java代碼的for語句
?? ??? ? ? ? ? ?屬性：
?? ??? ??? ??? ? ? begin ?：開始
?? ??? ??? ??? ? ? emd ? ?: 結束
?? ??? ??? ??? ? ? var ? ?: 變量名
?? ??? ??? ??? ? ? step ? : ?步長
?? ??? ??? ??? ? ? varStatus ?: 循環狀態對象
?? ??? ??? ??? ? ? ? ? ?index ?:容器中元素的索引，從0開始
?? ??? ??? ??? ??? ??? ?count : 循環次數 ?從1開始
示例：
?<c:forEach begin="1" end="10" var="i" step="1">${i}<br></c:forEach>?? ? ??
3.?choose:相當于java代碼的switch語句
?使用choose標簽聲明 ? ? ? ? ?? ??? ??? ?相當于switch聲明
? ? ? ? ? ? 2. 使用when標簽做判斷 ? ? ? ? ?? ??? ??? ?相當于case
? ? ? ? ? ? 3. 使用otherwise標簽做其他情況的聲明 ? ??? ?相當于default
示例：
? ? ? ? ? ? <c:choose>
? ? ? ? ? ? ? ? ? <c:when test="${number==1 }">星期一</c:when>
? ? ? ? ? ? ? ? ? <c:when test="${number==2 }">星期二</c:when>
? ? ? ? ? ? ? ? ? <c:when test="${number==3 }">星期三</c:when>
? ? ? ? ? ? ? ? ? <c:otherwise>${number}數字錯誤</c:otherwise>
?? ??? ??? ?</c:choose>
添加功能? --下一篇》》》》添加功能---jsp,servlet_籠中鳥-CSDN博客
總結
以上是生活随笔為你收集整理的列表查询，添加功能---JSP，servlet的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用jsp实现登录界面
- 下一篇： 初学JSON