"Dou Medical" "19" Web application development 20 days

This article shows the specific content of the challenge on a separate page, which involves the following four steps:

1. Increase the trigger entry

2. Increase Business configuration

3, the server gets the data after encapsulation for the JSON object return

4. Draw the page by manipulating the DOM elements

Modify a bug before you explain these four steps:

"Problem description":

(1) The user first click on the "Afternoon" menu, enter the login screen prompts the user to log in

(2) After the user login is successful, enter the following page

(3) Click the "Afternoon" menu again and the interface goes to the login page

Expected: Next time click on the "Afternoon" menu, at this time the session already exists, so should not enter the login page

"Cause of the problem":

When I click on the "Gauntlet" menu, the data is read directly from the browser memory and is not called to the server, so it should be forbidden to read directly from the browser.

"Problem Solving":

Solution by increasing the time stamp method to solve

(1) Add two methods in Common.js to respond to the "gauntlet" and "Home" menu actions respectively

/** * Response Home Action */function domainaction () {top.location = "index.act?timestamp=" + New Date (). GetTime (); /** * Response Challenge Action */function dochallengeaction () {top.location = "challenge.act?timestamp=" + New Date (). GetTime ();

(2) modifying the Generatesystemmenu () method in Common.js

Systemmenu + = ' <li id= "System_challenge_menu" ><a href= "javascript:dochallengeaction ()" > Afternoon </a> </li> '; Systemmenu + = ' <li id= "System_home_menu" ><a href= "javascript:domainaction ()" > Home </a> </li> ';

With this modification, a timestamp parameter appears in the browser's address bar when you click the "Afternoon", such as:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/47/E0/wKioL1QB_YKg1fq2AACEoP6C1Mw398.jpg "title=" Timestamp. png "alt=" wkiol1qb_ykg1fq2aaceop6c1mw398.jpg "/>

Next enter the topic 650) this.width=650; "src=" Http://img.baidu.com/hi/jx2/j_0010.gif "alt=" J_0010.gif "/>

1. Increase the trigger entry

The entrance is "Dou Medical" "18" Web application development 20 days on the first page of the topic title, so need to modify main.js manipulation dom to draw data to the page method AppendData ()

/** * Manipulate DOM to draw data onto the page */function appendData (i, item) {//Omit part of content//>>>>>> Set Challenge topic title Var Topwrappe    r = $ ("<div/>"). attr ("Class", "Main_item_wrapper");    var topictitle = $ ("<div/>"). attr ("Class", "Main_item_title");    var Titlelink = $ ("<a/>"). attr ("href", "javascript:forwardtopic ('" + Item.topicid + "')"). Text (item.topictitle);    Titlelink.appendto (Topictitle);    Topictitle.appendto (Topwrapper); Omit part of the content}

Add Forwardtopic () method to Main.js

/** * Jump to topic content */function Forwardtopic (topicid) {top.location = "topic.act?topicid=" + topicid + "&timestamp=" + new Date (). GetTime ();}

2. Increase business configuration

(1) In order to respond to topic.act requests, you need to add business configuration in System-action.xml

<business name= "topic" mustlogin= "false" > <forward> <path name= "Success" Path= "/module/topic/topi C.html "/> <path name=" Failure "path="/module/topic/topic.html "/> </forward></business>

(2) After the business configuration after the system forward to jump to the topic.html page, so you need to add topic.html files under D:\medical\war\module\topic

<! doctype html>
(3) Since the topic.html file needs to refer to Topic.js and topic.css, add these two files to the system.
(4) asynchronous calls to the server via Ajax when Topic.js is loaded
(function ( window) {    $ (document). Ready (function ()     {         //  Build System Menu          Generatesystemmenu ();        //  Set "Home" menu select          selectsystemmenu ("System_home_menu");         //  Get topic Content         gettopiccontent ();     });    /**     *  get topic content      */     function gettopiccontent ()     {         var data = {"TopicID":  gettopicid ()};         asyncrequest ("Topiccontent.data",  data, function (Result)          {                    }) ;     }) ( window );

3, the server gets the data after encapsulation for the JSON object return
(1) Due to the call to the server via Topiccontent.data, you need to configure the following content
<!--get topic information--><business name= "topiccontent" business-class= "com.medical.server.data.TopicDataAction"/ >
(2) define the Topicdataaction class to complete the service-side data read and encapsulation
/** *  system access to the Department of Information processing  *  *  @author  qingkechina 2014-08-31 */public  class TopicDataAction extends FrameDefaultAction{    /**      *  Global Gson Object      */    private final  static gson gson = new gson ();         @ Override    public string execute ()          throws frameexception    {        //   Gets the current record index value         string topicid = getparameter (" TopicID ");        if  (Frameutil.isempty (topicId))          {             Frameresultbean result = new frameresultbean ();             result.seterrorcode (Frameerrorcode.request_param_error);             result.seterrordesc (Frameutil.geterrordescbycode (Result.geterrorcode ()));             return gson.tojson (Result);         }                 //  can't get to the topic         topicdao topic =  topicutil.gettopicbyid (TopicID);        if  (topic ==  null)         {             frameresultbean result = new frameresultbean ();        &Nbsp;    result.seterrorcode (Frameerrorcode.request_content_empty);             result.seterrordesc (Frameutil.geterrordescbycode ( Result.geterrorcode ()));            return  Gson.tojson (Result);        }                 return gson.tojson (Topic);     }}

4. Draw the page by manipulating the DOM elements
Perfecting the Gettopiccontent () method in the Topic.js file
/** *  Get topic Content  */function gettopiccontent () {    var data =  {"TopicID":  gettopicid ()};    asyncrequest ("Topiccontent.data",  data,  function (Result)     {        //  If an error code is returned indicating that the data obtained is abnormal         var resultjson = eval (result);         if (Resultjson.errorcode)          {            showsystemglobalinfo ( RESULTJSON.ERRORDESC);            return;         }        //  Manipulate the DOM to draw data on the page         appendtopic2page (Resultjson);     });}
/** *  manipulate the DOM to draw data  */function appendtopic2page (Result) on the page {    //  Add title     var contentid = $ ("#topic_content_dynamic_id");     var topictitle = $ ("
Enter http://localhost:8080/medical in the browser, and enter as follows:
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/47/E6/wKiom1QDTm7gtBLsAAIb1L5g9tU056.jpg "title=". png " alt= "Wkiom1qdtm7gtblsaaib1l5g9tu056.jpg"/>

 
  
 
"Remarks": There are many features to be perfected, such as comment function, sharing function, invitation to answer function and right content, and so on, these functions should be left to the JSP content partially implemented 650) this.width=650; "Src=" http://img.baidu.com/hi/ Tsj/t_0015.gif "alt=" T_0015.gif "/>

 
  
 



This article is from the "Green Guest" blog, please be sure to keep this source http://qingkechina.blog.51cto.com/5552198/1547236
"Dou Medical" "19" Web application development 20 days