1. 本章任务
之前已陆续实现了登录、后台管理主页面、项目管理、机构管理功能。
本章来实现下人员管理功能，人员管理功能由学校管理员角色使用，其他学校管理员、班主任、学生均不允许进行人员管理操作。
由于常规的增删改查之前已经讲解的非常详细了，所以本篇主要讲解一些比较重点难点的内容。同时为了方便新手学习，在本篇的最后也会附上人员管理功能的全部相关类代码，便于粘贴使用。我就是这么NICE，无需感谢，哈哈。
2. 人员分页浏览的实现
人员的分页浏览，是有需要注意的地方的。
首先，是人员表关联了机构表，需要从机构表中获取人员对应的机构名称，此时涉及到联表查询。
第二，数据库中存储的人员的角色是英文字符串，但是在界面上显示时需要格式化为对应的中文含义，所以此处涉及到EasyUI表格列的格式化问题。
好的，为了能够在页面上显示机构名称，修改User实体类添加显示字段departName。
/**
* 用户
*/
public class User {
private String id;
private String userName;
private String loginName;
private String password;
private String role;
private String departId;
/**
* 冗余查询字段
*/
private String departName;
// 省略get set
}
EasyUI数据表格显示时，直接使用departName字段即可。
<table id="mainTable" title="人员列表" class="easyui-datagrid" url="CoreServlet?method=getUserPage" pagination="true"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th data-options="field:'id',width:50">序号</th>
<th data-options="field:'userName',width:50">姓名</th>
<th data-options="field:'loginName',width:50">登录名</th>
<th data-options="field:'role',width:50" formatter="formatRole">角色</th>
<th data-options="field:'departName',width:100">所属机构</th>
</tr>
</thead>
</table>
此时由于数据库中存储的角色是英文字符串，需要通过格式化方法转化为中文，即formatRole方法。
// 格式化类型
function formatRole(val, row) {
if (val == "schoolmaster") {
return "学校管理员";
} else if (val == "collegemaster") {
return "学院管理员";
} else if (val == "classmaster") {
return "班主任";
} else {
return "学生";
}
}
最后，数据库操作层要实现联表查询，修改UserDao如下。
/**
* 获取数量
*/
public int getCount() throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "select count(id) from user ";
QueryRunner runner = new QueryRunner();
Number number = (Number) runner.query(conn, sql, new ScalarHandler());
int value = number.intValue();
ConnectionUtils.releaseConnection(conn);
return value;
}
/**
* 分页查询
*/
public List<User> getPage(int page, int rows) throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "select u.*,d.name as departName from user u left join depart d on u.departId=d.id limit ?,?";
QueryRunner runner = new QueryRunner();
Object[] params = { (page - 1) * rows, rows };
List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class), params);
ConnectionUtils.releaseConnection(conn);
return users;
}
3. 人员新增功能的实现
人员新增时，有两个关键节点。
第一是人员的角色，需要通过下拉框(easyui-combobox)来实现，下拉框的显示内容和值分别对应角色的中文名称和英文存储值。
第二是人员所属的机构，也是下拉框实现的，但是机构的信息是从数据库中获取的。下拉框的内容和值分别对应机构的id和name。
OK，我们先来设计下新增弹窗，注意两个下拉框：
<!-- 新增弹窗 -->
<div id="dialog-add" class="easyui-dialog" title="新增" data-options="iconCls:'icon-ok',closed:'true'" style="width: 600px; height: 400px; padding: 10px">
<table>
<tr>
<td>姓名</td>
<td><input id="add-userName" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td>登录名：</td>
<td><input id="add-loginName" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td>角色：</td>
<td><select id="add-role" class="easyui-combobox" style="width: 200px;">
<option value="schoolmaster">学校管理员</option>
<option value="collegemaster">学院管理员</option>
<option value="classmaster">班主任</option>
<option value="student">学生</option>
</select></td>
</tr>
<tr>
<td>所属机构：</td>
<td><select id="add-departId" class="easyui-combobox" style="width: 200px;">
</select></td>
</tr>
<tr>
<td></td>
<td><a id="btn" onclick="btnAddSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
</tr>
</table>
</div>
然后在页面初始化时，从数据库中获取机构信息，将加载到所属机构的下拉框add-departId中。
// 初始化
$(function() {
loadDeparts();
});
// 加载机构
function loadDeparts() {
$.ajax({
url: "CoreServlet?method=getDepartList",
type: "post",
dataType: "json",
data: null,
success: function(res) {
console.log(res);
if (res.code == 0) {
// 为指定下拉框增加选项
addItemsForSelect("#add-departId", res.data);
addItemsForSelect("#edit-departId", res.data);
} else { //提示错误信息
alert(res.msg);
}
},
});
}
// 为下拉框增加选项
function addItemsForSelect(id, data) {
// 清空选项
$(id).combobox("clear");
var items = [];
// 动态添加的选项
$.each(data, function(i, v) { //遍历返回值
items.push({
"value": v.id,
"text": v.name
});
});
// 加载数据
$(id).combobox("loadData", items);
// 设置默认选中值
$(id).combobox("setValue", items[0].value);
}
其他的保存就跟之前的项目、机构管理类似了，此处不再详述。需要注意新增用户时，可以将其密码设置为默认123456，用户登录后自行修改即可。
3. 人员编辑功能的实现
需要注意编辑人员时，人员的所属机构同样是从数据库中获取的，所以在上面代码中会有如下代码，即同时为新增弹窗、编辑弹窗的机构下拉框增加机构列表选项。
addItemsForSelect("#add-departId", res.data);
addItemsForSelect("#edit-departId", res.data);
其他功能就是常规的编辑功能了，此处不再赘述。
4. 人员删除功能的实现
之前项目管理、机构管理均没有删除功能，主要是担心会删除被引用的基础数据。
人员管理是需要删除功能的，毕竟人员录入错误的可能性还是比较大的。PS：在实际的项目中，对业务数据的删除大多采用软删除，即通过一个数据库字段描述数据是否被业务删除，此处我们就简单点，直接将其从数据库中删除。
由于删除操作风险性比较高，为了避免不小心点到删除按钮导致的误删除，我们在删除之前应该弹窗提示当前用户是否确认删除。
// 删除
function btnRemoveClick() {
// 获取当前选中行
var row = $('#mainTable').datagrid('getSelected');
if (row == null) {
alert("请选择要删除的行");
return;
}
// 提示用户确认
$.messager.confirm('确认?', '您确认删除吗?', function(r) {
if (r) { //用户选择确认
$.ajax({
url: "CoreServlet?method=removeUser",
type: "post",
dataType: "json",
data: {
id: row.id
},
success: function(res) {
console.log(res);
if (res.code == 0) { //成功则刷新表格
$('#mainTable').datagrid('reload');
} else { //提示错误信息
alert(res.msg);
}
},
});
}
});
}
后台添加对应删除方法即可：
// 删除用户
else if (method.equals("removeUser")) {
UserDao userDao = new UserDao();
userDao.deleteById(request.getParameter("id"));
result.setCode(0);
result.setMsg("操作成功");
}
5. 本章完整源代码
为了方便大家学习，贴上本章完整源码。
5.1 userManager.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div class="tool-box">
<a id="btn" onclick="btnAddClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a> <a
id="btn" onclick="btnEditClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a> <a
id="btn" onclick="btnRemoveClick()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
</div>
<table id="mainTable" title="人员列表" class="easyui-datagrid" url="CoreServlet?method=getUserPage" pagination="true"
singleSelect="true" fitColumns="true">
<thead>
<tr>
<th data-options="field:'id',width:50">序号</th>
<th data-options="field:'userName',width:50">姓名</th>
<th data-options="field:'loginName',width:50">登录名</th>
<th data-options="field:'role',width:50" formatter="formatRole">角色</th>
<th data-options="field:'departName',width:100">所属机构</th>
</tr>
</thead>
</table>
<!-- 新增弹窗 -->
<div id="dialog-add" class="easyui-dialog" title="新增" data-options="iconCls:'icon-ok',closed:'true'" style="width: 600px; height: 400px; padding: 10px">
<table>
<tr>
<td>姓名</td>
<td><input id="add-userName" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td>登录名：</td>
<td><input id="add-loginName" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td>角色：</td>
<td><select id="add-role" class="easyui-combobox" style="width: 200px;">
<option value="schoolmaster">学校管理员</option>
<option value="collegemaster">学院管理员</option>
<option value="classmaster">班主任</option>
<option value="student">学生</option>
</select></td>
</tr>
<tr>
<td>所属机构：</td>
<td><select id="add-departId" class="easyui-combobox" style="width: 200px;">
</select></td>
</tr>
<tr>
<td></td>
<td><a id="btn" onclick="btnAddSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
</tr>
</table>
</div>
<!-- 编辑弹窗 -->
<div id="dialog-edit" class="easyui-dialog" title="编辑" data-options="iconCls:'icon-ok',closed:'true'" style="width: 600px; height: 400px; padding: 10px">
<table>
<tr>
<td>编号：</td>
<td><input id="edit-id" class="easyui-textbox" style="width: 200px" disabled></td>
</tr>
<tr>
<td>姓名</td>
<td><input id="edit-userName" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td>登录名：</td>
<td><input id="edit-loginName" class="easyui-textbox" style="width: 200px"></td>
</tr>
<tr>
<td>角色：</td>
<td><select id="edit-role" class="easyui-combobox" style="width: 200px;">
<option value="schoolmaster">学校管理员</option>
<option value="collegemaster">学院管理员</option>
<option value="classmaster">班主任</option>
<option value="student">学生</option>
</select></td>
</tr>
<tr>
<td>所属机构：</td>
<td><select id="edit-departId" class="easyui-combobox" style="width: 200px;">
</select></td>
</tr>
<tr>
<td></td>
<td><a id="btn" onclick="btnEditSubmit()" href="#" class="easyui-linkbutton">保存</a></td>
</tr>
</table>
</div>
</body>
<script>
// 初始化
$(function() {
loadDeparts();
});
// 加载机构
function loadDeparts() {
$.ajax({
url: "CoreServlet?method=getDepartList",
type: "post",
dataType: "json",
data: null,
success: function(res) {
console.log(res);
if (res.code == 0) {
// 为指定下拉框增加选项
addItemsForSelect("#add-departId", res.data);
addItemsForSelect("#edit-departId", res.data);
} else { //提示错误信息
alert(res.msg);
}
},
});
}
// 为下拉框增加选项
function addItemsForSelect(id, data) {
// 清空选项
$(id).combobox("clear");
var items = [];
// 动态添加的选项
$.each(data, function(i, v) { //遍历返回值
items.push({
"value": v.id,
"text": v.name
});
});
// 加载数据
$(id).combobox("loadData", items);
// 设置默认选中值
$(id).combobox("setValue", items[0].value);
}
// 新增点击
function btnAddClick() {
$('#dialog-add').dialog('open');
}
// 新增保存
function btnAddSubmit() {
var param = {
userName: $("#add-userName").val(),
loginName: $("#add-loginName").val(),
role: $("#add-role").combobox("getValue"), //获取选中项的值
departId: $("#add-departId").combobox("getValue"), //获取选中项的值
}
$.ajax({
url: "CoreServlet?method=addUser",
type: "post",
dataType: "json",
data: param,
success: function(res) {
console.log(res);
if (res.code == 0) { //成功则刷新表格
$('#mainTable').datagrid('reload');
$('#dialog-add').dialog('close');
} else { //提示错误信息
alert(res.msg);
}
},
});
}
// 编辑点击
function btnEditClick() {
// 获取当前选中行
var row = $('#mainTable').datagrid('getSelected');
if (row == null) {
alert("请选择要修改的行");
return;
}
// 将选中行信息设置到弹窗
$("#edit-id").textbox("setValue", row.id);
$("#edit-userName").textbox("setValue", row.userName);
$("#edit-loginName").textbox("setValue", row.loginName);
$("#edit-role").combobox("setValue", row.role);
$("#edit-departId").combobox("setValue", row.departId);
$('#dialog-edit').dialog('open');
}
// 编辑保存
function btnEditSubmit() {
var param = {
id: $("#edit-id").val(),
userName: $("#edit-userName").val(),
loginName: $("#edit-loginName").val(),
role: $("#edit-role").combobox("getValue"),
departId: $("#edit-departId").combobox("getValue"),
}
$.ajax({
url: "CoreServlet?method=editUser",
type: "post",
dataType: "json",
data: param,
success: function(res) {
console.log(res);
if (res.code == 0) { //成功则刷新表格
$('#mainTable').datagrid('reload');
$('#dialog-edit').dialog('close');
} else { //提示错误信息
alert(res.msg);
}
},
});
}
// 格式化类型
function formatRole(val, row) {
if (val == "schoolmaster") {
return "学校管理员";
} else if (val == "collegemaster") {
return "学院管理员";
} else if (val == "classmaster") {
return "班主任";
} else {
return "学生";
}
}
// 删除
function btnRemoveClick() {
// 获取当前选中行
var row = $('#mainTable').datagrid('getSelected');
if (row == null) {
alert("请选择要删除的行");
return;
}
// 提示用户确认
$.messager.confirm('确认?', '您确认删除吗?', function(r) {
if (r) { //用户选择确认
$.ajax({
url: "CoreServlet?method=removeUser",
type: "post",
dataType: "json",
data: {
id: row.id
},
success: function(res) {
console.log(res);
if (res.code == 0) { //成功则刷新表格
$('#mainTable').datagrid('reload');
} else { //提示错误信息
alert(res.msg);
}
},
});
}
});
}
</script>
</html>
5.2 CoreServlet.java
@WebServlet("/CoreServlet")
public class CoreServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置输入输出格式、编码
response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter(); // 获取writer方法，用于将数据返回给ajax
// 获取用户在网页输入的用户名和密码
Result result = null;
try {
result = handleRequest(request);
} catch (Exception ex) {
result = new Result();
result.setCode(9999);
result.setMsg(ex.getMessage());
System.err.println(ex.getMessage());
} finally {
out.write(JSON.toJSONString(result));
out.flush();
out.close();
}
}
/**
* 具体处理请求
*/
public Result handleRequest(HttpServletRequest request) throws Exception {
Result result = new Result();
String method = request.getParameter("method");
// 如果未登录，且不是请求的登录方法，直接抛出异常
User loginUser = (User) request.getSession().getAttribute("loginUser");
if (loginUser == null && !method.equals("login")) {
throw new Exception("未登录！");
}
// 请求页码、每页显示行数、总数
int page = 1, rows = 10, total = 0;
if (method.contains("Page") == true) {// 当前为分页请求
// 获取
String inputPage = request.getParameter("page");
String inputRows = request.getParameter("rows");
page = (inputPage == null) ? 1 : Integer.parseInt(inputPage);
rows = (inputRows == null) ? 10 : Integer.parseInt(inputRows);
}
// 登录处理
if (method.equals("login")) {
String loginName = request.getParameter("loginName");
String password = request.getParameter("password");
UserDao userDao = new UserDao();
List<User> users = userDao.getUsersByLoginNameAndPassword(loginName, password);
if (users != null && users.size() == 1) {// 登录成功
result.setCode(0);
result.setMsg("操作成功");
result.setData(users.get(0));
request.getSession().setAttribute("loginUser", users.get(0));
} else {// 登录失败
result.setCode(9999);
result.setMsg("操作失败");
}
}
// 查询登录用户拥有的菜单
else if (method.equals("getMenusOfUser")) {
MenuDao menuDao = new MenuDao();
result.setData(menuDao.getMenusOfUser(loginUser));// 返回数据为对应菜单
result.setCode(0);
result.setMsg("操作成功");
}
// 获取项目分页
else if (method.equals("getProjectPage")) {
ProjectDao projectDao = new ProjectDao();
total = projectDao.getCount();
result.setTotal(total);
result.setRows(projectDao.getPage(page, rows));
}
// 新增项目保存
else if (method.equals("addProject")) {
ProjectDao projectDao = new ProjectDao();
Project project = new Project();
project.setType(request.getParameter("type"));
project.setName(request.getParameter("name"));
project.setAbout(request.getParameter("about"));
projectDao.insert(project);
result.setCode(0);
result.setMsg("操作成功");
}
// 编辑项目保存
else if (method.equals("editProject")) {
ProjectDao projectDao = new ProjectDao();
Project project = new Project();
project.setId(request.getParameter("id"));
project.setType(request.getParameter("type"));
project.setName(request.getParameter("name"));
project.setAbout(request.getParameter("about"));
projectDao.update(project);
result.setCode(0);
result.setMsg("操作成功");
}
// 获取机构列表
else if (method.equals("getDepartList")) {
DepartDao departDao = new DepartDao();
result.setCode(0);
result.setData(departDao.getAll());
}
// 获取机构分页
else if (method.equals("getDepartPage")) {
DepartDao departDao = new DepartDao();
total = departDao.getCount();
result.setTotal(total);
result.setRows(departDao.getPage(page, rows));
}
// 新增机构保存
else if (method.equals("addDepart")) {
DepartDao departDao = new DepartDao();
Depart depart = new Depart();
depart.setType(request.getParameter("type"));
depart.setName(request.getParameter("name"));
depart.setParentId(request.getParameter("parentId"));
departDao.insert(depart);
result.setCode(0);
result.setMsg("操作成功");
}
// 编辑机构保存
else if (method.equals("editDepart")) {
DepartDao departDao = new DepartDao();
Depart depart = new Depart();
depart.setId(request.getParameter("id"));
depart.setType(request.getParameter("type"));
depart.setName(request.getParameter("name"));
depart.setParentId(request.getParameter("parentId"));
departDao.update(depart);
result.setCode(0);
result.setMsg("操作成功");
}
// 获取人员分页
else if (method.equals("getUserPage")) {
UserDao userDao = new UserDao();
total = userDao.getCount();
result.setTotal(total);
result.setRows(userDao.getPage(page, rows));
}
// 新增人员保存
else if (method.equals("addUser")) {
UserDao userDao = new UserDao();
User user = new User();
user.setUserName(request.getParameter("userName"));
user.setLoginName(request.getParameter("loginName"));
user.setRole(request.getParameter("role"));
user.setDepartId(request.getParameter("departId"));
user.setPassword("123456");
userDao.insert(user);
result.setCode(0);
result.setMsg("操作成功");
}
// 编辑人员保存
else if (method.equals("editUser")) {
UserDao userDao = new UserDao();
User user = new User();
user.setId(request.getParameter("id"));
user.setUserName(request.getParameter("userName"));
user.setLoginName(request.getParameter("loginName"));
user.setRole(request.getParameter("role"));
user.setDepartId(request.getParameter("departId"));
userDao.update(user);
result.setCode(0);
result.setMsg("操作成功");
}
// 删除用户
else if (method.equals("removeUser")) {
UserDao userDao = new UserDao();
userDao.deleteById(request.getParameter("id"));
result.setCode(0);
result.setMsg("操作成功");
}
return result;
}
}
5.3 UserDao.java
/**
* 用户数据访问类
*/
public class UserDao {
/**
* 通过登录名、密码获取用户
*/
public List<User> getUsersByLoginNameAndPassword(String loginName, String password) throws SQLException {
Connection conn = ConnectionUtils.getConnection();
String sql = "select * from user where loginName=? and password=?";
QueryRunner runner = new QueryRunner();
Object[] params = { loginName, password };
List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class), params);
ConnectionUtils.releaseConnection(conn);
return users;
}
/**
* 新增
*/
public void insert(User user) throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "insert into user(userName,loginName,password,role,departId)values(?,?,?,?,?)";
Object[] params = { user.getUserName(), user.getLoginName(), user.getPassword(), user.getRole(), user.getDepartId() };
QueryRunner runner = new QueryRunner();
runner.update(conn, sql, params);
ConnectionUtils.releaseConnection(conn);
}
/**
* 移除
*/
public void deleteById(String id) throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "delete from user where id =?";
Object[] params = { id };
QueryRunner runner = new QueryRunner();
runner.update(conn, sql, params);
ConnectionUtils.releaseConnection(conn);
}
/**
* 更新
*/
public void update(User user) throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "update user set userName=?,loginName=?,password=?,role=?,departId=? where id =?";
Object[] params = { user.getUserName(), user.getLoginName(), user.getPassword(), user.getRole(), user.getDepartId(), user.getId() };
QueryRunner runner = new QueryRunner();
runner.update(conn, sql, params);
ConnectionUtils.releaseConnection(conn);
}
/**
* 获取一个
*/
public User getById(String id) throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "select * from user where id =?";
Object[] params = { id };
QueryRunner runner = new QueryRunner();
User user = (User) runner.query(conn, sql, new BeanHandler<User>(User.class), params);
ConnectionUtils.releaseConnection(conn);
return user;
}
/**
* 获取全部
*/
public List<User> getAll() throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "select * from user ";
QueryRunner runner = new QueryRunner();
List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class));
ConnectionUtils.releaseConnection(conn);
return users;
}
/**
* 获取数量
*/
public int getCount() throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "select count(id) from user ";
QueryRunner runner = new QueryRunner();
Number number = (Number) runner.query(conn, sql, new ScalarHandler());
int value = number.intValue();
ConnectionUtils.releaseConnection(conn);
return value;
}
/**
* 分页查询
*/
public List<User> getPage(int page, int rows) throws Exception {
Connection conn = ConnectionUtils.getConnection();
String sql = "select u.*,d.name as departName from user u left join depart d on u.departId=d.id limit ?,?";
QueryRunner runner = new QueryRunner();
Object[] params = { (page - 1) * rows, rows };
List<User> users = runner.query(conn, sql, new BeanListHandler<User>(User.class), params);
ConnectionUtils.releaseConnection(conn);
return users;
}
}
6. 总结
万变不离其宗，都是套路。
界面写的多了，自然就知道如何应对新功能。
稳得很。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