【mvc之前台优化标签】

最新推荐文章于 2023-06-29 00:00:00 发布
最新推荐文章于 2023-06-29 00:00:00 发布
阅读量195 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # mvc的模式 文章标签： mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43943548/article/details/91358584
本文介绍如何使用自定义JSP标签库优化前端代码，包括select、checkbox和分页标签的实现，以及它们在查询和展示学生信息时的应用。

目录

前言

这一篇是写前台如何使用自定义标签来优化代码

之前一篇是写后台优化代码的，【mvc之后台优化代码】

还是一样，纯代码。

index.jsp整体

<body>
	<div style="align-content: center">
		<form action="StudentAction.action?method=getAll" method="post" align="center">
		<a href="index.jsp">刷新</a>
			教员<z:select name="tid" textVal="tname" items="${TeacherList }" textKey="tid" headerTextKey="0" headerTextval="全部教员"></z:select>
			&nbsp;&nbsp;班级<z:select name="cid" textVal="cname" items="${ClassList }" textKey="cid" headerTextKey="0" headerTextval="全部班级"></z:select>	
			&nbsp;&nbsp;爱好:<z:checkbox items="${shobbys }" name="shobby"></z:checkbox>
			<br/>
			<input type="submit" value="查询" >
			<a href="add.jsp">增加</a>
		</form>
		
		<table border="1px" align="center" width="50%">
			<tr>
				<td>学生id</td>
				<td>学生姓名</td>
				<td>学生教员</td>
				<td>学生班级</td>
				<td>学生爱好</td>
				<td>操作</td>
			</tr>
			
			<c:if test="${not empty list }">
				<c:forEach items="${list }" var="g">
					<tr>
						<td>${g.sid }</td>
						<td>${g.sname }</td>
						<td>${g.tid }</td>
						<td>${g.cid }</td>
						<td>${g.shobby }</td>
						<td>
							<a href="StudentAction.action?method=loadStu&sid=${g.sid }">修改</a>
							<a href="StudentAction.action?method=deleteStu&sid=${g.sid }" onclick="return  confirm('你是否确定要删除？')==1">删除</a>
						</td>
					</tr>
				</c:forEach>
			</c:if>
			
		</table>
		<div align="center">
			<z:pageBean pagebean="${PageBean }"></z:pageBean>
		</div>
		
		
	</div>
</body>

z:tld自定义标签库

  <tag>
	    <name>select</name>
	    <tag-class>com.tag.selectTag</tag-class>
	    <body-content>JSP</body-content>
	     <attribute>
	        <name>id</name>
	        <required>false</required>
	        <rtexprvalue>false</rtexprvalue>
	    </attribute>
	    <attribute>
	        <name>name</name>
	        <required>false</required>
	        <rtexprvalue>false</rtexprvalue>
	    </attribute>
	    <attribute>
	        <name>items</name>
	        <required>true</required>
	        <rtexprvalue>true</rtexprvalue>
	    </attribute>
	     <attribute>
	        <name>textKey</name>
	        <required>true</required>
	        <rtexprvalue>false</rtexprvalue>
	    </attribute>
	    <attribute>
	        <name>textVal</name>
	        <required>true</required>
	        <rtexprvalue>false</rtexprvalue>
	    </attribute>
	    <attribute>
	        <name>selectedVal</name>
	        <required>false</required>
	        <rtexprvalue>true</rtexprvalue>
	    </attribute>
	    <attribute>
	        <name>headerTextKey</name>
	        <required>false</required>
	        <rtexprvalue>false</rtexprvalue>
	    </attribute>
	     <attribute>
	        <name>headerTextval</name>
	        <required>false</required>
	        <rtexprvalue>false</rtexprvalue>
	    </attribute>
	    
	  </tag>
  
		  <tag>
		    <name>pageBean</name>
		    <tag-class>com.tag.pageTag</tag-class>
		    <body-content>JSP</body-content>
		     <attribute>
		        <name>pagebean</name>
		        <required>true</required>
		        <rtexprvalue>true</rtexprvalue>
		    </attribute>
		  </tag>
  
    <tag>
	    <name>checkbox</name>
	    <tag-class>com.tag.CheckBoxTag</tag-class>
	    <body-content>JSP</body-content>
	     <attribute>
	        <name>items</name>
	        <required>true</required>
	        <rtexprvalue>true</rtexprvalue>
	    </attribute>
	     <attribute>
	        <name>selected</name>
	        <required>false</required>
	        <rtexprvalue>true</rtexprvalue>
	    </attribute>
	    
	    <attribute>
	        <name>name</name>
	        <required>true</required>
	        <rtexprvalue>true</rtexprvalue>
	    </attribute>
	    
	  </tag>

