HTML and JSP Development Separation Technology

xiaoxiao2021-03-06  84

In a traditional JSP program, we write HTML code with Java code together, which is convenient, but also leads to difficult to maintain, HTML developers and JSP developers are aggravated, we can make this tradition technology Page pull data technology. How can I achieve HTML development and JSP development? The answer is to use TAG technology. By using TAG technology, we can do not appear in the page program, where you need data, you will first set the label, then replace these tags, display data. I call this technology called to push data, and the page will only be defined. In this way, we can make HTML developers focus on the appearance of the page, while Java programmers do not need to collect page display, focus on background procedures, greatly improve programmability and convenience. Easy to develop cooperative development between programs. First you have to understand some TAG technology, then you can read this article.

The following is the sample program: First, the first is the Replace function // replace the string function // string strsource - source string // string strfrom - Subtrive // ​​String STRTO - Replace the string Public Static String Replace (String strsource, string strfrom, string string) {// If the sub-string to be replaced is empty, then return the source string IF (strFrom == null || strfrom.equals (")) Return STRSOURCE; String strDest = ""; // to replace the substring length INT INTFromlen = strfrom.length (); int idos; // cycle replacement string while ((intpos = strsource.indexof (strfrom))! = -1) { / / Get the left s string strDest = strDest strsource.substring (0, intpos); // plus the replacement substring strDest = strDest strdo; // Modify the source of the slave String strsource = strsource.substring (intpos intFromlen);} / / Plus no matching substrings strDest = strDest strsource; // Return Return strDest;} II. TLD (MyBookTag.TLD) Define your label 1.0 1 .2 listbook com.book.taglib.listbooktag JSP 3, TAG's background processing file, responsible for interpretation tag (listbooktag.java) package com.book.taglib; import java.util. *; import java .lang *;. import com.book.model.bookmodel; import com.book.utils.StringHelper; import javax.servlet.jsp.JspTagException; import javax.servlet.jsp.tagext.BodyTagSupport; import javax.servlet.jsp. TAGEXT.BODYCONTENT; import javax.servlet.jsp.pageContext;

import javax.servlet.jsp.JspWriter; import javax.servlet.ServletRequest; public class ListBookTag extends BodyTagSupport {// mark start position performed public int doStartTag () {return EVAL_BODY_BUFFERED;} // end position flag perform public int doEndTag () throws JSptagexception {int max = 0; string listbody = null; int number = 1; // Get the page information information, which is the content in the Request object string serialno = pageContext.getRequest (). GetParameter ("serialno); // Convert to Integer try {number = integer.parseint (serialno);} catch (exception e) {number = 1;} if (Number <1) Number = 1; // Get the data set saved in the session, of course, here can also Data BookVector = (Vector) PageContext.getSession (). GetAttribute ("BookVector"); if (Number * 10 0) {// Get content of the inside of the tag BodyContent BC = getBodyContent (); for (int i = (Number - 1) * 10; i

// Out of Try {pageContext.get (). Print (body);}}}}}}}}}}}}}} 4, JSP page (BookList.jsp) <% @ Page ContentType = Text / html; charSet = GBK "%> <% @ Taglib URI =" / mybooktag "prefix =" MyBookTag "%> A J2EE-based book Demo </ title> <script language =" JavaScript "> Function returnback () {document. Form1.action = "bookadmin.jsp";} </ script> </ head> <body bgcolor = "# ffffff" text = "# 000000" LeftMargin = "0" TopMargin = "0"> <h2 align = "center "> <font face =" black body "color =" # 0000cc "> Book list </ font> </ h2> <form name =" form1 "method =" post "> <table width =" 750 "border =" 1 "Cellspacing =" 0 "align =" center "cellpadding =" 3 "bordercolor =" # a5abb6 "bordercolordark =" # fff "> <tr align =" center "> <td width =" 100 "bgcolor =" fefbf4 "height = "41"> Sequence number </ td> <td width = "200" bgcolor = "fefbf4" height = "41"> graphic name </ td> <td width = "100" bgcolor = "fefbf4" height = " 41 "> Book author </ td> <td width =" 200 "bgcolor =" fefbf4 "height =" 41 "> publisher </ td> <td width =" 50 "bgcolor =" fefbf4 "height =" 41 " > Book price </ td> <td width = "100" bgcolor = "fefbf4" height = "41"> operation </ td> </ tr> <</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-108105.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="108105" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.045</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'd_2FFHEZYn9XFt86OqvRovEiDwgyullw4dUy0KKXUfVUU62TicQ54iXAk4dcLe_2B4GRoF0BDdBCqI0pTMgFuCp5yQ_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>