博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【斗医】【18】Web应用开发20天
阅读量:6502 次
发布时间:2019-06-24

本文共 6854 字,大约阅读时间需要 22 分钟。

原创作品,允许转载,转载时请务必以超链接形式标明文章   、作者信息和本声明。否则将追究法律责任。

    本文通过获取首页内容来讲解Web页面拖拽获取当前页数据,功能类似在google查看图片,这里面涉及如下五个步骤:

(1)页面首次加载时读取第一页数据

(2)触发滚动条拖拽动作

(3)Ajax异步读取下一页数据

(4)服务端把数据封装为Json返回

(5)把页面数据通过DOM元素绘制在页面上

接下来就按这五个步骤依次进行

1、页面首次加载时会加载main.js文件。在此文件中增加CURRENT_ITEM_INDEX变量,用于标识当前话题的索引值;增加方法getPageContent(),用于页面加载时调用,获取第一页数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 
* 按时间降序排列后标识页面最后一条记录的索引值
 
*/
var 
CURRENT_ITEM_INDEX = 0;
 
$(document).ready(
function
()
{
    
// 获取首页内容
    
getPageContent(CURRENT_ITEM_INDEX);
});
 
function 
getPageContent(currentIndex)
{
    
var 
data = {
"currentIndex"
: currentIndex};
    
asyncRequest(
"mainContent.data"
, data, 
function
(result)
    
{
        
// 由第3步实现
    
});
}

2、触发滚动条拖拽动作。在main.js加载时对window绑定scroll事件

1
2
3
4
5
6
7
$(document).ready(
function
()
{
    
// 略
    
getBreifUserInfo();
    
// 监听滚动条拖拽事件
    
bindScrollEvent();
});


【备注】:由于涉及到不断地下拉滚动条,所以需要增加一个标识isQueryFlag,若正在查找数据时则不再响应下拉事件

/**

 * 是否正在查询数据标识

 */

var isQueryFlag = false;


3、Ajax异步读取下一页数据。实现bindScrollEvent()方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 
* 绑定滚动条拖拽事件
 
*/
function 
bindScrollEvent()
{
    
var 
scrollBarDistance = 0; 
// 滚动条的当前位置
    
var 
documentHeight = 0; 
// 文档高度
    
var 
windowHeight = $(window).height(); 
// 当前窗口高度
    
$(window).scroll(
function
(){
        
scrollBarDistance = $(document).scrollTop();
        
documentHeight = $(document).height();
        
if
(scrollBarDistance + windowHeight >= documentHeight)
        
{
            
if
(isQueryFlag === 
true
)
            
{
                
return
;
            
}
 
            
// 获取页面内容
            
getPageContent(CURRENT_ITEM_INDEX);
        
}
    
});
}

4、服务端把数据封装为Json返回

(1)修改配置文件system-data.xml,把拖拽动作方法与服务端读取数据的业务处理逻辑关联起来

1
2
<!--获取系统首页内容信息-->
<
business 
name
=
"mainContent" 
business-class
=
"com.medical.server.data.MainDataAction" 
/>

(2)定义服务端读取数据的业务处理类com.medical.server.data.MainDataAction

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
@Override
public 
String execute() 
throws 
FrameException
{
    
// 获取当前记录索引值
    
String currentIndex = getParameter(
"currentIndex"
);
    
if 
(FrameUtil.isEmpty(currentIndex))
    
{
        
TopicResultBean result = 
new 
TopicResultBean();
        
result.setErrorCode(FrameErrorCode.REQUEST_PARAM_ERROR);
        
return 
gson.toJson(result);
    
}
     
    
// 从数据库中读取数据
    
int 
index = Integer.valueOf(currentIndex);
    
List<TopicDAO> topicList = TopicUtil.getTopicList(index);
    
if 
(FrameUtil.isEmpty(topicList))
    
{
        
TopicResultBean result = 
new 
TopicResultBean();
        
result.setErrorCode(FrameErrorCode.REQUEST_CONTENT_EMPTY);
        
return 
gson.toJson(result);
    
}
     
    
// 组装界面所需要内容
    
List<TopicBean> topicBeanList = 
new 
ArrayList<TopicBean>();
    
for 
(TopicDAO element : topicList)
    
{
        
UserDAO author = UserUtil.getUserByName(element.getUserId());
         
        
TopicBean bean = 
new 
TopicBean();
        
bean.setUserName(author.getUserId());
        
bean.setUserIcon(author.getIconPath());
        
bean.setNickName(author.getUserSign());
         
        
bean.setTopicId(element.getTopicId());
        
bean.setTopicTitle(element.getTopicTitle());
        
bean.setCommentNum(CommentUtil.getCommentNum(element.getTopicId()));
        
bean.setTopicSummary(getTopicSummary(element.getPrescript()));
        
bean.setTopicTime(element.getTopicTime());
         
        
topicBeanList.add(bean);
    
}
    
// 返回JSON结果
    
TopicResultBean result = 
new 
TopicResultBean();
    
result.setErrorCode(
0
);
    
result.setTopicList(topicBeanList);
    
return 
gson.toJson(result);
}


【备注】:为了使内容简洁,中间省略了一些处理函数


5、把页面数据通过DOM元素绘制在页面上

(1)异步读取数据,并对数据合法性进行判断

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
// 设置查询标识
isQueryFlag = 
true
;
 
