Java的web项目练习,展示数据库中所有联系人的信息,并实现添加,删除和修改功能

最新推荐文章于 2021-11-24 11:38:15 发布

xilin6664

最新推荐文章于 2021-11-24 11:38:15 发布

阅读量3.2k

点赞数 1

本文链接：https://blog.csdn.net/xilin6664/article/details/89918222

版权

整体思路: 在项目首页写一个超链接,连接地址为一个servlet(ServletDome2)-->(通过service层和dao层到数据库中查询并获取联系人表中的所有联系人的所有信息),将获取到的信息通过重定向,传给一个展示所有联系人信息的jsp(show.jsp)-->(展示所有联系人的信息,并且每个联系人后面都有两个操作超链接按钮(修改和删除),页面下面还有一个添加联系人的超链接按钮),如果用户点击了修改按钮(此按钮指向一个可以查询到该联系人所有供修改信息的servlet(ServletSelect1))-->先查询到该联系人的信息,并将信息传给供用户修改联系人信息的jsp(update.jsp)以供用户查看并修改联系人信息(该jsp展示页面中的联系人信息如果被修改则数据库中的信息也将随之修改否则就还是之前的信息,此页面有三个按钮可以分别提交,重置和返回).当用户在该页面修改完成点提交按钮后,会弹出确认提示框,再次点击确认后,会将修改内容传给可以修改信息的servlet(ServletUpdate),再接收传来的数据封装到对象中,并调用service层对象的修改方法将对象作为方法参数传入,然后service层再传给dao层,在dao层进行对数据库的修改操作并将结果返回.-->在ServletUpdate中获取修改后返回的结果进行判断,并在页面给出相应的提示信息.

删除的操作步骤和修改的几乎一样.添加的步骤相对比较简单了.

注意:联系人的id为主键且自增不可以被修改.联系人名字不可以被修改.在删除操作时页面显示的信息都为只读.

首页超链接的代码略...

jsp的相应参考代码为:

显示信息的:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%--jsp的指令tagLib引入--%>
<!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>Bootstrap模板</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>
</head>
<body>
<div class="container">
<h3 style="text-align: center">显示所有联系人</h3>
<table border="1" class="table table-bordered table-hover">
<tr class="success">
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>籍贯</th>
    <th>QQ</th>
    <th>邮箱</th>
    <th>操作</th>
</tr>

    <c:if test="${not empty list}">
    <c:forEach items="${list}" var="contact">

        <tr>
            <td>${contact.id}</td>
            <td>${contact.name}</td>
            <td>${contact.sex}</td>
            <td>${contact.age}</td>
            <td>${contact.address}</td>
            <td>${contact.qq}</td>
            <td>${contact.email}</td>                   <%--将id属性值传回给服务器--%>
            <td><a class="btn btn-default btn-sm" href= "${pageContext.servletContext.contextPath}/ss1?id=${contact.id}">修改</a>&nbsp;<a class="btn btn-default btn-sm"
                                                                                   href="${pageContext.servletContext.contextPath}/ss2?id=${contact.id}">删除</a></td>
        </tr>
    </c:forEach>
     </c:if>
    <tr>
        <td colspan="8" align="center"><a class="btn btn-primary" href="${pageContext.servletContext.contextPath}/jsps/add.jsp">添加联系人</a></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

