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

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

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

（1）页面首次加载时读取第一页数据

（2）触发滚动条拖拽动作

（3）Ajax异步读取下一页数据

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

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

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

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

/**

* 按时间降序排列后标识页面最后一条记录的索引值

*/

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事件

$(document).ready(function()

{

// 略

getBreifUserInfo();

// 监听滚动条拖拽事件

bindScrollEvent();

});

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

/**

* 是否正在查询数据标识

var isQueryFlag = false;

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

/**

* 绑定滚动条拖拽事件

*/

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

@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）异步读取数据，并对数据合法性进行判断

// 设置查询标识

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元素绘制的实现

/**

* 操纵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、为了简洁起见，没有增加返回顶端功能

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

【斗医】【18】Web应用开发20天相关推荐

【斗医】【11】Web应用开发20天
本文在上文的基础上完成用户登录验证功能. 四.获取数据请求业务处理封装 1.配置数据读取方式,它的作用是使用FrameDataGainer响应以.data结尾的请求,并把处理后的数据返回给客户端.打开 ...
【斗医】【13】Web应用开发20天
在上文中完成用户注册/登录后显示用户名的功能,同时也谈了谈系统编码问题,本文重点聊聊"下战书"功能,里面涉及第三方在线HTML编辑器的问题. 一.Navicat for MySQL ...
【斗医】【3】Web应用开发20天
在上面提及异常的中英文从资源文件中读取,若读取失败需要日志记录,所以使用网上正在闹腾的Logback来记录.关于Logback与Log4j这里不做评判和说明,所有疑问可以请教谷歌. 一.Logback ...
【斗医】【10】Web应用开发20天
本文在前面封装Hibernate工具的基础上重点完成用户登录功能,目前系统页面展示的名称是在HTML中写死的,所以下面要做的事:若用户已登录则显示用户名:若用户未登录则点击进入登录页面. 一.修改登录 ...
推荐20个很有帮助的 Web 前端开发教程
在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 您 ...
给 Web 前端开发人员推荐20款 CSS 编辑器
CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...
python开发web项目_Django2：Web项目开发入门笔记（20）
该楼层疑似违规已被系统折叠隐藏此楼查看此楼这一篇教程,我们一起来了解如何在CentOS系统中将Django2的Web项目部署到Nginx服务器. CentOS系统虽然和Ubuntu系统都是Linu ...
基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求三.具体 ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...

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

【斗医】【18】Web应用开发20天相关推荐

最新文章

热门文章