界面展示：
界面所用的素材网址点击打开链接，在用网上素材时候首先要把代码看懂才能进行修改，因此希望读者好好看看源码，看的时候着重看看字母排序原理、JQuery设计等等。
分组展示：这个地方有个不好的地方，由于我设计的数据库的主键用的是自增主键因此允许分组重复的情况，所以代码中用了ajax对添加的分组名进行判断是否出现重名情况，这种方法还是存在许多问题是最笨的办法，后来想想在分组表中采用联合组件的方式更好，把分组名和联系人ID以及用户账户绑定在一起组成联合组件的方法可以避免上述问题，不知道联合主键可以参考博客文章，希望你能够用这种办法实现多对多的关系而不是像我用这么笨的办法。
添加分组：
按钮：...
代码：
<%@ page language="java" import="com.student.servlet.*" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@page import="java.util.*" import="com.student.vo.User"%>
<!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>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="js/sort.js"></script><%Vector<User> vector=new Vector<User>();vector=(Vector<User>)request.getAttribute("name");User user=(User)request.getSession().getAttribute("myself");Set<String> set=new HashSet<String>();set=(Set<String>)request.getAttribute("group");%>
<style>input {border: 2px solid #7BA7AB;border-radius: 5px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){var $div4=$("#sum");var $div3=$("#cc3");$div4.hide();$div3.hide();$("#c1").click(function(){$div4.toggle(500); });$("#c2").click(function(){;$div3.toggle(500); });
});
</script>
<script type="text/javascript">var xmlHttp;function createXMLHttp(){xmlHttp=new XMLHttpRequest(); }function f(id){createXMLHttp();xmlHttp.open("POST","studentFind?username=<%=user.getId()%>&id="+id);xmlHttp.onreadystatechange=showMsgCallback;xmlHttp.send(null); }function showMsgCallback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var text=xmlHttp.responseText;document.getElementById("mark").innerHTML=text;}}} function f1(id){createXMLHttp();xmlHttp.open("POST","FindGroupName?username=<%=user.getId()%>&id="+id);xmlHttp.onreadystatechange=showMsgCallback1;xmlHttp.send(null); }function showMsgCallback1(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var text=xmlHttp.responseText;if(text=="yes");else alert("分组名存在");}}}
</script>
<form id="fy" action="studentFind?" method="post"><input name="find" id="find" οnkeyup="f(this.value)"style="width:300px;height:30px; redius:1px;"type="text" placeholder="请输入查找的联系人"/> <img style="width:20px;"alt="" src="img/search.png"><a href="javascript:window.location.href='tianjia?id=<%=user.getId()%>'"><img style="width:20px;"alt="" src="img/useradd.png"></a><a href="javascript:window.location.href='tiaozhuan.jsp'"><img style="width:20px;"alt="" src="img/exit.png"></a><span id="mark"></span>
</form><div class="gongneng"><a href="myself.jsp"><div class="page"><img style="width:50px;height: 50px;" src="img/xiaomai.jpg" alt=""></div><div >我的名片</div></a></div>
<div class="gongneng"><div class="page"><img style="width:50px;height: 50px;"src="img/katongman.jpg" alt=""></div><span id="c1">我的分组</span> <a id="c2"><img alt="" src="img/tianjia.png"></a> <a οnclick="javascript:alert('该功能还未完善，敬请期待!')"><img alt="" src="img/delete.png"></a></div>
<div id="cc3"class="gongneng"><div class="page"><img style="width:50px;height: 50px;"src="img/katongman.jpg" alt=""></div><form action="addgroup?id=<%=user.getId() %>" method="post"><input id="newGroupName" name="newGroupName" type="text" οnblur="f1(this.value)" placeholder="请输入分组名" /><input type="submit" value="添加"><span style="color:red;" id="testName"></span></form></div>
<div id="sum">
<%for(String name:set){ %>
<div id="cc" class="gongneng"><a href="ceshi?id=<%=name%>&username=<%=user.getId()%>"><div class="page"><img style="width:50px;height: 50px;"src="img/katongman.jpg" alt=""></div><div id="name11"><%=name %></div></a>
</div>
<%} %>
</div>
<div class="sort_box"><%int k=7;for(int i=0;i<vector.size();i++,k--){if(k<1)k=7;//用来输出图片%> <div class="sort_list"><a href="findAllServlet?id=<%=vector.get(i).getId()%>"><div class="num_logo"><img src="img/<%=k %>.jpg" alt=""></div><div class="num_name"><%=vector.get(i).getName()%></div></a></div> <%} %></div>
<div class="initials"><ul><li><img src="img/068.png"></li></ul>
</div>
</body>
</html>
