列表查询,添加功能---JSP,servlet

10 篇文章 2 订阅
9 篇文章 4 订阅

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处理--%>
  	<a
	  href="${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;
	}
	@Override
	public 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;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		 //1.设置编码
		 req.setCharacterEncoding("utf-8");
		 //2.调用UserServiceimpl
		 USerService us=(USerService) new UserServiceImpl();
		 List<User> ul=us.findAll();  //查询的结果
		 //3.存储到request域中
		 req.setAttribute("list", ul);
		 //4.转发jsp页面list.jsp
		 req.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();
    @Override
	public 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));   //将参数变为整数
		
	}

	@Override
	public User findUserById(String idString) {
		//通过id来查询需要修改的用户信息	
		return userDao.findUserById(Integer.parseInt(idString));	
	}

	@Override
	public 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 exception
			e.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());
	    	
	    }
	@Override
	public void deluser(int id) {
		 //删除用户信息
		 String sql="delete from user where id=?";
		 jdbcTemplate.update(sql,id);
		
	}
	@Override
	public 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;	
	}
	@Override
	public 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>&nbsp;<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">&laquo;</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">&raquo;</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博客

  • 4
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值