本文提供详细页面代码与java后端代码，并提供编写过程中值得注意的地方。
简单员工管理系统
注意：写页面代码时，需注意以下几点：
1、修改、添加操作，需先清空模态框中form表单缓存（不然会造成修改数据后，点击添加操作，刚修改的数据会展示在添加操作页面中）。 方法： $("#form")[0].reset();
2、修改、添加操作，需先清空隐藏域（即隐藏域中的id。若不清空，执行修改操作后，拿到的id保存在隐藏域中，这时执行添加操作（添加操作本无id），会将执行修改操作时的id，传给添加操作。造成添加操作变成修改操作的bug）。 方法：$("#eid").val("");
3、添加操作无id，修改操作有id（通过隐藏域设置id）。 方法：<input type="hidden" id="eid" name="eid" >
4、每次查询之前，需先将页面原来的信息清空（不然执行添加与修改操作后，新查询到的数据，展示在原来的数据下方）。 方法：$("tbody").empty();
5、单选框信息查询（例如性别）赋值方法：$("#sex1, #sex2").val([sex])
涉及到的一些方法：
1、$().eq(n)方法。下标过滤，指的是根据元素集合的下标来过滤
(1). 在jQuery 中，可以使用 eq() 方法来实现下标过滤。
(2). n 是一个整数。当 n 取值为 0 或正整数时，eq(0) 获取的是第 1 个元素，eq(1) 获取的是第 2 个元素，……，以此类推。当 n 取值为负整数时，eq(-1) 获取的是倒数第 1 个元素，eq(-2) 获取的是倒数第 2 个元素，……，以此类推。
2、serialize() 方法，
(1). 功能：将表单内容序列化成一个字符串。
(2). 这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为* $("form").serialize()即可。
页面代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
******<!-- 以上是引入插件 -->*** ***
*<!--样式调整 -->*
<style type="text/css">
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
background-color: lightgray;
}
tr,th{
text-align: center;
}
</style>
</head>
*<!-- 首行信息 -->*
<body>
<div class="container-fluid table-hover">
<h1 style="text-align: center; color:midnightblue">员工管理系统</h1>
<table class="table table-bordered table-hover">
<thead style="background-color: burlywood">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话号码</th>
<th>住址</th>
<th>卡号</th>
<th>操作
<button type="button" class="btn btn-success btn-xs" id="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
</button>
</th>
</tr>
</thead>
<tbody>
*<!-- 动态生成的信息插入这里 -->*
</tbody>
</table>
</div>
<!--数据操作，模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">数据操作</h4>
</div>
<div class="modal-body">
<form id="form">
<input type="hidden" id="eid" name="eid" >
<div class="form-group">
<label for="ename">姓名</label>
<input type="text" class="form-control" id="ename" name="ename" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="sex">性别</label>
<input type="radio" id="sex1" name="sex" value="男" checked="checked">男
<input type="radio" id="sex2" name="sex" value="女">女
</div>
<div class="form-group">
<label for="tel">电话</label>
<input type="text" class="form-control" id="tel" name="tel" placeholder="请输入电话">
</div>
<div class="form-group">
<label for="address">住址</label>
<input type="text" class="form-control" id="address" name="address" placeholder="请输入住址">
</div>
<div class="form-group">
<label for="card">卡号</label>
<input type="text" class="form-control" id="card" name="card" placeholder="请输入卡号">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
<!-- js代码 -->
<script type="text/javascript">
//入口函数
$(function(){
//调用方法，展示信息
select()
//添加功能
$("#add").click(function(){
**//清空缓存**
$("#form")[0].reset();
**//清空隐藏域**
$("#eid").val("");
//弹出模态框
$("#myModal").modal("show");
})
//修改、添加。动态创建的信息，使用事件委托
$("tbody").on("click", "#update", function(){
//清空缓存
$("#form")[0].reset();
//清空隐藏域
$("#eid").val("");
//获取id
var eid = $(this).val();
//获取当前的信息
var ename = $(this).parents("tr").find("td:eq(0)").text();
var sex = $(this).parents("tr").find("td:eq(1)").text();
var tel = $(this).parents("tr").find("td:eq(3)").text();
var address = $(this).parents("tr").find("td:eq(2)").text();
var card = $(this).parents("tr").find("td:eq(4)").text();
//写入模态框的form中
$("#ename").val(ename)
单选框，需这样处理
$("#sex1, #sex2").val([sex])
$("#tel").val(tel)
$("#address").val(address)
$("#card").val(card)
$("#eid").val(eid)
//弹出模态框
$("#myModal").modal("show");
})
//保存模态框内容
$("#save").click(function(){
//发送请求
$.ajax({
//请求方式
type: "post",
//路径
url: "/emp/save",
//请求数据类型
data: $("#form").serialize(),
**//serialize() 方法，功能：将表单内容序列化成一个字符串。这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为* $("form").serialize()即可。*
//处理返回值
success: function(msg){
if (msg.indexOf("ok") != -1) {
//关闭模态框
$("#myModal").modal("hide");
//刷新页面
select();
//弹窗提示
//alert("保存成功！")
} else {
//弹窗提示
alert("保存失败！")
}
}
});
})
//删除操作
$("tbody").on("click", "#del", function(){
//删除确认框
if (confirm("确定要删除吗？")) {
//获取id
var eid = $(this).val();
//发送请求
$.ajax({
type: "post",
url: "/emp/del",
data: {"eid":eid},
success: function(msg){
if (msg.indexOf("ok") != -1) {
select();
//弹窗提示
alert("删除成功！")
} else {
//弹窗提示
alert("删除失败！")
}
}
});
}
});
});
//查询操作,访问数据库，数据展示至页面
function select(){
***//查询之前先清空原来的页面***
$("tbody").empty();
//发送请求
$.ajax({
//发送方式
type: "post",
//路径
url: "/emp/findAll",
//接收数据方式
dataType: "json",
//处理接收到的信息
success: function(msg){
//调用方法，添加信息
addTr(msg);
}
});
}
//字符串拼接，加入tbody节点
function addTr(msg){
$(msg).each(function(i, obj){
//拼接
var trs = '<tr>'+
'<td>'+obj.ename+'</td>'+
'<td>'+obj.sex+'</td>'+
'<td>'+obj.tel+'</td>'+
'<td>'+obj.address+'</td>'+
'<td>'+obj.card+'</td>'+
'<td>'+
'<button type="button" class="btn btn-info btn-xs" id="update" value='+obj.eid+'>'+
'<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button> '+
'<button type="button" class="btn btn-danger btn-xs" id="del" value='+obj.eid+'>'+
'<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button>'+
'</td>'+
'</tr>'
//动态查询到的数据，加入tbody节点
$("tbody").append(trs);
})
}
</script>
</body>
</html>
java端
controller层：
@Controller
@RequestMapping("/emp")
public class EmpController {
@Autowired
private IEmpService service;
@RequestMapping("/findAll") //与页面传过来的路径一致
@ResponseBody //不走视图解析器
public List<Emp> findAll(){
//查询所有
return service.findAll();
}
@RequestMapping("/save") //与页面传过来的路径一致
@ResponseBody //不走视图解析器
public String saveData(Emp emp){ //保存数据
try {
//调用数据修改方法（包括添加与修改）
service.edit(emp);
//成功，则返回ok
return "ok";
} catch (Exception e) {
//打印错误信息
e.printStackTrace();
//失败，则返回error
return "error";
}
}
@RequestMapping("/del")
@ResponseBody
public String delData(Integer eid){ //删除操作，通过id删除
try {
//调用删除方法
service.del(eid);
return "ok";
} catch (Exception e) {
e.printStackTrace();
return "error";
}
}
}
service层:
public interface IEmpService {
//查询操作
List<Emp> findAll();
//删除操作
void del(Integer eid);
//数据修改（包括添加与修改）
void edit(Emp emp);
}
service层实现类：
@Service
public class EmpServiceImpl implements IEmpService {
@Autowired
private EmpMapper mapper;
@Override
public List<Emp> findAll() {//查询数据
return mapper.findAll();
}
@Override
public void edit(Emp emp) { //修改数据操作（包括添加与修改）
if (emp.getEid() != null) { //有id，则为修改数据
mapper.update(emp);
} else { //无id则为添加操作
mapper.add(emp);
}
}
@Override
public void del(Integer eid) { //通过id删除
mapper.del(eid);
}
}
mapper层：
public interface EmpMapper {
//查询
List<Emp> findAll();
//修改
void update(Emp emp);
//删除
void del(Integer eid);
//添加
void add(Emp emp);
}
*Mapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 包路径-->
<mapper namespace="cn.itsource.mapper.EmpMapper">
<!-- List<Emp> findAll(); //查询。注意：查询时尽量不使用*，使用具体的字段-->
<select id="findAll" resultType="cn.itsource.domain.Emp">
select * from emp
</select>
<!-- void update(Emp emp); //修改-->
<update id="update">
update emp set ename=#{ename}, sex=#{sex},
address=#{address}, tel=#{tel}, card=#{card} where eid=#{eid}
</update>
<!-- void del(Integer eid); //删除-->
<delete id="del">
delete from emp where eid=#{eid}
</delete>
<!-- void add(Emp emp); //添加 -->
<insert id="add">
insert into emp(ename, sex, address, tel, card) value(#{ename}, #{sex}, #{address}, #{tel}, #{card})
</insert>
</mapper>
效果展示：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