标签助手类

checkbox标签助手类

public class CheckBoxTag  extends BodyTagSupport{

	private static final long serialVersionUID = 1657191454649826759L;
	
	private List<Object>  items=new ArrayList<>();
	private String name;
	private List<Object> selected = new ArrayList<>();
	
	
	

	
	public List<Object> getItems() {
		return items;
	}
	public void setItems(List<Object> items) {
		this.items = items;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public List<Object> getSelected() {
		return selected;
	}
	public void setSelected(List<Object> selected) {
		this.selected = selected;
	}
	@Override
	public int doStartTag() throws JspException {
		JspWriter out = pageContext.getOut();
		try {
			out.write(toHtml());
		} catch (IllegalArgumentException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (InstantiationException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (NoSuchFieldException e) {
			e.printStackTrace();
		} catch (SecurityException e) {
			e.printStackTrace();
		}
		return SKIP_BODY;
	}
	private String toHtml() throws IllegalArgumentException, IllegalAccessException, InstantiationException, NoSuchFieldException, SecurityException {
		StringBuffer sb = new StringBuffer();
		
			for (Object it : items) {
	
				if(selected.contains(it)) {
					sb.append("<input  checked=\"checked\" type='checkbox' value ='"+it+"' name='"+name+"'  >"+it+"&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				else {
					sb.append("<input type='checkbox' value ='"+it+"' name='"+name+"'  >"+it+"&nbsp;&nbsp;&nbsp;&nbsp;");
				}
		
		
			}
		return sb.toString();
	}
}

pageTag标签助手类

public class pageTag extends BodyTagSupport{

	private static final long serialVersionUID = -6466820558378004043L;

	public PageBean pagebean;

	public PageBean getPagebean() {
		return pagebean;
	}

	public void setPagebean(PageBean pagebean) {
		this.pagebean = pagebean;
	}
	
	@Override
	public int doStartTag() throws JspException {
		JspWriter out = pageContext.getOut();
		try {
			out.write(toHtml());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return SKIP_BODY;
	}

	private String toHtml() {
		StringBuffer sb = new StringBuffer();
		
		//点击分页栏的时候要提交的表单
		sb.append(" <form id='pageBeanForm' action='"+pagebean.getUrl()+"' method='post'>");
		
		
		sb.append(" 	<input type='hidden' name='page' value = '"+pagebean.getPage()+"'>");
		Map<String, String[]> paramMap = pagebean.getParamMap();//将类里面的map集合实列化
		
		if(paramMap!=null&&paramMap.size()>0) {
			for (Entry<String, String[]> entry :  paramMap.entrySet()) {
				
				if(!"page".equals(entry.getKey())) {//因为上面已经将page参数放到上面去了
					for (String val : entry.getValue() ) {//在paramMap的键值队中值是一个数组，所以需要遍历
						sb.append(" 	<input type='hidden' name='"+entry.getKey()+"' value= '"+val+"'>");
					}
				}
			}
		}
		
//		<form id='pageBeanForm' action='http://localhost:8080/T224-pagebean/teacherList' method='post'>
//				<input type='hidden' name='rows' value= '"+val+"'>
//				<input type='hidden' name='url' value= '"+val+"'>
//				<input type='hidden' name='max' value= '"+val+"'>
//				<input type='hidden' name='page'value= '"+val+"'>
//				<input type='hidden' name='tname' value='晓'>
//		</form>
		
		sb.append(" </form>");
		//分页栏实际要操作的按钮
		
		sb.append(" <div style='text-align: center; font-size: 12px;'>");
		sb.append(" 每页"+pagebean.getRows()+"条，共"+pagebean.getTotal()+"条，第"+pagebean.getPage()+"页，共"+pagebean.getMaxPage()+"页&nbsp;&nbsp;<a href='javascript:gotoPage(1)'>首页</a>&nbsp;&nbsp;<a");
		sb.append(" href='javascript:gotoPage("+pagebean.getPreviousPage()+")'>上一页</a>&nbsp;&nbsp;<a");
		sb.append(" href='javascript:gotoPage("+pagebean.getNextPage()+")'>下一页</a>&nbsp;&nbsp;<a");
		sb.append(" href='javascript:gotoPage("+pagebean.getMaxPage()+")'>尾页</a>&nbsp;&nbsp;<input type='text'");
		sb.append(" id='skipPage'");
		sb.append(" style='text-align: center; font-size: 12px; width: 50px;'>&nbsp;&nbsp;<a");
		sb.append(" href='javascript:skipPage()'>Go</a>");
		sb.append(" </div>");
		

		
		
		//js代码块
		sb.append(" <script type='text/javascript'>");
		sb.append(" 	function gotoPage(page) {");
		sb.append("		  	document.getElementById('pageBeanForm').page.value = page;");
		sb.append(" 		document.getElementById('pageBeanForm').submit();");
		sb.append(" 	}");
		sb.append("		function skipPage() {");
		sb.append("			var page = document.getElementById('skipPage').value;");
		sb.append("			if(!page || isNaN(page) || parseInt(page)<1 || parseInt(page)>"+pagebean.getMaxPage()+"){");
		sb.append("				alert('请输入1~N的数字');");
		sb.append("				return;");
		sb.append("		}");
		sb.append("		gotoPage(page);");
		sb.append("		}");
		sb.append("	</script>");
		
		return sb.toString();
	}
	
}

selectTag助手类

/**
 * 1.值的传递 ： id name
 * 2.数据源 ： items
 * 3.展示列与数据存储列与实体类的对应关系： textKey textVal
 * 4.数据回显 selectedVal
 * 5.可能下拉框默认值（头标签）headerTextKey  headerTextVal
 * @author Lenovo
 *
 */
public class selectTag extends BodyTagSupport{

	private static final long serialVersionUID = -2985228892464897369L;
	
	private String id;//值的传递 ： id name
	private String name;//值的传递 ： id name
	private List<Object> items = new ArrayList<>();//数据源 ： items
	private String textKey;//展示列与数据存储列与实体类的对应关系： textKey textVal
	private String textVal;//展示列与数据存储列与实体类的对应关系： textKey textVal
	private String selectedVal;//数据回显 selectedVal
	private String headerTextKey;//可能下拉框默认值（头标签）headerTextKey  headerTextVal
	private String headerTextval;//可能下拉框默认值（头标签）headerTextKey  headerTextVal
	
	
	
	
	public String getId() {
		return id;
	}


	public void setId(String id) {
		this.id = id;
	}


	public String getName() {
		return name;
	}


	public void setName(String name) {
		this.name = name;
	}


	public List<Object> getItems() {
		return items;
	}


	public void setItems(List<Object> items) {
		this.items = items;
	}


	public String getTextKey() {
		return textKey;
	}


	public void setTextKey(String textKey) {
		this.textKey = textKey;
	}


	public String getTextVal() {
		return textVal;
	}


	public void setTextVal(String textVal) {
		this.textVal = textVal;
	}


	public String getSelectedVal() {
		return selectedVal;
	}


	public void setSelectedVal(String selectedVal) {
		this.selectedVal = selectedVal;
	}


	public String getHeaderTextKey() {
		return headerTextKey;
	}


	public void setHeaderTextKey(String headerTextKey) {
		this.headerTextKey = headerTextKey;
	}


	public String getHeaderTextval() {
		return headerTextval;
	}


	public void setHeaderTextval(String headerTextval) {
		this.headerTextval = headerTextval;
	}


	@Override
	public int doStartTag() throws JspException {
		JspWriter out = pageContext.getOut();
		try {
			out.print(toHtml());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return SKIP_BODY;
	}


	private StringBuffer toHtml() throws Exception {
		StringBuffer sb = new StringBuffer();//一个StringBuffer的类
		
		
		sb.append("<select id='"+id+"' name='"+name+"' >");//开头
		
		if(!(headerTextKey ==null|| headerTextval ==null || "".equals(headerTextKey)||"".equals(headerTextval))) {
			sb.append("<option  value= '"+headerTextKey+"'>");
			sb.append(headerTextval);
			sb.append("</option>");
		}//如果有默认的header就要加上的代码
		Object keyVal;
		Object Val;
		for (Object it : items) {
			keyVal =  PropertyUtils.getProperty(it, textKey);//找到这个对象的属性：id
			keyVal = keyVal+"";
			
			Val =  PropertyUtils.getProperty(it, textVal);//找到这个对象的属性：name
			Val = Val +"";	
			 
			 
			if(keyVal.equals(selectedVal)) {//判断回显的字符串
				sb.append("<option selected  value= '"+keyVal+"'>");
				sb.append(Val);
				sb.append("</option>");
			}
			else {
				sb.append("<option value= '"+keyVal+"'>");
				sb.append(Val);
				sb.append("</option>");
			}
		}
		
		sb.append("</select>");//结尾
		return sb;
	}
}

效果图

在这里插入图片描述

总结

在这之后差不多就基本完成优化了,但还是有点问题暂时没解决

Thanks♪(･ω･)ﾉ希望对大家有所帮助

前端框架系列之（mvc）
vv_bug
06-16 2219
前言 前面我们写了三篇关于es装饰器的文章了，感兴趣的可以去看看： 前端框架系列之（装饰器Decorator） 前端框架系列之（vue-class-component) 前端框架系列之(vue-property-decorator) 简介 MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式： Model（模型）表示应用程序核心（比如数据库记录列表）。 View（视图）显示数据（数据库记录）。 Controller（控制器）处理输
springmvc--前台表单数据传到后台
571500581的博客
12-12 6416
1： 基本数据类型(int, string,.....)   1.1： 页面 1.2: 控制器
MVC中前台所得
weixin_34235135的博客
06-24 78
前台页面时间格式修改： @item.CreateTime.ToString("yyyy-MM-dd hh:mm:ss") 前台方法调用传参数： <a href="#" title="编辑" onclick="openPrintMode ('edit','@item.KeyId');">编辑</a> 前台异步调controller中方法： ...
MVC 中输出Html标签的方法
weixin_34375233的博客
07-01 408
@: item.content 用过ASP.NET MVC的人都知道，这是MVC的基本输出的方式，但是最近我在写一个页面的时候，却碰上了一个问题，我需要在一个div中输出一个<br />标签，然而他却直接把<br />给输了出来，这确实让人很郁闷。 我看了一下代码，原来在输出的时候，这种方式直接把<和>给变换成了&lt;和&gt;，所以我想尽...
MVC 前台获取后台数据的简单方法
love_pgme的博客
08-11 9931
后台代码：   前台代码： 然后在前台循环取出数据 放到页面上： &lt;table&gt; &lt;thead id=""&gt; &lt;tr id="" class=""&gt; &lt;th class=""&gt;真实姓名&lt
spring mvc的文件上传之优化
rainjm的博客
11-20 2800
我看了下很多楼主的文章，各有各的特色，但我觉得都不是我所想要的，所以我就自己写了个较完整的demo 我通过ajax+springmvc实现的文件上传 ajax的技术并没有使用自身携带的AjaxFileUpload（个人觉得代码量太多） 用ajax实现，网页里的很多表单数据也想获得怎么办呢 我是这样实现的： 先看我的xxx.jsp页面的实现代码：     page
自定义MVC
weixin_67338832的博客
06-25 299
目录一，MVC简介二，最初的增删改查三，反射版的增删改查四，自定义MVC工作原理图五，自定义mvc后台代码实现1.什么是mvcMVC(Model View Controller)是一种软件设计的框架模式，它采用模型(Model)-视图(View)-控制器(controller)的方法把业务逻辑、数据与界面显示分离。把众多的业务逻辑聚集到一个部件里面，当然这种比较官方的解释是不能让我们足够清晰的理解什么是MVC的。用通俗的话来讲，MVC的理念就是把数据处理、数据展示(界面)和程序/用户的交互三者分离开的一种编
Spring MVC面试题
我从不打没有准备的仗！
06-29 970
Spring MVC面试题
基于MVC4+Bootstrap3企业门户网站源码（前台+后台）.zip
05-25
- 前台设计注重用户体验，提供清晰的信息结构和友好的导航，使用Bootstrap3可以快速创建现代感强且功能丰富的界面。 - 后台管理系统则用于管理员管理网站内容、用户、权限等，通常需要具备角色管理、内容发布、...
一个完整net C# MVC项目
01-25
综上所述，这个项目提供了一个完整的C# MVC Web应用示例，涵盖了开发中涉及的各个方面：从后端业务逻辑、数据库交互，到前端页面的美化和用户体验优化。对于初学者和开发者来说，这是一个很好的学习和参考资源，可以...
医院管理系统前台mvc+dao实现
11-24
《医院管理系统前台MVC+DAO实现详解》 在IT行业中，设计并实现一套高效、稳定的管理系统是至关重要的，尤其在医疗领域，一个完善的医院管理系统能够极大地提升医疗服务的效率与质量。本文将深入探讨如何运用MVC...
H5智能内核-基于MVC架构的全新Zoomla!逐浪CMS2 x3.8发布
11-16
众所周知，目前面向云与大数据是今天互联网的大势所趋，而MVC框架则是目前最流行的开发框架之一。 ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。 ASP.NET 支持三种不同的开发...
网络安全监控数据大屏案例.zip
09-08
网络安全监控数据大屏案例.zip
xapp794-1080p60-camera_中英文对照版_2025年.pdf
09-08
xapp794-1080p60-camera_中英文对照版_2025年
xapp1220-ultrascale-bpi-config-prog-nor-flash_中英文对照版_2025年.pdf
09-08
xapp1220-ultrascale-bpi-config-prog-nor-flash_中英文对照版_2025年
wendong18_525_34256_1757323956580.zip
09-08
wendong18_525_34256_1757323956580.zip
MVIMG_20250908_231048.jpg
最新发布
09-08
MVIMG_20250908_231048.jpg
EnablesreadingandwritingonSDcardusingSDcardslotoftheSTM32Board..zip
09-08
EnablesreadingandwritingonSDcardusingSDcardslotoftheSTM32Board..zip
Dropinascreenshotandconvertittocleancode(HTML-Tailwind-React-Vue).zip
09-08
Dropinascreenshotandconvertittocleancode(HTML-Tailwind-React-Vue).zip
PHP MVC后台模板开发实战指南
根据提供的文件信息，虽然标题和描述内容相同且重复，仅提供了一个“后台模板.rar”的标题，但我们可以从中推断出一些知识点，结合标签“PHP MVC 开发 实战 编程”和文件名称列表“后台模板”，可以得出这应该是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值