【斗医】【18】Web应用开发20天

简介:
原创作品,允许转载,转载时请务必以超链接形式标明文章  原始出处 、作者信息和本声明。否则将追究法律责任。 http://qingkechina.blog.51cto.com/5552198/1544928

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

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

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

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

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

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

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


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中增加两条记录

wKiom1P56pHDhGuzAAD-vLZtWng669.jpg

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

wKioL1P57AyREnk5AAMyG2VYpuI000.jpg


【备注】:

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

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

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



本文出自 “青客” 博客,请务必保留此出处http://qingkechina.blog.51cto.com/5552198/1544928

目录
相关文章
|
24天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
1月前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
29 7
|
1月前
|
存储 资源调度 应用服务中间件
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
27 0
|
1月前
|
存储 前端开发 JavaScript
从前端到后端,探索现代Web开发技术
本文探索了现代Web开发技术的各个方面,包括前端和后端开发以及多种编程语言的应用。通过对JavaScript、Java、Python、C、PHP和Go等语言的介绍,深入探讨了前端和后端开发的基本原理和常用工具。同时,还涵盖了数据库技术在Web开发中的重要性和应用场景。无论你是初学者还是有经验的开发者,本文都能为你提供全面的视角和实用的知识,帮助你在Web开发领域取得更好的成果。
|
1月前
|
缓存 关系型数据库 API
后端开发:构建高效、可扩展的Web应用程序的关键
后端开发:构建高效、可扩展的Web应用程序的关键
22 0
|
4天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
9天前
|
JSON Java fastjson
Spring Boot 底层级探索系列 04 - Web 开发(2)
Spring Boot 底层级探索系列 04 - Web 开发(2)
16 0
|
9天前
|
安全 编译器 PHP
PHP 8.1版本发布:引领Web开发新潮流
PHP编程语言一直是Web开发的主力军,而最新发布的PHP 8.1版本则为开发者们带来了更多创新和便利。本文将介绍PHP 8.1版本的主要特性,包括更快的性能、新的语言功能和增强的安全性,以及如何利用这些功能来提升Web应用程序的质量和效率。
|
13天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
13天前
|
前端开发 数据挖掘 API
使用Python中的Flask框架进行Web应用开发
【4月更文挑战第15天】在Python的Web开发领域,Flask是一个备受欢迎的轻量级Web框架。它简洁、灵活且易于扩展,使得开发者能够快速地构建出高质量的Web应用。本文将深入探讨Flask框架的核心特性、使用方法以及在实际开发中的应用。