本节采用技术：SpringMVC+Jetty+ExtJs4.2+Maven+MySQL5.1以上+SLF4J（前几节学习的大家不知道记住了没，现在来总结复习下，顺便加点新技术）
学习本节前的准备：Eclipse高版本，Jetty插件，Maven插件，JDK1.7
休息了好久没开动教程了，确实最近太累了，大家见谅！先来看下效果，本章节是连续篇，今天是续篇的第一讲，前面都是静态讲解，大家是不是觉得不过瘾啊？咱学Java的嘛，当然得和Java的技术结合讲解咯，前面也说到以后会用动态数据讲解的。一、准备工作，创建MySQL数据库shuyangyang
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
/*
Navicat MySQL Data Transfer
Source Server : localhost
Source Server Version : 50133
Source Host : localhost:3306
Source
Database
: shuyangyang
Target Server Type : MYSQL
Target Server Version : 50133
File Encoding : 65001
Date
: 2014-02-18 23:04:49
*/
SET
FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `t_users`
-- ----------------------------
DROP
TABLE
IF EXISTS `t_users`;
CREATE
TABLE
`t_users` (
`ID`
int
(255)
NOT
NULL
AUTO_INCREMENT,
`
Name
`
varchar
(255)
DEFAULT
NULL
,
`age`
smallint
(6)
DEFAULT
NULL
,
`Address`
varchar
(255)
DEFAULT
NULL
,
`CardID`
varchar
(255)
DEFAULT
NULL
,
`Role`
varchar
(255)
DEFAULT
NULL
,
`DepartMent`
varchar
(255)
DEFAULT
NULL
,
`Sex`
varchar
(255)
DEFAULT
NULL
,
PRIMARY
KEY
(`ID`)
) ENGINE=MyISAM AUTO_INCREMENT=19
DEFAULT
CHARSET=utf8;
-- ----------------------------
-- Records of t_users
-- ----------------------------
INSERT
INTO
t_users
VALUES
(
'1'
,
'张三'
,
'20'
,
'北京市海淀区'
,
'342425199002131239'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'2'
,
'李四'
,
'22'
,
'上海市长宁区'
,
'342425199107203116'
,
'管理员'
,
'管理组'
,
'女'
);
INSERT
INTO
t_users
VALUES
(
'3'
,
'王五'
,
'24'
,
'南京市'
,
'3426198920314669'
,
'客服人员'
,
'客服组'
,
'女'
);
INSERT
INTO
t_users
VALUES
(
'4'
,
'赵大头'
,
'23'
,
'南通市'
,
'3424198805134567'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'5'
,
'孙国'
,
'21'
,
'山东省'
,
'3526199001234569'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'6'
,
'测试'
,
'26'
,
'test'
,
'456489731312123'
,
'test'
,
'test'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'7'
,
'张三1'
,
'20'
,
'北京市海淀区'
,
'342425199002131239'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'8'
,
'李四1'
,
'22'
,
'上海市长宁区'
,
'342425199107203116'
,
'管理员'
,
'管理组'
,
'女'
);
INSERT
INTO
t_users
VALUES
(
'9'
,
'王五1'
,
'24'
,
'南京市'
,
'3426198920314669'
,
'客服人员'
,
'客服组'
,
'女'
);
INSERT
INTO
t_users
VALUES
(
'10'
,
'赵大头1'
,
'23'
,
'南通市'
,
'3424198805134567'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'11'
,
'孙国1'
,
'21'
,
'山东省'
,
'3526199001234569'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'12'
,
'测试1'
,
'26'
,
'test'
,
'456489731312123'
,
'test'
,
'test'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'13'
,
'张三2'
,
'20'
,
'北京市海淀区'
,
'342425199002131239'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'14'
,
'李四2'
,
'22'
,
'上海市长宁区'
,
'342425199107203116'
,
'管理员'
,
'管理组'
,
'女'
);
INSERT
INTO
t_users
VALUES
(
'15'
,
'王五2'
,
'24'
,
'南京市'
,
'3426198920314669'
,
'客服人员'
,
'客服组'
,
'女'
);
INSERT
INTO
t_users
VALUES
(
'16'
,
'赵大头2'
,
'23'
,
'南通市'
,
'3424198805134567'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'17'
,
'孙国2'
,
'21'
,
'山东省'
,
'3526199001234569'
,
'普通用户'
,
'用户组'
,
'男'
);
INSERT
INTO
t_users
VALUES
(
'18'
,
'测试2'
,
'26'
,
'test'
,
'456489731312123'
,
'test'
,
'test'
,
'男'
);
|
二、搭好框架，后面我会提供源代码给大家下载的
三、最终效果，主要是框架中间的数据展示
前台界面代码（这里给出的是数据展示层代码，全部代码可以在文章结尾处下载）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
// 表格配置开始
var
columns = [
{header:
'编号'
,dataIndex:
'id'
},
{header:
'名称'
,dataIndex:
'name'
},
{header:
'年龄'
,dataIndex:
'age'
},
{header:
'性别'
,dataIndex:
'sex'
,renderer:
function
(value){
if
(value==
'男'
){
return
"<span style='color:green;font-weight:bold';>男</span>"
;
}
else
{
return
"<span style='color:red;font-weight:bold';>女</span>"
;
}
,
{header:
'地址'
,dataIndex:
'address'
},
{header:
'身份证号码'
,dataIndex:
'cardId'
,width:150},
{header:
'角色'
,dataIndex:
'role'
},
{header:
'部门'
,dataIndex:
'departMent'
}
];
//转换原始数据为EXT可以显示的数据
var
store =
new
Ext.data.Store({
pageSize:13,
//每页显示几条数据
proxy:{
type:
'ajax'
,
url:
'/user/showUser'
,
reader:{
type:
'json'
,
totalProperty:
'total'
,
root:
'data'
,
idProperty:
'id'
}
},
fields:[
{name:
'id'
},
//mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:
'name'
},
{name:
'age'
},
{name:
'sex'
},
{name:
'address'
},
{name:
'cardId'
},
{name:
'role'
},
{name:
'departMent'
}
]
});
var
grid =
new
Ext.grid.GridPanel({
store: store,
columns: columns,
title:
'数据'
,
region:
'center'
,
//框架中显示位置，单独运行可去掉此段
loadMask:
true
,
//显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
bbar:
new
Ext.PagingToolbar({
store:store,
displayInfo:
true
,
//是否显示数据信息
displayMsg:
'显示第 {0} 条到 {1} 条记录，一共 {2} 条'
,
//只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg:
"没有记录"
//没有数据时显示信息
})
});
/加载数据
store.load({params:{start:0,limit:13}});
// 表格配置结束
|
这里的url请求地址是/user/showUser，这里请求的是SpringMVC的地址，看下面的Controller代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
package
com.shyy.web.controller.anntation;
import
java.util.List;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.stereotype.Controller;
import
org.springframework.web.bind.annotation.RequestMapping;
import
org.springframework.web.bind.annotation.ResponseBody;
import
com.shyy.web.controller.response.EmptyResponse;
import
com.shyy.web.controller.response.NormalResponse;
import
com.shyy.web.controller.response.Response;
import
com.shyy.web.entity.User;
import
com.shyy.web.service.UserService;
import
com.shyy.web.service.impl.UserServiceImpl;
@Controller
@RequestMapping
(
"/user/"
)
public
class
UserController {
Logger logger = LoggerFactory.getLogger(UserController.
class
);
UserService userService =
new
UserServiceImpl();
/**
* SpringMVC返回json数据
* @return
*/
@RequestMapping
(
"showUser"
)
@ResponseBody
public
Response resp(HttpServletRequest req, HttpServletResponse resp){
String start = req.getParameter(
"start"
);
//起始页
String limit = req.getParameter(
"limit"
);
//每页数量
int
index = Integer.parseInt(start);
int
pageSize = Integer.parseInt(limit);
List<User> list = userService.query(index,pageSize);
//获取所有用户数据
long
total = list.size();
if
(total>
0
){
logger.debug(
"now {}"
,
"返回用户数据。。。"
);
return
new
NormalResponse(list,userService.total());
}
else
{
logger.debug(
"now {}"
,
"用户数据为空！"
);
return
new
EmptyResponse();
}
}
}
|
最后的NormalResponse返回的是我封装的一个返回对象，如下代码所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
package
com.shyy.web.controller.response;
public
class
NormalResponse
extends
Response {
public
NormalResponse(Object data) {
this
.setCode(ResponseCode.OK);
this
.setMessage(
""
);
this
.setData(data);
this
.setSuccess(
true
);
}
public
NormalResponse(Object data, Long total) {
this
.setCode(ResponseCode.OK);
this
.setMessage(
""
);
this
.setData(data);
this
.setSuccess(
true
);
this
.setTotal(total);
}
public
NormalResponse() {
this
.setCode(ResponseCode.OK);
this
.setMessage(
""
);
this
.setData(
null
);
this
.setSuccess(
true
);
}
}
|
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1408303，如需转载请自行联系原作者
