文章目录
github项目地址:
https://github.com/pityk3369/JavaWeb-ContactManager
1-界面展示
- 之前由于未加入CSS文件夹下的内容,网页格式完全错误!加入css文件后正常!
界面终于好了!
-
<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" name="name" class="form-control" id="exampleInputName2" > </div> </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="add.html">删除选中</a> </div> <table border="1" class="table table-bordered table-hover"> <!-- 表格-带边框且边框为1个像素 带鼠标悬停 --> <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> </table> </div> </div>
2-登录
-
调整页面,加入验证码功能
-
代码实现
3-添加联系人
增加按钮–新增add页面并连接action–新增AddUserServlet.java方法 – UserService中增加adduser服务 – 在UserDao中新增adduser操作数据库
-
在list.jsp内修改:
<a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
-
新增add.jsp文件,并修改其中主要的action的href:
<%@ 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"> <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>
-
新增AddUserServlet.java文件
-
设置编码、获取request参数、封装对象(捕获异常)、
//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(); }
-
调用Service保存User、跳转到userlistServlet
//4.调用Service保存 UserService service = new UserServiceImpl(); service.addUser(user); //5.跳转到userListServlet,getContextPath获取到虚拟路径, response.sendRedirect(request.getContextPath()+"/userListServlet");
-
-
在UserService中增加方法 addUser(User user);在UserServiceImpl中重写该方法
@Override
public void addUser(User user) {
dao.add(user);
}
-
在UserDao接口中定义add(User user)方法;在UserDaoImpl中重写方法
@Override public void add(User user) { //1.定义sql,ID为null,自增长;其余6个属性为? String sql = "insert into user values(null,?,?,?,?,?,?)"; //2.执行sql template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail()); }
4-删除联系人
点击删除,直接进入DelUserServlet程序,绑定参数:这条记录的id。
-
DelUserServlet:
获取参数:用户id;调用service删除;跳转查询所有的Servlet。
-
UserService:
public void deleteUser(String id){ dao.delete(Integer.parseInt(id)); }
-
UserDao:
public void delete(int id){ 操作数据库删除 }
-
在list.jsp中,修改删除的href
<td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/delUserServlet?id=${user.id}">删除</a> </td>
-
新增DelUserServlet.java
//1.获取id String id = request.getParameter("id"); //2.调用service删除 UserService service = new UserServiceImpl(); service.deleteUser(id); //3.跳转到查询所有Servlet response.sendRedirect(request.getContextPath() + "/userListServlet");
-
在UserService接口中定义deleteUser方法;在UserServiceImpl重写deleteUser方法;
/** * 根据id来删除User * @param id */ void deleteUser(String id); @Override public void deleteUser(String id) { dao.delete(Integer.parseInt(id)); }
-
在UserDao接口中定义delete方法;在UserDaoImpl重写delete方法;
void delete(int parseInt); @Override public void delete(int id) { //1.定义sql String sql = "delete from user where id = ?"; //2.执行sql template.update(sql, id); }
-
至此!删除功能完善好了,但是出现的问题就是:如果误点删除呢?都不出现,确认删除的弹窗吗?那就修改一下“删除”按钮后的href吧!
修改list.jsp中删除按钮的href如下;并在list头部添加script定义;
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td> <script> function deleteUser(id) { //用户安全提示 if (confirm("您确定要删除吗?")) { //访问路径 location.href = "${pageContext.request.contextPath}/delUserServlet?id=" + id; } } </script>
5-修改联系人
-
新增update.jsp文件
在修改联系人页面内,潜在一个隐藏域,用来传递联系人id。
<div class="container" style="width: 400px;"> <h3 style="