1.前台html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>管理后台.................</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="/ck-bs/jquery-easy-ui/jquery.min.js"></script>
<script type="text/javascript" src="/ck-bs/jquery-easy-ui/jquery.cookie.js"></script>
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="/ck-bs/jquery-easy-ui/themes/default/easyui.css"/>
<script type="text/javascript" src="/ck-bs/jquery-easy-ui/changeEasyuiTheme.js"></script>
<link rel="stylesheet" type="text/css" href="/ck-bs/jquery-easy-ui/themes/icon.css"/>
<script type="text/javascript" src="/ck-bs/jquery-easy-ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/ck-bs/jquery-easy-ui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/ck-bs/js/util.js"></script>
<script type="text/javascript" src="/ck-bs/js/validatebox.js"></script>
<script type="text/javascript" src="/ck-bs/js/common.js"></script>
<script type="text/javascript" src="/ck-bs/jquery-easy-ui/Chart.js"></script>
<style type="text/css">
.datagrid-view{
height: 500px;
}
</style>
</head>
<body>
<div id="toolbar" style="padding:5px;height:auto">
<div>
<span>处理状态:</span>
<select id="regSource" class="easyui-combobox">
<option value="weixin">微信</option>
<option value="zfb">支付宝</option>
<option value="qq">QQ</option>
<option value="mobile">手机</option>
</select>
<a href="javascript:search()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
<a href="javascript:reset()" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">重置</a>
</div>
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="addUserInfo()">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUserInfo()">修改</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="delUser()">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editRole()">分配角色</a>
</div>
</div>
<table id="users_tb" class="easyui-datagrid" style="width:100%;height:100%;font-size:15px">
</table>
<!-- 用户信息窗口 -->
<div id="userInfoWin" class="easyui-window" title="用户信息"
style="width: 500px; height: auto;" closed="true">
<form id="userInfoForm" style="padding: 10px 20px 10px 40px;" method="post" enctype="multipart/form-data">
<input type="hidden" name="userId"/>
<table align="center">
<tr>
<td>用户头像:</td>
<td>
<input class="easyui-filebox" data-options="prompt:'请选择...',buttonText:'上传图片',onChange:function(){checkUploadUserPic(this)}"
name="userIcon" id="userIcon" style="width:310px"/>
</td>
</tr>
<tr>
<td>注册来源:</td>
<td >
<select id="regSource" class="easyui-combobox" style="width:310px" name="regSource" style="width:200px;">
<option value="weixin">微信</option>
<option value="zfb">支付宝</option>
<option value="qq">QQ</option>
<option value="mobile">手机</option>
</select>
</td>
</tr>
<tr>
<td>用户类型:</td>
<td>
<select id="userType" class="easyui-combobox" style="width:310px" name="userType" style="width:200px;">
<option value="COMMON">普通用户</option>
<option value="SYS">管理员</option>
<option value="SUPPLIER">供应商</option>
</select>
</td>
</tr>
<tr>
<td>用户状态:</td>
<td>
<select id="userState" class="easyui-combobox" style="width:310px" name="userState" style="width:200px;">
<option value="1">有效</option>
<option value="0">冻结</option>
<option value="2">审核中</option>
</select>
</td>
</tr>
<tr>
<td>用户名:</td>
<td><input class="easyui-textbox" type="text" name="nickName" style="width:310px" data-options="required:true,validType:'length[0,100]'"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input class="easyui-textbox" type="text" name="userPwd" style="width:310px" data-options="required:true,validType:'length[0,100]'"/></td>
</tr>
</table>
<div style="padding: 5px; text-align: center;">
<a href="#" class="easyui-linkbutton" icon="icon-ok" οnclick="javascript:saveUsers()">确定</a> <a
href="#" class="easyui-linkbutton" icon="icon-cancel" οnclick="javascript:$('#win').window('close')">取消</a>
</div>
</form>
</div>
<!-- 权限编辑窗口 -->
<div id="win" class="easyui-window" title="分配角色"
style="width: 500px; height: auto;" closed="true">
<form id="userrole" style="padding: 10px 20px 10px 40px;">
<input type="hidden" name="userId" id="edituserId"/>
<div style="padding: 5px; text-align: center;">
角色(可多选):<select class="easyui-combobox" id="editrolesIds" name="rolesIds" data-options="multiple:true" style="width:200px;"></select>
</div>
<div style="padding: 5px; text-align: center;">
<a href="#" class="easyui-linkbutton" icon="icon-ok" οnclick="javascript:saveUserRole()">确定</a> <a
href="#" class="easyui-linkbutton" icon="icon-cancel" οnclick="javascript:$('#win').window('close')">取消</a>
</div>
</form>
</div>
<script type="text/javascript" src="../../js/user/users.js"></script>
</body>
</html>
2.前台js
/**图片上传格式验证*/
function checkUploadUserPic(obj){
var filepath =$(obj).filebox('getValue');
if(filepath==""){
//alert("请选择上传的文件!");
return false;
}
var extname = filepath.substring(filepath.lastIndexOf(".")+1,filepath.length);
extname = extname.toLowerCase();//处理了大小写
if(extname!= "bmp"&&extname!= "jpg"&&extname!= "gif"&&extname!= "png"){
alert("只能上传bmp,jpg,gif,png格式的图片!");
$(obj).filebox('setValue','');
return false;
}
}
/**
* 初始化界面
*/
var dataGrid;
var rowEditor = undefined;
var editRow = undefined;
$(function() {
dataGrid = $('#users_tb').datagrid(
{
url : "../../service/Users/all",// 加载的URL
isField : "userId",
method : "POST",
pagination : false,// 显示分页
fit : true,// 自动补全
fitColumns : true,
pagination:true,
rownumbers:true,
singleSelect : true,
iconCls : "icon-save",// 图标
columns : [ [ // 每个列具体内容
{
field:"userId",
title:"ID",
width:40
},
{
field:"rolesIds",
title:"用户角色",
hidden:true
},
{
field:"userIcon",
title:"用户头像",
width:80,
formatter : function(value, row, index) {
return '<img class="easyui-img" style="width: 40px;height: 40px;" src="../../upload/users/'+value+'"></img>';
}
},
{
field:"regSource",
title:"注册来源",
width:80,
formatter : function(value, row, index) {
if (value == 'weixin') {
return '<span>微信</span>';
} else if (value == 'zfb') {
return '<span>支付宝</span>';
} else if (value == 'qq') {
return '<span>QQ</span>';
} else {
return '<span>手机</span>';
}
}
},
{
field:"userType",
title:"用户类型",
width:80,
formatter : function(value, row, index) {
if (value == 'SYS') {
return '<span>管理员</span>';
} else if (value == 'COMMON') {
return '<span>普通用户</span>';
} else {
return '<span>供应商</span>';
}
}
},
{
field:"userState",
title:"用户状态",
width:80,
formatter : function(value, row, index) {
if (value == '1') {
return '<span>有效</span>';
} else if (value == '0') {
return '<span>冻结</span>';
} else {
return '<span>审核中</span>';
}
}
},
{
field:"userPwd",
title:"用户密码",
width:80
},
{
field:"nickName",
title:"用户名",
width:80
},
{
field:"regTm",
title:"创建时间",
width:80
}
] ],
toolbar : "#toolbar" // 工具条
});
var pager = $("#users_tb").datagrid('getPager');
$(pager).pagination({
pageSize:10,
pageList:[5,10,15,20],
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onBeforeRefresh:function(){
$(this).pagination('loading');//正在加载数据中...
//alert('正在加载数据中...');
$(this).pagination('loaded'); //数据加载完毕
}
});
});
function reset(){
$("#regSource").combobox('setValue','');
}
//获取参数
function getQueryParams(queryParams) {
var regSource = $("#regSource").combobox('getValue');
queryParams.regSource = regSource;
return queryParams;
}
//增加查询参数,重新加载表格
function search() {
//查询参数直接添加在queryParams中
var queryParams = $('#users_tb').datagrid('options').queryParams;
getQueryParams(queryParams);
$('#users_tb').datagrid('options').queryParams = queryParams;
$("#users_tb").datagrid('reload');
}
function editUserInfo(){
var rows = dataGrid.datagrid('getSelections');
if (rows.length == 1) {
var row =rows[0];
$("#userInfoWin").window('open');
$("#userInfoForm").form("load", row);
}else{
alert("请选择一条记录!");
return;
}
}
function addUserInfo(){
$("#userInfoWin").window('open');
$("#userInfoForm").form("clear");
}
function editRole(){
var rows = dataGrid.datagrid('getSelections');
if (rows.length == 1) {
var row =rows[0];
$('#editrolesIds').combobox({
url : '../../service/role/all',
valueField:'id',
textField:'roleName'
});
$("#win").window('open');
if(row[0].rolesIds!=null&&row[0].rolesIds!="undefined"&&row[0].rolesIds!=""){
$("#editrolesIds").val(row[0].rolesIds);
}
$("#edituserId").val(row[0].userId);
}else{
alert("请选择一条记录!");
return;
}
}
function delUser(){
var rows = dataGrid
.datagrid('getSelections');
if (rows.length <= 0) {
$.messager.alert('警告', '您没有选择',
'error');
} else if (rows.length > 1) {
$.messager.alert('警告', '不支持批量删除',
'error');
} else {
$.messager.confirm('确定','您确定要删除吗',
function(t) {
if (t) {
$.ajax({
url : '../../service/Users/del',
method : 'POST',
data : rows[0],
dataType : 'json',
success : function(r) {
if (r.code=="1") {
dataGrid.datagrid('acceptChanges');
$.messager.show({msg : r.msg,title : '成功'});
editRow = undefined;
dataGrid.datagrid('reload');
} else {
dataGrid.datagrid('beginEdit',editRow);
$.messager.alert('错误',r.msg,'error');
}
dataGrid.datagrid('unselectAll');
}
});
}
});
}
}
function saveUserRole(){
$('#userrole').form('submit',{
url : '../../service/UsersRoles/update',
method:'post',
success:function(data){
var r = JSON.parse(data);
if(r.code=="1"){
$.messager.alert({
msg : "角色分配成功",
title : '成功'
});
$('#win').window('close');
$("#users_tb").datagrid('reload');
}else{
$.messager.alert(
'错误',
"角色分配失败",
'error');
}
$('#win').window('close');
$("#users_tb").datagrid('reload');
}
});
}
function saveUsers(){
$('#userInfoForm').form('submit',{
url: '../../service/Users/save',
method:'post',
enctype : "multipart/form-data",
success:function(data){
var r = JSON.parse(data);
if(r.code=="1"){
$.messager.alert({
msg : "操作用户成功",
title : '成功'
});
$('#userInfoWin').window('close');
$("#users_tb").datagrid('reload');
}else{
$.messager.alert(
'错误',
"操作用户失败",
'error');
}
$('#userInfoWin').window('close');
$("#users_tb").datagrid('reload');
}
});
}
3.后台代码
/**
*
*/
package com.aiw.ck.controller.user;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import com.aiw.ck.controller.BaseController;
import com.aiw.ck.data.Res;
import com.aiw.ck.data.WebConstants;
import com.aiw.ck.model.user.User;
import com.aiw.ck.util.FileUploadUtil;
import com.aiw.ck.util.StrUtil;
import com.google.gson.Gson;
/**
* 用户管理
* @author sfit0512
*
*/
@RestController
public class UsersController extends BaseController {
Logger log = Logger.getLogger(UsersController.class);
@Autowired
private com.aiw.ck.service.user.UserService userService;
private Gson gson = new Gson();
/**
* 分页查询用户
* @return
*/
@RequestMapping("/Users/all")
public String getUserssQueryPage(HttpServletRequest request,
HttpServletResponse response) {
try {
String regSource = request.getParameter("regSource");
String pageString = request.getParameter("page");
String rowsString = request.getParameter("rows");
log.info("parameter: regSource:"+regSource+" page:"+pageString+" rows:"+rowsString);
int pages = 1;
int rows = 20;
if(StrUtil.notBlank(pageString)){
pages = Integer.parseInt(pageString);
}
if(StrUtil.notBlank(rowsString)){
rows = Integer.parseInt(rowsString);
}
List<User> list = userService.getUsers(regSource,pages, rows);
if (list.size()>0) {
long total = userService.getTotalCount(regSource);
Map<String, Object> ret = new HashMap<String, Object>();
ret.put("total", total);
ret.put("rows", list);
return gson.toJson(ret);
}
} catch (Exception e) {
// TODO: handle exception
log.error("",e);
return FAIL;
}
return FAIL;
}
/**
* 添加用户
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/Users/add", method = RequestMethod.POST)
@ResponseBody
public Res addUsers(HttpServletRequest request,
HttpServletResponse response,User user) throws Exception {
try {
int ret = userService.addUser(user);
if(ret>0){
return success();
}
} catch (Exception e) {
// TODO: handle exception
log.error("UsersController 的方法 addUsers 执行出错,原因:" + e, e);
}
return fail();
}
/**
* 修改用户
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/Users/update", method = RequestMethod.POST)
@ResponseBody
public Res updateUsers(HttpServletRequest request,
HttpServletResponse response ,User user) throws Exception {
try {
int ret = userService.updateUser(user);
if(ret>0){
return success();
}
} catch (Exception e) {
// TODO: handle exception
log.error("UsersController 的方法 updateUsers 执行出错,原因:" + e, e);
}
return fail();
}
/**
* 保存用户
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/Users/save", method = RequestMethod.POST)
@ResponseBody
public Res saveUsers(@RequestParam("userIcon") CommonsMultipartFile userIcon,
HttpServletRequest request,HttpServletResponse response) throws Exception {
try {
String regSource = request.getParameter("regSource");
String userId = request.getParameter("userId");
String userType = request.getParameter("userType");
String nickName = request.getParameter("nickName");
String userPwd = request.getParameter("userPwd");
String userState = request.getParameter("userState");
String uString = "";
User user = new User();
//文件存储路径
String path =request.getSession().getServletContext().getRealPath("/")+WebConstants.FILE_UPLOAD_USERS;
if (userIcon.getSize()>0) {
uString = userIcon.getFileItem().getName();
//上传图片
FileUploadUtil.fileUpload(userIcon, path,uString);
user.setUserIcon(uString);
}
user.setNickName(nickName);
user.setUserPwd(userPwd);
user.setRegSource(regSource);
user.setUserType(userType);
user.setUserState(userState.charAt(0));
int ret = 0;
if (StrUtil.notBlank(userId)) {
//修改用户信息
user.setUserId(Long.parseLong(userId));
ret = userService.updateUser(user);
} else {
ret = userService.addUser(user);
}
if(ret>0){
return success();
}
} catch (Exception e) {
// TODO: handle exception
log.error("UsersController 的方法 updateUsers 执行出错,原因:" + e, e);
}
return fail();
}
/**
* 删除用户
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/Users/del", method = RequestMethod.POST)
@ResponseBody
public Res deleteUsers(HttpServletRequest request,
HttpServletResponse response) throws Exception {
try {
String id = request.getParameter("userId");
int ret = userService.delUser(Long.parseLong(id));
if(ret>0){
return success();
}
} catch (Exception e) {
// TODO: handle exception
log.error("UsersController 的方法 deleteUsers 执行出错,原因:" + e, e);
}
return fail();
}
/**
* 添加用户角色关系
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/UsersRoles/add", method = RequestMethod.POST)
@ResponseBody
public Res addUsersRoles(HttpServletRequest request,
HttpServletResponse response,User user) throws Exception {
try {
int ret = userService.addUserRoles(user);
if(ret>0){
return success();
}
} catch (Exception e) {
// TODO: handle exception
log.error("UsersController 的方法 addUsersRoles 执行出错,原因:" + e, e);
}
return fail();
}
/**
* 修改用户角色关系
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/UsersRoles/update", method = RequestMethod.GET)
@ResponseBody
public Res updateUsersRoles(HttpServletRequest request,
HttpServletResponse response ,User user) throws Exception {
try {
int ret = userService.updateUserRoles(user);
if(ret>0){
return success();
}
} catch (Exception e) {
// TODO: handle exception
log.error("UsersController 的方法 updateUsersRoles 执行出错,原因:" + e, e);
}
return fail();
}
}