赞
踩
目录
使用到的技术:Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat
本项目按照mvc开发模式和三层架构进行编写,项目目录结构如下:
举例:
查询所有用户信息分析如下
其它功能都是按照此逻辑进行编写
1.1.1 正确输入用户名、密码和验证码登录成功
1.1.2. 错误输入用户名或密码
1.1.3. 错误输入验证码
login.jsp
- <div class="container" style="width: 400px;">
- <h3 style="text-align: center;">管理员登录</h3>
- <form action="${pageContext.request.contextPath}/loginServlet" method="post">
- <div class="form-group">
- <label for="user">用户名:</label>
- <input type="text" name="username" 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="${pageContext.request.contextPath}/checkCodeServlet" 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>${login_msg}</strong>
- </div>
- </div>
1.3.1 checkCodeServlet
网上的版本很多,可以自己找
1.3.2 loginServlet
- //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){
- //登录成功
- //将用户存入session
- session.setAttribute("user",loginUser);
- //跳转页面
- response.sendRedirect(request.getContextPath()+"/index.jsp");
- }else {
- //登录失败
- //提示信息
- request.setAttribute("login_msg","用户名或密码错误!");
- //跳转登录界面
- request.getRequestDispatcher("/login.jsp").forward(request,response);
- }
index.jsp
- <div>
- <h1 align="center">
- ${user.name}欢迎你!
- </h1>
- </div>
- <div align="center">
- <a
- href="${pageContext.request.contextPath}/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
- </a>
- </div>
list.jsp
- <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>
- <th><input type="checkbox" name="uid" value="${user.id}"></th>
- <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>
- </table>
userListServlet
- //调用UserService完成查询
- UserService service = new UserServiceImpl();
- List<User> users = service.findAll();
- //2.将list存入request域
- request.setAttribute("users",users);
- //3.转发到list.jsp
- request.getRequestDispatcher("/list.jsp").forward(request,response);
list.jsp
<a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
add.jsp
- <div class="container">
- <center><h3>添加联系人页面</h3></center>
- <form action="${pageContext.request.contextPath}/addUserServlet" 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="gender" value="男" checked="checked"/>男
- <input type="radio" name="gender" value="女"/>女
- </div>
-
- <div class="form-group">
- <label for="age">年龄:</label>
- <input type="number" min="1" max="100" 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" min="0" max="10" class="form-control" name="qq" placeholder="请输入QQ号码"/>
- </div>
-
- <div class="form-group">
- <label for="email">Email:</label>
- <input type="email" 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>
addUserServlet
- //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.跳转到UserListServlet
- //response.sendRedirect(request.getContextPath()+"/userListServlet");
- response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
list.jsp
- <script>
- function deleteUser(id) {
- //用户安全提示
- if(confirm("你确定要删除吗?")){
- //访问路径
- location.href = "${pageContext.request.contextPath}/delUserServlet?id="+id;
- }
- }
- </script>
-
- <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a>
delUserServlet
- String id = request.getParameter("id");
-
- UserService service = new UserServiceImpl();
- service.deleteUser(id);
-
- //response.sendRedirect(request.getContextPath()+"/userListServlet");
- response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
list.jsp
<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>
update.jsp
- 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>
-
- <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="${pageContext.request.contextPath}/updateUserServlet" method="post">
- <%--隐藏域--%>
- <input type="hidden" name="id" value="${user.id}">
- <div class="form-group">
- <label for="name">姓名:</label>
- <input type="text" class="form-control" id="name" name="name" value="${user.name}" readonly="readonly" placeholder="请输入姓名" />
- </div>
-
- <div class="form-group">
- <label>性别:</label>
- <c:if test="${user.gender == '男'}">
- <input type="radio" name="gender" value="男" checked />男
- <input type="radio" name="gender" value="女" />女
- </c:if>
-
- <c:if test="${user.gender == '女'}">
- <input type="radio" name="gender" value="男" />男
- <input type="radio" name="gender" value="女" checked />女
- </c:if>
- </div>
-
- <div class="form-group">
- <label for="age">年龄:</label>
- <input type="number" min="1" max="100" class="form-control" id="age" name="age" value="${user.age}" placeholder="请输入年龄" />
- </div>
-
- <div class="form-group">
- <label for="address">籍贯:</label>
- <select name="address" id="address" class="form-control" >
- <c:if test="${user.address == '陕西'}">
- <option value="陕西" selected>陕西</option>
- <option value="北京">北京</option>
- <option value="上海">上海</option>
- </c:if>
-
- <c:if test="${user.address == '北京'}">
- <option value="陕西" >陕西</option>
- <option value="北京" selected>北京</option>
- <option value="上海">上海</option>
- </c:if>
-
- <c:if test="${user.address == '上海'}">
- <option value="陕西" >陕西</option>
- <option value="北京">北京</option>
- <option value="上海" selected>上海</option>
- </c:if>
- </select>
- </div>
-
- <div class="form-group">
- <label for="qq">QQ:</label>
- <input type="text" class="form-control" name="qq" value="${user.qq}" placeholder="请输入QQ号码"/>
- </div>
-
- <div class="form-group">
- <label for="email">Email:</label>
- <input type="email" class="form-control" name="email" value="${user.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>
注意:修改联系人需要回显信息
<input type="text" class="form-control" id="name" name="name" value="${user.name}" readonly="readonly" placeholder="请输入姓名" />
只需要增加value属性就能回显信息
updateUserServlet
- request.setCharacterEncoding("utf-8");
-
- Map<String, String[]> map = request.getParameterMap();
- User user = new User();
- try {
- BeanUtils.populate(user,map);
- } catch (IllegalAccessException e) {
- e.printStackTrace();
- } catch (InvocationTargetException e) {
- e.printStackTrace();
- }
-
- UserService service = new UserServiceImpl();
- service.updateUser(user);
-
- //response.sendRedirect(request.getContextPath()+"/userListServlet");
- response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
list.jsp
- <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();
- }
- }
-
- }
- document.getElementById("firstCb").onclick = function () {
- var cbs = document.getElementsByName("uid")
- for(var i = 0; i < cbs.length; i++){
- cbs[i].checked = this.checked;
- }
- }
- }
- </script>
-
- //核心代码
- <a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>
-
- <form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
-
- <th><input type="checkbox" id="firstCb"></th>
-
- <th><input type="checkbox" name="uid" value="${user.id}"></th>
delSelectedServlet
- String[] ids = request.getParameterValues("uid");
- UserService service = new UserServiceImpl();
- service.delSelectedUser(ids);
-
- //response.sendRedirect(request.getContextPath()+"/userListServlet");
- response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
- public class PageBean<T> {
- private int totalCount;//总记录数
- private int totalPage;//总页码
- private List<T> list;//每页的数据
- private int currentPage;//当前页码
- private int row;//每页显示记录数
- }
list.jsp
- <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>
-
- <li>
- <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>
findUserByPageServlet
- request.setCharacterEncoding("utf-8");
- 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();
-
- UserService service = new UserServiceImpl();
- PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);
-
- request.setAttribute("pb",pb);
-
- request.setAttribute("condition",condition);//讲查询条件存入request
-
- request.getRequestDispatcher("/list.jsp").forward(request,response);
list.jsp
- <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="exampleInputEmail2">籍贯</label>
- <input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputEmail2" >
- </div>
- <div class="form-group">
- <label for="exampleInputEmail2">邮箱</label>
- <input type="email" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail3" >
- </div>
- <button type="submit" class="btn btn-default">查询</button>
- </form>
-
- </div>
查询继续跳转到findUserByPageServlet
注意:复杂条件查询查询不存在的值会报错,只需要在执行语句出抛出trycatch异常即可
此项目算是一个入门的练习,入门项目虽然有点复杂,但要从基础做起。中间的细节需要格外注意,遇到错误及时解决。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。