培训要求
1） 使用jQuery-EasyUI组件，构建自已的Web页面（下）
2） 使用Jsp/Js/Ajax/Json/Jquery/Easyui + Servlet + JDBC + Lucene/Mysql/Oracle完成数据库分页
3） 欣赏几款优秀的jQuery组件，构建自已的Web页面
一）学会查阅文档，使用jQuery-EasyUI，构建自已的Web页面
（1）网址：www.jeasyui.com，下载并参考学习<>手册
（2）什么是jQuery-EasyUI
参见<<什么是EasyUI.JPG>>
是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的
WEB前端JavaScript现成的组件库
注意：今天的EasyUI组件库的版本较高，需要高版本浏览器支持，
中低版本浏览器会有不能正常执行的情况
（3）JavaScript，AJAX，JSON，jQuery，EasyUI分别能解决什么问题
JS：基于浏览器对web页面中的节点进行操作，比较麻烦
jQuery：基于浏览器简化对web页面中的节点进行操作，做到了write less do more
AJAX：基于浏览器与服务端进行局部刷新的异步通讯编程模式
JSON：简化自定义对象的创建与AJAX数据交换轻量级文本
EasyUI：快速基于现成的组件创建自已的web页面
组件：是指已经由第三方开源组织写好的，直接可以使用的功能界面，例如：form，layout，tree... 注意：我们学的都是零散的组件，项目中需要将其装配起来，方可构建完整的web页面，
EasyUI只是众多前端WEB组件之一
（4）jQuery-EasyUI快速入门----可折叠功能的面板
第一步：创建一个js-day05这么一个web工程
第二步：在WebRoot目录下创建00-base.html
第三步：在WebRoot目录下创建js和themes目录，导入官方文件
参见<< jquery-easyui-1.3.6文件夹>>
第四步：在00-base.html 文件的标签中引入如下文件
标签
内容
（5）EasyUI组件
（06）form表单
》validatebox验证框
姓名：必填/1-6个字符/必填中文
邮箱：必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn
用户名:
思考：检查邮箱的扩展名只能是{'com','cn'}
》combobox下拉列表框
设置下拉列表框默认值
你所在的城市：
aitem1
bitem1
bitem2
citem1
citem2
citem3
ditem1
ditem2
ditem3
ditem4
你所在的城市：
combobox_data.json:
[
{
"id":"gz",
"text":"广州"
},
{
"id":"zs",
"text":"中山"
},
{
"id":"fs",
"text":"佛山"
},
{
"id":"sz",
"text":"深圳",
"selected":true
},
{
"id":"yj",
"text":"阳江"
}
]
》datebox日期选择框
显示yyyy-mm-dd格式，
添加
选中日期并显示选中的日期
入职时间：
》numberspinner数字微调框
设置数字微调框中的值
获取数字微调框中的值
商品数量：
》slider滑动条框
拖动滑块，将值同步显示到span标签中
身高：
150
（07）progressbar进度条
》每隔1秒让进度条按随机数填充，直至充满进度条刻度
进度条：
（08）window窗口
》单击按钮，打开或关闭一个窗口
（09）dialog对话框
》单击按钮，打开或关闭一个对话框
（10）messager消息窗口
》单击按钮，弹出警告框
》单击按钮，弹出确认框
》单击按钮，弹出显示框
》单击按钮，弹出输入框
（11）tree树
》选中树中某个子节点，弹出选中的内容
》用树替代linkButton按钮
tree_data.json:
[
{
"id":1,
"text":"第一章"
},
{
"id":2,
"text":"第二章",
"state":"closed",
"children":[
{
"id":21,
"text":"第一节"
},
{
"id":22,
"text":"第二节"
},
{
"id":23,
"text":"第三节",
"state":"closed",
"children":[
{
"id":231,
"text":"第一条"
},
{
"id":232,
"text":"第二条"
}
]
}
]
}
]
（12）datagrid数据表格
》参见E:\开发类库\jquery-easyui-1.3.6\demo\datagrid(9-数据网格)\products.json
》 DateGrid会异步以POST方式向服务器传入二个参数：page和rows二个参数，服务端需要哪个，就接收哪个参数
* page：需要显示的页号
* rows：需要获取多少条记录
开发过程：
DB：
use js;
drop table if exists users;
create table users(
id int(5) primary key auto_increment,
name varchar(4) not null,
sal int(5) not null
);
insert into users(name,sal) values('小赵君',1000);
insert into users(name,sal) values('中赵君',1500);
insert into users(name,sal) values('大赵君',2000);
insert into users(name,sal) values('赵小君',2500);
insert into users(name,sal) values('赵中君',3000);
insert into users(name,sal) values('赵大君',3500);
insert into users(name,sal) values('赵君小',4000);
insert into users(name,sal) values('赵君中',4500);
insert into users(name,sal) values('赵君大',5000);
insert into users(name,sal) values('赵君',5500);
select id,name,sal from users;
Entity：
public class User {
private Integer id;
private String name;
private Integer sal;
public User(){}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getSal() {
return sal;
}
public void setSal(Integer sal) {
this.sal = sal;
}
}
public class PageBean {
private Integer currPageNO;
private Integer perPageNO;
private Integer allRecordNO;
private Integer allPageNO;
private List
userList = new ArrayList();
public PageBean(){}
public Integer getCurrPageNO() {
return currPageNO;
}
public void setCurrPageNO(Integer currPageNO) {
this.currPageNO = currPageNO;
}
public Integer getPerPageNO() {
return perPageNO;
}
public void setPerPageNO(Integer perPageNO) {
this.perPageNO = perPageNO;
}
public Integer getAllRecordNO() {
return allRecordNO;
}
public void setAllRecordNO(Integer allRecordNO) {
this.allRecordNO = allRecordNO;
}
public Integer getAllPageNO() {
return allPageNO;
}
public void setAllPageNO(Integer allPageNO) {
this.allPageNO = allPageNO;
}
public List getUserList() {
return userList;
}
public void setUserList(List userList) {
this.userList = userList;
}
}
Util：
public class JdbcUtil {
private static ComboPooledDataSource dataSource = new ComboPooledDataSource();
public static ComboPooledDataSource getDataSource() {
return dataSource;
}
}
src/c3p0-config.xml
com.mysql.jdbc.Driver
jdbc:mysql://127.0.0.1:3306/js
root
root
2
5
1
5
Dao：
public class UserDao {
//select count(id) from users where 1=1 and name like '%赵%';
public Integer getAllRecordNO(String sql) throws Exception{
QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());
Long temp = (Long) runner.query(sql,new ScalarHandler());
return temp.intValue();
}
//select id,name,sal from users where 1=1 and name like '%赵%' limit ?,?;
public List findAllRecord(String sql,Integer start,Integer size) throws Exception{
QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource());
return runner.query(sql,new BeanListHandler(User.class),new Object[]{start,size});
}
}
Service：
public class UserService {
private UserDao userDao = new UserDao();
//show("赵",2);
public PageBean show(String keywords,Integer currPageNO) throws Exception{
PageBean pageBean = new PageBean();
String sqlA = "select count(id) from users where 1=1";
String sqlB = "select id,name,sal from users where 1=1";
if(keywords != null && keywords.trim().length() > 0){
sqlA += " and name like '%" + keywords + "%'";
sqlB += " and name like '%" + keywords + "%'";
}
pageBean.setCurrPageNO(currPageNO);
Integer allRecordNO = userDao.getAllRecordNO(sqlA);
pageBean.setAllRecordNO(allRecordNO);
Integer allPageNO = null;
if(pageBean.getAllRecordNO() % pageBean.getPageSize() == 0){
allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize();
}else{
allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize() + 1;
}
pageBean.setAllPageNO(allPageNO);
Integer size = pageBean.getPageSize();
Integer start = (pageBean.getCurrPageNO()-1) * size;
sqlB += " limit ?,?";
List userList = userDao.findAllRecord(sqlB,start,size);
pageBean.setUserList(userList);
return pageBean;
}
}
Action：
public class UserServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
try{
request.setCharacterEncoding("UTF-8");
String keywords = request.getParameter("keywords");
if(keywords==null || keywords.trim().length()==0){
keywords = "";
}
System.out.println("keywords=" + keywords);//赵
String temp = request.getParameter("page");
if(temp == null || temp.trim().length()==0){
temp = "1";
}
Integer currPageNO = Integer.parseInt(temp);
System.out.println("currPageNO=" + currPageNO);//2
UserService userService = new UserService();
PageBean pageBean = userService.show(keywords,currPageNO);
Map map = new LinkedHashMap();
map.put("total",pageBean.getAllRecordNO());
map.put("rows",pageBean.getUserList());
JSONArray jsonArray = JSONArray.fromObject(map);
String jsonJAVA = jsonArray.toString();
jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(jsonJAVA);
pw.flush();
pw.close();
}catch(Exception e){
e.printStackTrace();
}
}
}
WebRoot/userList.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