asyncRequest(
"mainContent.data"
, data, 
function
(result)
{
    
// 若读取数据未成功直接返回
    
var 
resultJson = eval(result);
    
if
(resultJson.errorCode != 0)
    
{
        
return
;
    
}
    
var 
topicList = resultJson.topicList;
    
if
(!topicList){
        
return
;
    
}
     
    
// 重置数据当前索引值
    
CURRENT_ITEM_INDEX = CURRENT_ITEM_INDEX + topicList.length;
     
    
// 操纵DOM把数据绘制到页面上
    
$.each(topicList, 
function
(i, item){
        
appendData(i, item);
    
});
     
    
// 重置查询标识
    
isQueryFlag = 
false
;
});

(2)DOM元素绘制的实现

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/**
 
* 操纵DOM把数据绘制到页面上
 
*/
function 
appendData(i, item)
{
    
var 
topicItem = $(
"<div />"
).attr(
"class"
"main_item"
);
    
topicItem.appendTo($(
"#main_content_dynamic_id"
));
    
// 添加用户头像      
    
var 
userIcon = $(
"<i />"
).attr(
"class"
"main_item_icon"
);
    
userIcon.appendTo(topicItem);
    
// 添加挑战内容
    
var 
content = $(
"<div />"
).attr(
"class"
"main_item_content"
);
    
content.appendTo(topicItem);
 
    
// >>>>>>设置挑战话题标题 
    
var 
topWrapper = $(
"<div />"
).attr(
"class"
"main_item_wrapper"
);
    
var 
topicTitle = $(
"<div />"
).attr(
"class"
"main_item_title"
);
    
var 
titleLink = $(
"<a />"
).attr(
"href"
"#"
).text(item.topicTitle);
    
titleLink.appendTo(topicTitle);
    
topicTitle.appendTo(topWrapper);
    
topWrapper.appendTo(content);
 
    
// >>>>>>设置挑战话题标题
    
var 
topicTime = $(
"<div />"
).attr(
"class"
"main_item_time"
).text(item.topicTime);
    
topicTime.appendTo(topWrapper);
 
    
// >>>>>>设置用户名称和昵称
    
var 
centerWrapper = $(
"<div />"
).attr(
"class"
"main_item_wrapper"
);
    
var 
userName = $(
"<label />"
).attr(
"class"
"main_item_author"
).text(item.userName + 
","
);
    
var 
userNick = $(
"<label />"
).attr(
"class"
"main_item_nickname"
).text(item.nickName);
    
userName.appendTo(centerWrapper);
    
userNick.appendTo(centerWrapper);
    
centerWrapper.appendTo(content);
 
    
// >>>>>>设置话题摘要信息
    
var 
middleWrapper = $(
"<div />"
).attr(
"class"
"main_item_wrapper"
);
    
var 
topicSummary = $(
"<div />"
).attr(
"class"
"main_item_substance"
).html(item.topicSummary);
    
topicSummary.appendTo(middleWrapper);
    
middleWrapper.appendTo(content);
 
    
// >>>>>>设置话题附属信息
    
var 
bottomWrapper = $(
"<div />"
).attr(
"class"
"main_item_wrapper"
);
    
var 
topicAttach = $(
"<div />"
).attr(
"class"
"main_item_attach"
);
    
topicAttach.appendTo(bottomWrapper);
    
bottomWrapper.appendTo(content);
 
    
// >>>>>>>>>>>>设置话题关注信息
    
var 
followLink = $(
"<a />"
).attr(
"href"
"#"
);
    
var 
followIcon = $(
"<i />"
).attr(
"class"
"main_item_attention"
);
    
followIcon.appendTo(followLink);
    
followLink.appendTo(topicAttach);
    
followLink.text(
"关注"
);
 
    
// >>>>>>>>>>>>设置话题关注信息
    
var 
commentLink = $(
"<a />"
).attr(
"href"
"#"
);
    
var 
commentIcon = $(
"<i />"
).attr(
"class"
"main_item_discuss"
);
    
commentIcon.appendTo(commentLink);
    
commentLink.appendTo(topicAttach);
    
commentLink.text(item.commentNum + 
"人评论"
);
 
    
// >>>>>>>>>>>>设置话题分享信息
    
var 
shareLink = $(
"<a />"
).attr(
"href"
"#"
);
    
var 
shareIcon = $(
"<i />"
).attr(
"class"
"main_item_share"
);
    
shareIcon.appendTo(shareLink);
    
shareLink.appendTo(topicAttach);
    
shareLink.text(
"分享"
);
 
    
// >>>>>>>>>>>>设置话题收藏信息
    
var 
favoriteLink = $(
"<a />"
).attr(
"href"
"#"
);
    
var 
favoriteIcon = $(
"<i />"
).attr(
"class"
"main_item_collection"
);
    
favoriteIcon.appendTo(favoriteLink);
    
favoriteLink.appendTo(topicAttach);
    
favoriteLink.text(
"收藏"
);
}

6、效果演示

(1)向数据表topictable中增加两条记录

(2)在浏览器输入http://localhost:8080/medical,效果如下:


【备注】:

1、可以多插入些记录,就可以观察拖拽效果了 

2、这里的拖拽事件没有考虑窗口的缩小与放大情况

3、为了简洁起见,没有增加返回顶端功能


本文出自 “” 博客,请务必保留此出处

你可能感兴趣的文章