JavaWeb实现通讯录
开发工具：idea2020.1 + navicat premium 15
开发技术：servlet + jsp + jdbc
源码地址：通信录源码：https://github.com/mogumogui/JAVAWEB-CONTACTLIST 下载无需积分： SQL 文件网盘下载链接：https://pan.baidu.com/s/18n4Jjo3BSHdpwc2p7pYj5Q?pwd=869q **通讯录功能演示：
- 首页（利用flexibile布局）
- 注册页面（利用js进行表单验证以及通过servlet对用户名进行是否存在校验）
- 若是表单信息不满足要求则表单提交失败
- 若注册用户名已存在则提示已存在
- 登陆页面（利用servlet进行用户名及密码验证）
- 若是账号不存在或者密码错误都将登陆失败并提示信息！
- 修改功能（通过servlet与jdbc对联系人数据库进行修改操作）
- 删除功能
- 查询功能（通讯servlet对通讯录进行条件查询）
- 可以通过姓名、电话号码、qq、电子邮箱进行查询！
- 管理员功能（可以修改删除用户信息）
各部分功能代码演示：
- main.jsp (js,css文件在上面给的github中)
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- my style CSS -->
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/main.js"></script>
<title>个人通信录</title>
</head>
<body>
<%@ include file="header.jsp" %>
<div class="page">
<header class="page_header">
<h1>个人通讯录</h1>
</header>
<div class="cards-holder">
<div class="card">
<header class="card_header" data-background="">
<h2>注册功能</h2>
</header>
<section class="card_content">
<h2>通讯录用户注册</h2>
<p>可以通过手机、邮箱、等方式注册。</p>
</section>
</div>
<div class="card">
<header class="card_header" data-background="">
<h2>修改功能</h2>
</header>
<section class="card_content">
<h2>修改通讯录成员、修改用户</h2>
<p>可以用户指定信息、并实时返回数据供使用者查看。</p>
</section>
</div>
<div class="card">
<header class="card_header" data-background="">
<h2>增加功能</h2>
</header>
<section class="card_content">
<h2>增加通讯录成员</h2>
<p>可以给登陆的用户为自己通讯录新增成员、并填写对应信息。</p>
</section>
</div>
<div class="card">
<header class="card_header" data-background="">
<h2>查询功能</h2>
</header>
<section class="card_content">
<h2>查询通讯录成员</h2>
<p>可以根据条件查询并获得通讯录成员信息。</p>
</section>
</div>
<div class="card">
<header class="card_header" data-background="">
<h2>管理员功能</h2>
</header>
<section class="card_content">
<h2>管理用户</h2>
<p>可以修改与删除用户的基本信息。</p>
</section>
</div>
</div>
</div>
</body>
</html>- 注册功能(register.jsp / RegisterServlet.java)
register.jsp
<%@ page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<script type="text/javascript" src="js/register.js"></script>
<style type="text/css">
.msg{
color: red;
}
</style>
</head>
<body>
<%@ include file="header.jsp" %>
<div id="login">
<div>
<div class="form-group" align="center">
<a href="main.jsp">
<img src="${pageContext.request.contextPath}/images/JACK.ico" alt="">
</a>
</div>
<div class="form-group" align="center" >通讯录用户注册</div>
</div>
<form action="${pageContext.request.contextPath}/RegisterServlet" method="post" id="form">
<div class="form-group">
<input type="text" class="form-control" id="username" name="username" placeholder = "请输入不为空的用户名" onblur="checkUsername()">
<span class="msg" id="userErr">${requestScope.nameRegisterError}</span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="password" placeholder = "请输入不少于六位密码" onblur="checkPassword()">
<span class="msg" id="pwdErr"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="repassword" name="repassword" placeholder = "请输入确认密码" onblur="checkRepassword()">
<span class="msg" id="repwdErr"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phoneid" name="phoneid" placeholder = "请输入手机号码" onblur="checkTel()">
<span class="msg" id="phoneErr"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" name="email" placeholder = "请输入邮箱号码" onblur="checkEmail()">
<span class="msg" id="emailErr"></span>
</div>
<div align="center">
<button type="submit" class="btn btn-primary" onclick="return reg()">注册</button>
<button type="reset" class="btn btn-primary">取消</button>
</div>
<div align="center">
<span>点击 “注册” 按钮，即表示您同意并愿意遵守</span><a href="">用户协议</a>
</div>
</form>
</div>
</body>
</html>RegisterServlet.java
package User.Servlet;
import User.Dao.UserDao;
import User.Domain.User;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.sql.ResultSet;
import java.sql.SQLException;
@WebServlet(name = "RegisterServlet")
public class RegisterServlet extends HttpServlet {
public RegisterServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
response.setCharacterEncoding("utf-8"); // 设置编码格式
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String phoneid = request.getParameter("phoneid");
String email = request.getParameter("email");
UserDao userDao = new UserDao();
ResultSet rs = userDao.selectUser(username);
try {
if(rs.next()) {
if (username.equals(rs.getString("username"))) {
request.setAttribute("nameRegisterError", "用户名已经存在!");
request.getRequestDispatcher("register.jsp").forward(request, response);
}
} else {
request.setAttribute("username", username);
User user = new User();
user.setUserName(username);
user.setPassword(password);
user.setPhoneID(phoneid);
user.setEmail(email);
userDao.add(user);
request.getRequestDispatcher("login.jsp").forward(request, response);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}- 删除功能(DeleteFriendServlet.java)
package User.Servlet;
import User.Dao.FriendDao;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class DeletFriendServlet
*/
public class DeleteFriendServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DeleteFriendServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8"); // 设置编码格式
request.setCharacterEncoding("utf-8");
// 获取用户传过来的 friendid
int id = Integer.parseInt(request.getParameter("friendid"));
FriendDao friendDao = new FriendDao();
friendDao.detele(id);
response.getWriter().print("删除成功！");
request.getRequestDispatcher("index.jsp").forward(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException {
// TODO Auto-generated method stub
}
}- 修改功能(editfriends.jsp / EditFriendServlet.java)
editfriends.jsp
<%@ page import="User.Domain.Friend" %>
<%@ page import="User.Dao.FriendDao" %>
<%@ page import="java.sql.SQLException" %>
<%@ page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改通讯录用户</title>
<script type="text/javascript">
function submit(){
if(!confirm("确认提交吗？")){
window["event"].returnValue = false;
}
}
</script>
</head>
<body>
<%@ include file="header.jsp" %>
<%
FriendDao friendDao = new FriendDao();
Friend friend = null;
try {
friend = friendDao.getFriendById(request.getParameter("friend"));
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
assert friend != null;
%>
<!-- 正文 创建时间 -->
<div id="home">
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#userlist">编辑朋友资料</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userlist" role="tabpanel" aria-labelledby="profile-tab">
<div id="friendform">
<form action="${pageContext.request.contextPath}/EditFriendServlet?friendid=<%=friend.getFriendID()%>" method="post">
<div class="form-group row">
<input type="hidden" name="id" value="" />
<label for="friendname" class="col-sm-2 col-form-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="friendname" name = "friendname" value="<%=friend.getFriendName()%>">
</div>
</div>
<div class="form-group row">
<label for="phoneid" class="col-sm-2 col-form-label">电话号码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phoneid" name = "phoneid" value="<%=friend.getPhoneID()%>">
</div>
</div>
<div class="form-group row">
<label for="qq" class="col-sm-2 col-form-label">QQ</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="qq" name = "qq" value="<%=friend.getQQ()%>">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">电子邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name = "email" value="<%=friend.getEmail()%>">
</div>
</div>
<div class="form-group rowcenter">
<button type="submit" class="btn btn-primary mr-3">提交</button>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">返回</button>
</div>
</form>
</div>
</div>
</div>
</div>
<%@ include file="footer.jsp" %>
</body>
</html>EditFriendServlet.java
package User.Servlet;
import User.Dao.FriendDao;
import User.Domain.Friend;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class EditFriendServlet
*/
public class EditFriendServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public EditFriendServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8"); // 设置编码格式
request.setCharacterEncoding("utf-8");
// 获取用户传过来的 friend
FriendDao friendDao = new FriendDao();
try {
Friend friend = friendDao.getFriendById(request.getParameter("friendid"));
String friendname = request.getParameter("friendname");
String phoneid = request.getParameter("phoneid");
String qq = request.getParameter("qq");
String email = request.getParameter("email");
friend.setFriendName(friendname);
friend.setPhoneID(phoneid);
friend.setQQ(qq);
friend.setEmail(email);
friendDao.modify(friend);
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
request.getRequestDispatcher("index.jsp").forward(request,response);
}
}- 查询功能(index.jsp / IndexServlet.java)
index.jsp
<%@page import="User.Domain.Friend"%>
<%@page import="java.util.ArrayList"%>
<%@ page import="User.Domain.Friend" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- my style CSS -->
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
<title>个人通信录</title>
<script src="https://cdn.bootcdn.net/ajax/libs/bootbox.js/5.4.0/bootbox.js"></script>
<script type="text/javascript">
function del(){
if(!confirm("确认要删除？")){
window.event.returnValue = false;
}
}
function search() {
if(!confirm("确认要查询？")){
window.event.returnValue = false;
}
}
</script>
</head>
<body>
<%@ include file="header.jsp" %>
<!-- 正文 -->
<div id="home">
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#userlist">通讯录管理</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userlist" role="tabpanel" aria-labelledby="profile-tab">
<div id="searchfriends">
<div class="card">
<h5 class="card-header">通讯录查询</h5>
<div class="card-body">
<form action="${pageContext.request.contextPath}/IndexServlet" method="post" onsubmit="return search()">
<div class="form-group row">
<label for="friendname" class="col-1 col-form-label">姓名</label>
<div class="col-5">
<input type="text" class="form-control" id="friendname" name ="friendname">
</div>
<label for="phoneid" class="col-2 col-form-label">电话号码</label>
<div class="col-4">
<input type="text" class="form-control" id="phoneid" name="phoneid">
</div>
</div>
<div class="form-group row">
<label for="qq" class="col-1 col-form-label">QQ</label>
<div class="col-5">
<input type="text" class="form-control" id="qq" name="qq">
</div>
<label for="email" class="col-2 col-form-label">电子邮箱</label>
<div class="col-4">
<input type="text" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group rowright">
<button type="submit" class="btn btn-primary mr-3">查询</button>
</div>
</form>
</div>
</div>
</div>
<div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">朋友ID</th>
<th scope="col">朋友姓名</th>
<th scope="col">电话号码</th>
<th scope="col">qq</th>
<th scope="col">电子邮箱</th>
<th scope="col">创建时间</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<%
@SuppressWarnings("unchecked")
ArrayList<Friend> friendlist = (ArrayList<Friend>) request.getSession().getAttribute("friendlist");
if(friendlist != null){
for (int i=0; i<friendlist.size(); i++) {
%>
<tr>
<td><%=friendlist.get(i).getFriendID() %></td>
<td><%=friendlist.get(i).getFriendName() %></td>
<td><%=friendlist.get(i).getPhoneID() %></td>
<td><%=friendlist.get(i).getQQ() %></td>
<td><%=friendlist.get(i).getEmail() %></td>
<td><%=friendlist.get(i).getCreateDate() %></td>
<td>
<a href="${pageContext.request.contextPath}/editfriends.jsp?friend=<%=friendlist.get(i).getFriendID()%>" class="btn btn-outline-danger btn-sm border-0">修改</a>
<a href="${pageContext.request.contextPath}/DeleteFriendServlet?friendid=<%=friendlist.get(i).getFriendID()%>"
onclick="return del()" class="btn btn-outline-danger btn-sm border-0">删除</a>
</td>
</tr>
<%
}
}
%>
</tbody>
</table>
<!-- 分页 -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<%@ include file="footer.jsp" %>
</body>
</html>IndexServlet.java
package User.Servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import User.Dao.FriendDao;
import User.Dao.UserDao;
import User.Domain.Friend;
import User.Domain.User;
/**
* Servlet implementation class IndexServlet
*/
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public IndexServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8"); // 设置编码格式
request.setCharacterEncoding("utf-8");
Friend friend = new Friend();
FriendDao friendDao = new FriendDao();
UserDao userDao = new UserDao();
ArrayList<Friend> friendlist;
User user = (User) request.getSession().getAttribute("user");
try {
int userid = userDao.getUserIdByUserName(user);
String friendname = request.getParameter("friendname");
String phoneid = request.getParameter("phoneid");
String qq = request.getParameter("qq");
String email = request.getParameter("email");
friend.setUserID(userid);
friend.setFriendName(friendname);
friend.setPhoneID(phoneid);
friend.setQQ(qq);
friend.setEmail(email);
friendlist = friendDao.serchFriendByCondition(friend);
request.getSession().setAttribute("friendlist",friendlist);
request.getRequestDispatcher("index.jsp").forward(request,response);
} catch (SQLException | ClassNotFoundException throwables) {
throwables.printStackTrace();
}
}
}- 管理员功能
admin_login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理员页面</title>
</head>
<body>
<%@ include file="header.jsp" %>
<div id="login">
<div>
<div class="form-group" align="center">
<a href="main.jsp">
<img src="${pageContext.request.contextPath}/images/Bee.ico" >
</a>
</div>
<div class="form-group" align="center" >通讯录管理员登录</div>
</div>
<form action="${pageContext.request.contextPath}/AdminLoginServlet" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="username" placeholder = "管理员">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="password" placeholder = "密码">
</div>
<div align="center">
<button type="submit" class="btn btn-primary">登录</button>
</div>
<div>
<span>没有账号，不能注册，请联系管理员</span><a href="main.jsp">点此返回首页</a>
</div>
</form>
</div>
</body>
</html>admin_index.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- my style CSS -->
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
<title>个人通信录</title>
<script type="text/javascript">
function del(){
if(!confirm("确认要删除？")){
window.event.returnValue = false;
}
}
</script>
</head>
<body>
<%@ include file="header.jsp" %>
<!-- 正文 -->
<div id="home">
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#userlist">用户管理</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userlist" role="tabpanel" aria-labelledby="profile-tab">
<div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">用户ID</th>
<th scope="col">用户姓名</th>
<th scope="col">用户密码</th>
<th scope="col">电话号码</th>
<th scope="col">电子邮箱</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${sessionScope.usersList}" var="ul">
<tr>
<td scope="col">${ul.userID}</td>
<td scope="col">${ul.userName}</td>
<td scope="col">${ul.password}</td>
<td scope="col">${ul.phoneID}</td>
<td scope="col">${ul.email}</td>
<td scope="col">
<a href="${pageContext.request.contextPath}/editadmin.jsp?userid=${ul.userID}" class="btn btn-outline-danger btn-sm border-0">修改</a>
<a href="${pageContext.request.contextPath}/DeleteUserServlet?userid=${ul.userID}"
onclick="return del()" class="btn btn-outline-danger btn-sm border-0">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 分页 -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<%@ include file="footer.jsp" %>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
