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. 总结 万变不离其宗，都是套路。 界面写的多了，自然就知道如何应对新功能。 稳得很。
![EasyUI+JavaWeb奖助学金管理系统[20]-项目总结与展望](https://ucc.alicdn.com/pic/developer-ecology/330d6712fdf74f1f96f2bbaa9de55eb4.png?x-oss-process=image/resize,h_160,m_lfit)