J2EE practices for separating Web Front-end and server-end development

The framework background has implemented basic public operation classes for addition, deletion, modification, and query. Action calls service and then the service calls public database operation classes. I am wondering how to transmit data to the front-end and how it will be displayed. In addition, the goal is to ensure the separation of front-end developers and back-end developers, implement interaction through established interfaces. Let's first make a small practice...

The general idea is that the frontend and backend transmission uses a JSON string with a fixed structure. There can be multiple datasets in the JSON string, each of which has a name. Frontend and backend developers use this name to connect.

In addition, the foreground uses jquery to encapsulate a common. js file to initialize and process the JSON string sent from the server.

 

Server:

Returns the list = (Data queried in the database...) through the query ·····);

The server places the list in map, and the key value is the name read by the front-end developer.

Then map is serialized as a JSON string through a similar tool Library such as fastjson and stored in request. setattribute (······)

 

Front end:

Use request. getattribute (...) reads JSON. In fact, you can fix the parameter value of this getattribute as the protocol of the framework and put it in a common-like way. JSP or write custom tags. Each front-end developer must include the JSP or add custom labels when creating the JSP. JSP or custom tags format and output the obtained JSON string as a JS object and a global JS object.

The JSON we get is a fixed-structure string serialized by map ("list", list.

In this way, we can encapsulate some fixed column JS methods on the front end to render the data in JSON to the DOM element we want. The following JS Code will render the data to the tag

<Div id = "list" spname = "list" datalist = "resultlist" column = "listtitledic" loadingimg = "true"> </div>.

In the preceding labels, spname: tag type datalist: corresponds to the list key value in the MAP: column: Indicates whether to display the scroll bar icon option for the header name dictionary loadingimg that corresponds to the key value of the read data field.

With this label, front-end developers do not need to write any code, and even the Data Rendering work is completed by the framework integration (the following code.

 

Front-end code snippet:

$ (Document ). ready (function () {// load the page list content, because the spname of our tag is list, we may also have the select tag, checkbox tag, etc., loadlist (); // loadselect () ;}); function loadlist () {if ($ ('div [spname] = "list "'). length! = 0) // determine if a div element with the property name spname value list exists, the load icon is displayed, and the global JSON dataset map is queried or asynchronously read. {// traverse the DIV tag with the spname list $ ('div [spname] = "list "'). each (function (I) {var dsname = $. trim ($ (this ). ATTR ("ds"); var currentds = eval ("datajson. map. "+ dsname); // assume that datajson is our global JSON data variable VAR jtemplateid = $. trim ($ (this ). ATTR ("jtemplate"); // I used jtemplate to render the data. The template file uses this attribute value for setting, but the preceding tag does not contain the jtemplate attribute, labels that do not contain the jtemplate attribute are automatically generated according to the list structure by default. The corresponding template removes the need for front-end staff to operate the template. VaR ifshowloadingimg = $. trim ($ (this ). ATTR ("loadingimg"); // whether to display the loading scroll bar image if (currentds = undefined) return true; // if the current dalist value does not exist in the JSON dataset, the next if (ifshowloadingimg = "true") {showloadingimg (this) will be judged out of this loop ); // display loading image} If (jtemplateid = "") {jtemplateid = "defaultlisttemplate"; $ (this ). ATTR ("jtemplate", jtemplateid);} processjtemplate (this, currentds); // use the jtemplate template to render data});}/*** use JT Emplate template renders data. parameters: input element, datalist **/function processjtemplate (elementtoberender, datalistdata) {var jdefalistlisttemplate; elementtoberender =$ (elementtoberender); var columndic =$. trim ($ (elementtoberender ). ATTR ("column"); // If the jtemplate value is defalistlisttemplate, the default list template if ($. trim (elementtoberender. ATTR ("jtemplate") = "defaultlisttemplate") {var ifshowloadingimg = $. trim ($ (elementtoberender ). ATTR (" Loadingimg "); jdefaultlisttemplate = generatedefalistlisttemplate (columndic, datalistdata); elementtoberender. settemplate (jdefalistlisttemplate); If (ifshowloadingimg = "true") setTimeout (function () {elementtoberender. processtemplate (datalistdata) }, 500); else elementtoberender. processtemplate (datalistdata);} else {// jdefalistlisttemplate}/*** Add a GIF image to the imported Dom element. **/function showloadingimg (ELEM Ent) {If (element = undefined) return false; var loadingimgurl = basepath + "/apps/common/image/loading.gif "; // loading image path var loadingimg =$ ("'); templatestring. push ('<thead> <tr>'); templatetdsstring. push ('<tbody >{# foreach $ T. datarows as record} <tr> '); $. each (datalistdata [0], function (I, n) {// obtain the first row of data in the dataset if (columndic! = Undefined) {var columnname = $. Trim (eval (columndic + "." + I); If (columnname! = "") {Templatestring. push ('<TH>'); templatestring. push (columnname); templatestring. push ('</Th>');} else {templatestring. push ('<TH>'); templatestring. push (I); templatestring. push ('</Th>');} templatetdsstring. push ('<TD>'); templatetdsstring. push ('{$ T. record. '); templatetdsstring. push (I); templatetdsstring. push ('}'); templatetdsstring. push ('</TD>') ;}}); templatestring. push ('</tr> </thead>'); templatetdsstring. push ('</TR >{#/for} </tbody>') return templatestring. join ('') + templatetdsstring. join ('') + '</table>';} // here only use the string array for splicing because of this performance is better, refer to http://www.quirksmode.org/dom/innerhtml.html

 

In this way, the front-end developer only needs to know the datalist name sent from the server to display a list using a row of labels. I just started to try it. Maybe the idea is not mature enough. I hope to give more comments :)