修改信息的参考代码为:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>"/>
    <!-- 指定字符集 -->
    <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><%--οnsubmit="javascript: if(confirm('是否提交')){return true}else{return false}" 弹出确认框询问--%>
    <form action="${pageContext.servletContext.contextPath}/update?id=${contact.id}" method="post" οnsubmit="javascript: if(confirm('是否提交')){return true}else{return false}">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name"  readonly="readonly" value="${contact.name}" placeholder="请输入姓名" />
        </div>

        <div class="form-group">
            <label>性别：</label><%--<%=concat.getSex()=="man"?" checked":""%> 展示选中的单选框--%>
            <input type="radio" name="sex" value="男" ${contact.sex == "男"?"checked":""}  />男
            <input type="radio" name="sex" value="女" ${contact.sex == "女"?"checked":""} />女
        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age"  name="age" value="${requestScope.contact.age}" placeholder="请输入年龄" />
        </div>

        <div class="form-group">
            <label >籍贯：</label>
            <select name="address" class="form-control" >
                <option value="广东" ${contact.address == "广东"?"selected":""}>广东</option>
                <option value="广西" ${contact.address == "广西"?"selected":""}>广西</option>
                <option value="湖南" ${contact.address == "湖南"?"selected":""}>湖南</option>
            </select>
        </div>

        <div class="form-group">
            <label >QQ：</label>
            <input type="text" class="form-control" name="qq" value="${contact.qq}" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label >Email：</label>
            <input type="text" class="form-control" name="email" value="${contact.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="返回"  οnclick="window.history.go(-1)"/>
        </div>
    </form>
</div>
</body>
</html>

删除联系人的代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>"/>
    <!-- 指定字符集 -->
    <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><%--οnsubmit="javascript: if(confirm('是否提交')){return true}else{return false}" 弹出确认框询问--%>
    <form action="${pageContext.servletContext.contextPath}/delete?id=${contact.id}" method="post" οnsubmit="javascript: if(confirm('真的删除该联系人吗???')){return true}else{return false}">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name"  readonly="readonly" value="${contact.name}" placeholder="请输入姓名" />
        </div>

        <div class="form-group">
            <label>性别：</label><%--<%=concat.getSex()=="man"?" checked":""%> 展示选中的单选框--%>
            <input type="radio" name="sex" readonly="readonly" value="男" ${contact.sex == "男"?"checked":""}  />男
            <input type="radio" name="sex" readonly="readonly" value="女" ${contact.sex == "女"?"checked":""} />女
        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age"  name="age" readonly="readonly" value="${requestScope.contact.age}" placeholder="请输入年龄" />
        </div>

        <div class="form-group">
            <label >籍贯：</label>
            <select name="address" readonly="readonly" class="form-control" >
                <option value="广东" ${contact.address == "广东"?"selected":""}>广东</option>
                <option value="广西" ${contact.address == "广西"?"selected":""}>广西</option>
                <option value="湖南" ${contact.address == "湖南"?"selected":""}>湖南</option>
            </select>
        </div>

        <div class="form-group">
            <label >QQ：</label>
            <input type="text" class="form-control" name="qq"  readonly="readonly"value="${contact.qq}" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label >Email：</label>
            <input type="text" class="form-control" name="email" readonly="readonly" value="${contact.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="button" value="放弃删除"  οnclick="window.history.go(-1)"/>
        </div>
    </form>
</div>
</body>
</html>

添加联系人的代码:

<%@ 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.servletContext.contextPath}/add" method="post" οnsubmit="javascript: if(confirm('是否确认添加')){return true}else{return false}">
        <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="sex" value="男" checked="checked"/>男
            <input type="radio" name="sex" 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 >籍贯：</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 >QQ：</label>
            <input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label >Email：</label>
            <input type="text" 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="返回" οnclick="window.history.go(-1)" />
        </div>
    </form>
</div>
</body>
</html>

Java代码:

web层:

-->1:

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class ServletDemo2 extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ShowService showService = new ShowService();
        List<Contact> list=showService.show();
        request.getSession().setAttribute("list",list);
        response.sendRedirect(request.getContextPath()+"/jsps/show.jsp");//重定向
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

-->2:

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Map;

public class ServletSelect1 extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //查询要修改的数据库的信息
       int id = Integer.parseInt(request.getParameter("id"));
        ShowService showService = new ShowService();
        Contact contact = showService.select(id);
        request.setAttribute("contact",contact);
        request.getRequestDispatcher("/jsps/update.jsp").forward(request,response);//请求转发
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

-->3:

import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

