欢迎在此测试网址一下：https://www.smileyan.cn/classmate/ 比较适合手机端用户。
一、基本框架
非常简单，可以说没有用到什么框架，虽然说是Model2但是全部都采用了DWR实现ajax进行数据交互，没有用到servlet。
正如你说看到的一样，只有一个html界面……里面的动态效果是使用jQuery和bootstrap实现的。
点击添加否则删除后不会弹出你是否真的删除，因为个人性格原因，不喜欢在这个时候弹出这个东西。
二、后台介绍
一个java bean User，与数据库表单一一对应。
Dao层有增删改查接口与其实现方法。因为Dao层本身要求就是面向接口编程，因此这个接口是必不可少的。也可说是一种协议，Dao层与mysql之间打交道，需要一层协议。
Service层需要与用户需要打交道，所以也应该是面向接口编程，这里需要用到接口。
三、前端介绍
Bootstrap是一个比较简单的框架，我主要是在菜鸟教程进行这方面的学习。
所以那些弹出窗口什么的我就不多介绍了。下面直接贴主要代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>通讯录</title>
<link rel="icon" href="./images/logo.png" type="image/x-icon"/>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!--<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/interface/DwrService.js'></script>
<script>
var searchbutton=0;
/* search */
$(document).ready(function(){
DwrService.show();
var search_state=0;
$("#head_search").hide();
/* show or hide search block */
$("#btn_search").click(function(){
if(search_state==1) {
$("#head_search").hide();
search_state=0;
}else{
search_state=1;
$("#head_search").show();
}
});
/* submit edit */
$("#submit_edit").click(function () {
var order = $('#edit_order').val();
var userid = $('#edit_userid').val();
var name = $('#edit_name').val();
var pho_num = $('#edit_pho').val();
DwrService.update(order,userid,name,pho_num);
});
/* submit edit */
$("#add_submit").click(function () {
submit_add();
});
$("#search_submit").click(function () {
searchuser();
});
$("#input_search").keypress(function (event) {
if (event.keyCode == 13) {
searchuser();
}
});
$("#mydialog").keypress(function (event) {
if (event.keyCode == 13) {
$("#add_submit").click();
}
});
$("#mydialog2").keypress(function (event) {
if (event.keyCode == 13) {
$("#submit_edit").click();
}
});
});
/* show edit model */
function modeshow(date1,date2,date3,date4) {
$('#edit_order').val(date1);
$('#edit_userid').val(date2);
$('#edit_name').val(date3);
$('#edit_pho').val(date4);
$('#myModal1').modal('show');
}
/*show all user info*/
function showALl() {
$(".class_actor").parent().show();
}
/* add */
function submit_add() {
var userid = $('#add_userid').val();
var name = $('#add_name').val();
var pho_num = $('#add_pho').val();
DwrService.save(userid,name,pho_num);
}
/*search user by userid or name*/
function searchuser() {
if(searchbutton==0) {
var data = $("#input_search").val();
/*search user by name */
$(".class_name").each(function () {
var s = $(this).html();
if (s != data) {
$(this).parent().hide();
} else {
$(this).parent().show();
}
})
/*search user by userid*/
$(".class_userid").each(function () {
var s = $(this).html();
if (s != data) {
// $(this).parent().hide();
} else {
$(this).parent().show();
}
})
$("#search_button").attr("class","glyphicon glyphicon-remove");
searchbutton=1;
}else{
showALl();
searchbutton=0;
$("#search_button").attr("class","glyphicon glyphicon-search");
}
}
</script>
</head>
<body>
<div id="head_search">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background: transparent;border:transparent;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="input-group input-group-lg">
<input id="input_search" type="text" class="form-control" placeholder="请输入姓名或学号">
<span class="input-group-btn">
<button id="search_submit" class="btn btn-default" type="button">
<span id="search_button" class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</nav>
</div>
<!--table -->
<div id="main" class="container" style="padding-bottom: 60px">
<table class="table table-striped">
<caption>
<div>
<h1 class="text-center">
<span class="glyphicon glyphicon-user"></span> 通讯录
</h1>
</div>
</caption>
<thead>
<tr>
<th id="userid">学号</th>
<th id="name">姓名</th>
<th id="pho_num">电话</th>
<th id="activity">操作</th>
</tr>
</thead>
<tbody id="peopleTable">
<tr id="for_clone">
<td class="class_userid" id="user_id"></td>
<td class="class_name" id="user_name"></td>
<td class="class_num" id="user_num"></td>
<td class="class_actor" id="actor">
</td>
</tr>
</tbody>
</table>
</div>
<!-- 添加用户（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id = "mydialog" class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
添加用户
</h4>
</div>
<div class="modal-body">
<div class="input-group input-group-lg">
<span class="input-group-addon">学号</span>
<input id="add_userid" type="text" name = "userid" class="form-control" placeholder="请在此输入学号">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">姓名</span>
<input id="add_name" type="text" name = "name" class="form-control" placeholder="请在此输入姓名">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">电话</span>
<input id="add_pho" type="text" name = "pho_num" class="form-control" placeholder="请在此输入电话">
</div>
<div class="modal-footer">
<div class="text-center">
<button id="" class="pull-left" data-dismiss="modal" style="width:49%;height: 50px;">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button id="add_submit" type="button" class="btn btn-primary pull-right" style="width:49%;height: 50px;" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-ok"></span></button>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 修改用户信息（Modal） -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="mydialog2" class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel1">
修改用户信息
</h4>
</div>package cn.smileyan.classmate.service;
import cn.smileyan.classmate.bean.User;
import cn.smileyan.classmate.domain.UserList;
import org.directwebremoting.ui.dwr.Util;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.Map;
/**
* for dwr
*/
public class DwrService {
// matching the order to User
private Map<String,User> map=new HashMap<>();
/**
* show all users info on web page
*/
public void show(){
int i;
for(short t=0; t<UserList.getInstance().select().size(); t++){
User u = UserList.getInstance().select().get(t);
i = u.getId();
map.put(i+"", u); // put into map
// params for edit user's info
String params = i+",\'"+u.getUserid()+"\',\'"+u.getName()+"\',\'"+u.getPho_num()+"\'";
// add row
Util.cloneNode("for_clone", "", "" + i);
Util.setValue("user_num"+i, u.getPho_num() );
Util.setValue("user_name"+i, u.getName());
Util.setValue("user_id"+i, u.getUserid());
Util.setValue("actor"+i, "<a onclick=\"DwrService.remove("+i+");\" >删除</a>"+
"<a onclick=\"modeshow("+params+");\" >编辑</a>",false);
}
}
/**
* remove one
* @param id the id
*/
public void remove(String id){
int del_num = Integer.parseInt(id);
UserList.getInstance().delete(map.get(id).getId());
Util.removeNode("for_clone"+id); // remove from table
map.remove(id); //remove from map
}
/**
* get all users info
* @return LinkedList<User>
*/
public LinkedList<User> getAllUser(){
return UserList.getInstance().select();
}
/**
* add user
* @param userid
* @param name
* @param pho_name
*/
public void save(String userid,String name,String pho_name){
User user = new User();
user.setUserid(userid);
user.setName(name);
user.setPho_num(pho_name);
int id = UserList.getInstance().save(user);
user.setId(id);
map.put(id+"",user);
int i=id;
// params for edit user's info
String params = i+",\'"+user.getUserid()+"\',\'"+user.getName()+"\',\'"+user.getPho_num()+"\'";
// add row
Util.cloneNode("for_clone", "", "" + i);
Util.setValue("user_num"+i, user.getPho_num() );
Util.setValue("user_name"+i, user.getName());
Util.setValue("user_id"+i, user.getUserid());
Util.setValue("actor"+i, "<a onclick=\"DwrService.remove("+i+");\" >删除</a>"+
"<a onclick=\"modeshow("+params+");\" >编辑</a>",false);
}
/**
* update user
* @param id
* @param userid
* @param name
* @param pho_num
*/
public void update(int id,String userid,String name,String pho_num){
User user=new User();
user.setId(id);
user.setUserid(userid); // update user, and map also has been updated
user.setPho_num(pho_num);
user.setName(name);
UserList.getInstance().update(user);//update list and JDBC
String params = id+",\'"+user.getUserid()+"\',\'"+user.getName()+"\',\'"+user.getPho_num()+"\'";
// update page
Util.setValue("user_num"+id, pho_num );
Util.setValue("user_name"+id, name);
Util.setValue("user_id"+id, userid);
Util.setValue("actor"+id, "<a onclick=\"DwrService.remove("+id+");\" >删除</a>"+
"<a onclick=\"modeshow("+params+");\" >编辑</a>",false);
}
}
欢迎来到smileyan
<div class="modal-body">
<div class="input-group input-group-lg">
<span class="input-group-addon">序号</span>
<input id="edit_order" type="text" name = "userid" disabled="disabled" class="form-control">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">学号</span>
<input id="edit_userid" type="text" name = "userid" class="form-control" placeholder="请在此输入学号">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">姓名</span>
<input id="edit_name" type="text" name = "name" class="form-control" placeholder="请在此输入姓名">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">电话</span>
<input id="edit_pho" type="text" name = "pho_num" class="form-control" placeholder="请在此输入电话">
</div>
<div class="modal-footer">
<div class="text-center">
<button class="pull-left" data-dismiss="modal" style="width:49%;height: 50px;">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button id="submit_edit" type="button" class="btn btn-primary pull-right" style="width:49%;height: 50px;" data-toggle="modal" data-target="#myModal1">
<span class="glyphicon glyphicon-ok"></span></button>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<nav class="navbar navbar-default navbar-fixed-bottom" style="" role="navigation">
<div class="container">
<div class="text-center">
<button id="btn_search" class="pull-left" style="width:49%;height: 50px;">
<span class="glyphicon glyphicon-search"></span>查 询</button>
<button class="btn btn-primary pull-right" style="width:49%;height: 50px;" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus"></span> 添 加</button>
</div>
</div>
</nav>
</body>
</html>
package cn.smileyan.classmate.service;
import cn.smileyan.classmate.bean.User;
import cn.smileyan.classmate.domain.UserList;
import org.directwebremoting.ui.dwr.Util;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.Map;
/**
* for dwr
*/
public class DwrService {
// matching the order to User
private Map<String,User> map=new HashMap<>();
/**
* show all users info on web page
*/
public void show(){
int i;
for(short t=0; t<UserList.getInstance().select().size(); t++){
User u = UserList.getInstance().select().get(t);
i = u.getId();
map.put(i+"", u); // put into map
// params for edit user's info
String params = i+",\'"+u.getUserid()+"\',\'"+u.getName()+"\',\'"+u.getPho_num()+"\'";
// add row
Util.cloneNode("for_clone", "", "" + i);
Util.setValue("user_num"+i, u.getPho_num() );
Util.setValue("user_name"+i, u.getName());
Util.setValue("user_id"+i, u.getUserid());
Util.setValue("actor"+i, "<a onclick=\"DwrService.remove("+i+");\" >删除</a>"+
"<a onclick=\"modeshow("+params+");\" >编辑</a>",false);
}
}
/**
* remove one
* @param id the id
*/
public void remove(String id){
int del_num = Integer.parseInt(id);
UserList.getInstance().delete(map.get(id).getId());
Util.removeNode("for_clone"+id); // remove from table
map.remove(id); //remove from map
}
/**
* get all users info
* @return LinkedList<User>
*/
public LinkedList<User> getAllUser(){
return UserList.getInstance().select();
}
/**
* add user
* @param userid
* @param name
* @param pho_name
*/
public void save(String userid,String name,String pho_name){
User user = new User();
user.setUserid(userid);
user.setName(name);
user.setPho_num(pho_name);
int id = UserList.getInstance().save(user);
user.setId(id);
map.put(id+"",user);
int i=id;
// params for edit user's info
String params = i+",\'"+user.getUserid()+"\',\'"+user.getName()+"\',\'"+user.getPho_num()+"\'";
// add row
Util.cloneNode("for_clone", "", "" + i);
Util.setValue("user_num"+i, user.getPho_num() );
Util.setValue("user_name"+i, user.getName());
Util.setValue("user_id"+i, user.getUserid());
Util.setValue("actor"+i, "<a onclick=\"DwrService.remove("+i+");\" >删除</a>"+
"<a onclick=\"modeshow("+params+");\" >编辑</a>",false);
}
/**
* update user
* @param id
* @param userid
* @param name
* @param pho_num
*/
public void update(int id,String userid,String name,String pho_num){
User user=new User();
user.setId(id);
user.setUserid(userid); // update user, and map also has been updated
user.setPho_num(pho_num);
user.setName(name);
UserList.getInstance().update(user);//update list and JDBC
String params = id+",\'"+user.getUserid()+"\',\'"+user.getName()+"\',\'"+user.getPho_num()+"\'";
// update page
Util.setValue("user_num"+id, pho_num );
Util.setValue("user_name"+id, name);
Util.setValue("user_id"+id, userid);
Util.setValue("actor"+id, "<a onclick=\"DwrService.remove("+id+");\" >删除</a>"+
"<a onclick=\"modeshow("+params+");\" >编辑</a>",false);
}
}
注：如果需要下载整个项目源代码，请跟我联系一下，联系方式在个人主页的关于已经给出 https://www.smileyan.cn/。
（本处还是说一句让一些伙伴不大爽的话：此份代码售价：￥10元）
但是主要难写的代码已经开源在上面。就是如何使用DWR操作表格，添加表行，前端代码啥的，都写得很清楚，也希望觉得没必要花这个钱的自己动手写一写。完全谈不上复杂。有问题也可以和我交流。