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. 總結
萬變不離其宗,都是套路。
界面寫的多了,自然就知道如何應對新功能。
穩得很。