public class ServletUpdate extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//防止中文乱码
        response.setContentType("text/html;charset=utf-8");//防止中文乱码
      //获取用户传过来的修改用户的信息
        int id = Integer.parseInt(request.getParameter("id"));
        Map<String, String[]> map = request.getParameterMap();//获取页面提交过来的修改的数据
        Contact contact = new Contact();
        try {
            BeanUtils.populate(contact,map);//将修改后的数据封装到对象中
            ShowService showService = new ShowService();
            int count = showService.update(id, contact);
            if (count > 0) {
                response.getWriter().print("修改成功");
            } else {
                response.getWriter().print("修改失败");

            }
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

-->4:

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class ServletSelect2 extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //查询要删除的数据库的信息
       int id = Integer.parseInt(request.getParameter("id"));
        ShowService showService = new ShowService();
        Contact contact = showService.select(id);
        request.setAttribute("contact",contact);
        request.getRequestDispatcher("/jsps/delete.jsp").forward(request,response);//请求转发
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

-->5:

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class ServletDelete extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//防止中文乱码
        response.setContentType("text/html;charset=utf-8");//防止中文乱码
        //获取用户传过来的修改用户的信息
        int id = Integer.parseInt(request.getParameter("id"));
        //根据id给页面展示要删除的联系人信息询问是否要删除此联系人
        int count = new ShowService().delete(id);
        if (count > 0) {
            response.getWriter().print("联系人删除成功");
        } else {
            response.getWriter().print("联系人删除失败");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

-->6:

import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

public class ServletAdd extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//防止中文乱码
        response.setContentType("text/html;charset=utf-8");//防止中文乱码
        Map<String, String[]> map = request.getParameterMap();//获取页面提交过来的数据
        Contact contact = new Contact();
        try {
            BeanUtils.populate(contact,map);//将添加的数据封装到对象中
            ShowService showService = new ShowService();
            int count = showService.add(contact);
            if (count > 0) {
                response.getWriter().print("添加成功");
            } else {
                response.getWriter().print("添加失败");

            }
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}
service层:

import java.util.List;


public class ShowService {
    ShowDao showDao = new ShowDao();
    public List<Contact> show() {
        return showDao.show();
    }

    public Contact select(int id) {
        return showDao.select(id);
    }

    public int  update(int id, Contact contact) {
       return showDao.update(id,contact);
    }

    public int delete(int id) {
        return showDao.delete(id);
    }

    public int add(Contact contact) {
         return showDao.add(contact);
    }
}

dao层:

import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;

public class ShowDao {
    JdbcTemplate jdbcTemplate = new JdbcTemplate(JdbcUtil.getDataSource());
    public List<Contact> show() {
        String sql = "select * from contact;";
        //将查询到的所有联系人的信息保存到泛型为contact对象的集合中
        List<Contact> list = jdbcTemplate.query(sql, new BeanPropertyRowMapper<Contact>(Contact.class));
        return list;
    }

    public Contact select(int id) {
        String sql = "select* from contact where id =?;";
        Contact contact = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<Contact>(Contact.class), id);
        return contact;
    }

    public int  update(int id, Contact contact) {
        // update 表名 set 字段名 = 值,字段名 = 值 where 字段名=值; 按条件改
        String sql = "update contact set name=?,sex=?, age=?, address=?,qq=?,  email=? where id =? ";
        int count = jdbcTemplate.update(sql, contact.getName(), contact.getSex(), contact.getAge(),
                contact.getAddress(), contact.getQq(), contact.getEmail(), id);
        return count;
    }

    public int  delete(int id) {
        String sql = "delete from contact where id =? ;";
        int count = jdbcTemplate.update(sql, id);
        return count;
    }

    public int add(Contact contact) {
        String sql = "insert into contact values(null,?,?,?,?,?,?)";
        int count = jdbcTemplate.update(sql, contact.getName(), contact.getSex(), contact.getAge(), contact.getAddress()
                , contact.getQq(), contact.getEmail());
        return count;
    }
}
utils和domain包内的相应代码和数据库数据以及页面展示的效果全部省略.