用户信息管理系统（Web实践项目）
2024-07-02 07:26:46
文章目录
- 一、简单功能
- 1.列表查询
- 2.登录
- 3.添加
- 4.删除
- 5.修改
- 二、复杂功能
- 1.删除选中
- 2.分页查询
- 3.复杂条件查询
一、简单功能
1.列表查询
2.登录
登录时要先校验验证码是否正确，再去校验账号密码，密码正确后将用户存入session。
前端代码：
<script type="text/javascript">//切换验证码function refreshCode() {//1.获取验证码图片对象var vcode=document.getElementById("vcode");//2.设置其src属性，加时间戳vcode.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();}</script>
后端servlet代码：
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.设置编码request.setCharacterEncoding("utf-8");//2.获取数据//2.1获取用户填写的验证码String verifycode = request.getParameter("verifycode");//3.验证码校验HttpSession session = request.getSession();String checkcode_server =(String) session .getAttribute("CHECKCODE_SERVER");session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性if(!checkcode_server.equalsIgnoreCase(verifycode)){//验证码不正确//提示信息request.setAttribute("login_msg","验证码错误!");//跳转登录页面request.getRequestDispatcher("/login.jsp").forward(request,response);return;}Map<String, String[]> map = request.getParameterMap();//4.封装user对象User user=new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//5.调用Service查询UserService service=new UserServiceImpl();User loginUser =service.login(user);//6.判断是否登录成功if(loginUser !=null){//登录成功//将用户存入sessionsession.setAttribute("user",loginUser);//跳转页面response.sendRedirect(request.getContextPath()+"/index.jsp");}else{//登录失败//提示信息request.setAttribute("login_msg","用户名或密码错误!");//跳转登录页面request.getRequestDispatcher("/login.jsp").forward(request,response);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}测试结果：
用户名或密码错误
验证码错误
验证码，用户名和密码都输入正确后会进入下一个页面
3.添加
前端代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!-- 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="${pageContext.request.contextPath}/addUserServlet" method="post" id="form"><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="gender" value="男" checked="checked"/>男<input type="radio" name="gender" 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="address"><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" id="qq" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" id="email" 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>
后端代码：
@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.设置编码request.setCharacterEncoding("utf-8");//2.获取参数Map<String, String[]> map = request.getParameterMap();//3.封装对象User user = new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//4.调用service保存UserService service=new UserServiceImpl();service.addUser(user);//5.跳转到userListServletresponse.sendRedirect(request.getContextPath()+"/findUserByPageServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}4.删除
删除信息时，给出提示，避免用户误删
前端代码：
function deleteUser(id) {//用户安全提示if(confirm("您确定要删除吗？")){//访问路径location.href="${pageContext.request.contextPath}/delUserServlet?id="+id;}}后端代码：
@WebServlet("/delSelectedServlet")
public class DelSelectedServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取所有的idString[] ids = request.getParameterValues("uid");//调用service删除UserService service = new UserServiceImpl();service.delSelectedUser(ids);//3.跳转查询所有servletresponse.sendRedirect(request.getContextPath()+"/findUserByPageServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}5.修改
修改用户信息要使数据能够回显信息，方便用户修改信息
前端代码：
设置隐藏域
<%--隐藏域 提交id--%><input type="hidden" name="id" value="${user.id}">
后端代码：
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取idString id =request.getParameter("id");//2.调用Service查询UserService service = new UserServiceImpl();User user = service.findUserById(id);//3.将user存入requestrequest.setAttribute("user",user);//4.转发到update.jsprequest.getRequestDispatcher("/update.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}@WebServlet("/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.设置编码request.setCharacterEncoding("utf-8");//2.获取mapMap<String, String[]> map = request.getParameterMap();//3，封装对象User user =new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//4.调用Service修改UserService service = new UserServiceImpl();service.updateUser(user);//跳转到查询所有Servletresponse.sendRedirect(request.getContextPath()+"/findUserByPageServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}二、复杂功能
1.删除选中
可以勾选多条数据进行删除
前端代码：
<script>window.onload = function () {//给删除选中按钮添加的单击事件document.getElementById("delSelected").onclick = function () {if(confirm("您确定要删除选中条目吗？")){var flag =false;//判断是否有选中条目var cbs = document.getElementsByName("uid");for(var i =0; i<cbs.length;i++){if(cbs[i].checked ) {//有一个条目选中了flag =true;break;}}if(flag){//所有条目被选中//表单提交document.getElementById("form").submit();}}}//1.获取第一个iddocument.getElementById("firstCb").onclick = function () {//2.获取下边列表中所有的cbvar cbs = document.getElementsByName("uid");//3.遍历for(var i =0; i<cbs.length;i++){//设置这些cbs[i]的checked状态 = firstCb.checkedcbs[i].checked = this.checked;}}}</script>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="text" name="email" value="${condition.email[0]}" 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="javascript:void(0);"id="delSelected">删除选中</a></div><form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post"><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox" id="firstCb"></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${pb.list}" var="user" varStatus="s"><tr><td><input type="checkbox" name="uid" value="${user.id}"></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}/findUserServlet?id=${user.id}">修改</a> <a class="btn btn -default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td></tr></c:forEach>
后端代码：
servlet代码：
@WebServlet("/delSelectedServlet")
public class DelSelectedServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取所有的idString[] ids = request.getParameterValues("uid");//调用service删除UserService service = new UserServiceImpl();service.delSelectedUser(ids);//3.跳转查询所有servletresponse.sendRedirect(request.getContextPath()+"/findUserByPageServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}
service代码:
public void delSelectedUser(String[] ids) {if(ids != null && ids.length > 0){//1.遍历数组for(String id :ids){//2.调用dao删除dao.delete(Integer.parseInt(id));}}}
2.分页查询
将数据分页查询，可以减轻服务器的开销，提升了用户的体验。
先创建分页对象，pageBean实体类
public class PageBean<T> {private int totalCount;//总记录数private int totalPage;//总页码private List<T> list;//每页数据private int currentPage;//当前页码private int rows;//每页显示的记录数...}
前端代码：
<div><nav aria-label="Page navigation"><ul class="pagination"><c:if test="${pb.currentPage == 1}"><li class="disabled"></c:if><c:if test="${pb.currentPage != 1}"><li></c:if><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous"><span aria-hidden="true">«</span></a></li><c:forEach begin="1" end="${pb.totalPage}" var="i"><c:if test="${pb.currentPage == i}"><li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if><c:if test="${pb.currentPage != i}"><li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if></c:forEach><c:if test="${pb.currentPage == pb.totalPage}"><li class="disabled"></c:if><c:if test="${pb.currentPage != pb.totalPage}"><li></c:if><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">»</span></a></li><span style="font-size: 25px;margin-left:5px; ">共${pb.totalCount}条记录，共${pb.totalPage}页</span></ul></nav></div>
后端代码：
servlet：
@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");//1.获取参数String currentPage = request.getParameter("currentPage");//当前页码String rows = request.getParameter("rows");//每页显示条数if(currentPage == null || "".equals(currentPage) ){currentPage = "1";}if(rows == null || "".equals(rows)){rows = "5";}//获取条件查询参数Map<String, String[]> condition = request.getParameterMap();//2.调用service查询UserService service =new UserServiceImpl();PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);System.out.println(pb);//3.将PageBean存入requestrequest.setAttribute("pb",pb);request.setAttribute("condition",condition);//将查询条件存入request//4.转发到list.jsprequest.getRequestDispatcher("/list.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}service:
@Overridepublic PageBean<User> findUserByPage(String _currentPage, String _rows, Map<String, String[]> condition) {int currentPage = Integer.parseInt(_currentPage);int rows = Integer.parseInt(_rows);if(currentPage <=0){currentPage = 1;}//1.创建空的PageBean对象PageBean<User> pb = new PageBean<User>();//2.调用dao查询总记录数int totalCount = dao.findTotalCount(condition);pb.setTotalCount(totalCount);//3.计算总页码int totalPage = totalCount % rows == 0 ? totalCount / rows : totalCount / rows + 1;pb.setTotalPage(totalPage);if (currentPage > totalPage) {currentPage = totalPage;}//4.设置参数pb.setCurrentPage(currentPage);pb.setRows(rows);//调用dao查询list集合//计算开始的记录索引int start = (currentPage - 1)*rows;List<User> list =dao.findByPage(start,rows,condition);pb.setList(list);return pb;}
3.复杂条件查询
前端代码：
<div style="float: left;"><form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2" ></div><button type="submit" class="btn btn-default">查询</button></form></div>
用户信息管理系统（Web实践项目）相关推荐
- 用户信息管理系统（Javaweb实践练习项目，附源码）
目录 前言 1. 系统概述 2. 系统各功能实现思路 2.1 列表查询 2.2 登录 2.3 添加 2.4 删除 2.5 修改 2.6 删除选中 2.7 分页查询 2.8 复杂条件查询 3. 系统源代 ...
- 学生信息管理系统-web项目实训（基于JAVA）
学生信息管理系统-web项目实训(基于JAVA) //登陆 package rjgc;import java.awt.*; import java.awt.event.*; import javax. ...
- [Web技术]用户信息管理系统
工程文件:用户信息管理系统 开发时间:2022.03 - 2022.04 文章目录 一.快速开始 二.任务概述 三.分析与设计 3.1 需求分析 3.2 总体设计 四.功能展示 4.1 用户登录 4. ...
- Java+JSP+Mysql+Tomcat实现Web用户信息管理系统
用户信息管理系统 一.系统介绍 1.软件环境 2.系统功能 3.数据库 二.系统展示 1.登录系统 2.主页面 3.新增用户信息 4.修改用户信息 5.查询用户信息 三.部分代码 DBUtil Adm ...
- 【Java项目】——基于SpringBoot的用户信息管理系统
一.项目简介 用户信息管理系统: 1.根据权限的不同,将用户角色划分为:超级管理员和普通管理员: 2.当管理员或者普通管理员在登录页面登录成功之后,进入相应的系统主页面,查看到自己权限之内的用户列表信 ...
- Java Web用户信息管理系统的简单设计（增删查改）
用户信息管理系统 技术需求:Servlet +jsp+ mvc +jdbc 软件需求 :Eclipse mysql Tomcat Google 功能需求:完成用户登录 查询所有用户 增加删除用户信息 ...
- 案例：用户信息管理系统
案例:用户信息管理系统 1.需求 1.1 说明 用户信息列表展示,并且可以对用户信息的进行增删改查操作 1.2 效果图 根据需求,创建效果图,如下: 2.设计 2.1 技术选型 完成本次案例所用使用的 ...
- JavaWeb11 —— 用户信息管理系统
JSP案例--用户信息管理系统 1.需求 简单的用户信息管理系统 对用户信息的增删改查 效果截图(部分) 2.设计 技术选型 Servlet + jsp + Mysql + jdbctemplate ...
- 用户信息管理系统总结
目录 1 登录 1.1 登录界面 1.2 Servlet 2 index界面 3 添加功能 3.1 添加逻辑图 3.2 代码修改 3.3 addUserServlet 4 删除功能 4.1 删除逻辑 ...
- JavaWeb用户信息管理系统（附全部代码）
JavaWeb用户信息管理系统(附全部代码) 1.JavaEE项目的三层框架 2 .本项目的目录文件(java文件) 3.创建用户资源的数据表 3.1.编写数据库表对应的JavaBean对象 4.编写 ...
最新文章
- lamda表达式python_Python--13 lambda表达式
- a 中调用js的几种方法
- python数据结构与算法
- C++ 基本数据类型 的 字节数
- 作者：张澄（1979-），男，中国联合网络通信有限公司江苏省分公司互联网部大数据中心总监...
- 模拟——乒乓球(洛谷 P1042)
- 【计算机网络】简单网络管理协议 SNMP
- 解决办法：java.lang.NoClassDefFoundError
- libevent c++高并发网络编程_高并发-网络I/O
- pytz 太平洋时区_使用pytz模块打印所有时区的Python程序
- 如何配置服务器的内网IP以及MTU
- ArchLinux安装错误”Errors occured, no packages were upgraded. ⇒ ERROR: Failed to install packages to new“
- JavaScript中throw的错误异常处理
- JavaScript Dom编程艺术学习笔记（第4章）
- [Photography] 新摄影笔记
- 网页访问的服务器和端口怎么查,怎么查看网页访问端口号
- 手机捕鱼服务器维护,手机捕鱼游戏服务器
- javaweb登录验证码的实现
- driver 的功能是什么
- 2022北航敏捷软件工程 第二次博客作业
热门文章
- 亿万富豪欠债消失 10多名员工集体讨薪
- 平安证券股票交易接口异常怎么解决？
- ALIENTEK 的 ESP8266 WiFi Module 刷入固件后出现don’t use rtc mem data错误或者ESP8266开启串口不停出现乱码的解决方案
- 小旋风360推送工具
- python 获取金融数据_class类在python中如何获取金融数据
- python django下载 功能如何实现_Python中django文件传输下载功能的实现
- c语言程序开发教程,C语言程序设计案例教程（第2版）
- 金士顿U盘在我的电脑中无法显示的方法
- 新手村 - 第三站，认识均线系统
- Linux shell、内核及系统编程精品资料下载汇总 topsage