文章目录
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="
最低0.47元/天 解锁文章
4382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
