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

本文把挑战书的具体内容显示在独立页面上，这里涉及如下四个步骤：

1、增加触发入口

2、增加业务配置

3、服务端获取数据后封装为Json对象返回

4、通过对DOM元素操作绘制页面

在讲解这四个步骤之前先修改一个Bug：

【问题描述】：

（1）用户首次点击“下战书”菜单，进入登录界面提示用户需要登录

（2）用户登录成功之后就进入下战书页面

（3）此时再次点击“下战书”菜单，界面又进入到登录页面

期望：下次再点击“下战书”菜单，此时的会话已存在，所以不应该再进入登录页面

【问题原因】：

点击“下战书”菜单时，数据直接从浏览器内存中读取，并没有调用到服务端，所以这里应该禁止直接从浏览器中直接读取

【问题解决]:

解决办法通过增加时间戳的办法来解决

（1）在common.js中增加两个方法，分别用于响应“下战书”和“首页”菜单动作

/**
 * 响应首页动作
 */
function doMainAction()
{
    top.location = "index.act?timestamp=" + new Date().getTime();
}

/**
 * 响应挑战动作
 */
function doChallengeAction()
{
    top.location = "challenge.act?timestamp=" + new Date().getTime();
}

（2）修改common.js中的generateSystemMenu（）方法

systemMenu += '下战书';
systemMenu += '首页';

通过这样修改，点击“下战书”时浏览器地址栏中会出现时间戳参数，如下图：

接下来进入正题

1、增加触发入口

入口就是《【斗医】【18】Web应用开发20天》讲解的首页上话题标题，所以需要修改main.js的操纵DOM把数据绘制到页面方法appendData()

/**
 * 操纵DOM把数据绘制到页面上
 */
function appendData(i, item)
{
    // 略去部分内容

    // >>>>>>设置挑战话题标题 
    var topWrapper = $("").attr("class", "main_item_wrapper");
    var topicTitle = $("").attr("class", "main_item_title");
    var titleLink = $("").attr("href", "javascript:forwardTopic('" + item.topicId + "')").text(item.topicTitle);
    titleLink.appendTo(topicTitle);
    topicTitle.appendTo(topWrapper);

    // 略去部分内容
}

在main.js中增加forwardTopic()方法

/**
 * 跳转到话题内容
 */
function forwardTopic(topicId)
{
    top.location = "topic.act?topicId=" + topicId + "×tamp=" + new Date().getTime();
}

2、增加业务配置

（1）为了能响应topic.act请求，需要在system-action.xml中增加业务配置

（2）业务配置完后经过系统转发后跳转到topic.html页面，所以需要在D:\medical\war\module\topic下增加topic.html文件