为了账号安全,请及时绑定邮箱和手机立即绑定

如何自定义标签,调取后端方法,在前端使用

今天下午无聊,查看公司公司平台使用的技术,发现这个自定义标签这项小功能,本着鄙人没学过要掌握的精神,钻研了10来分钟,终于成功,经过测试验证了自己的想法,特此写出来,供广大同胞学习借鉴。
1、首先新建一个后缀名为tld的文件(如:david.tld);内容不知道写啥啊
在你的jsp页面中引用

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

查看这个路径中的文件(名字叫fn.tld),把文件的版本和<taglib>标签信息复制到你新建的tld文件中

<?xml version="1.0" encoding="UTF-8" ?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
  version="2.0">
</taglib>

然后在<taglib>标签里面添加新的内容

<description>JSTL 1.1 functions library</description>
  <display-name>JSTL functions</display-name>
  <tlib-version>1.1</tlib-version>
  <short-name>fn</short-name>
  <uri>http://java.sun.com/jsp/jstl/functions</uri>

我建议你把上面的<short-name>的值给改掉(最好和你新建的文件名一致(看着舒服))。接下来,你在fn.tld会看到许多<function></function>标签,你复制出一个到你的新建的文件中,把没用的值删掉

<function>
    <description> </description>
    <name></name>
    <function-class></function-class>
    <function-signature></function-signature>
    <example></example>
  </function>

前两个标签就不解释了,见名知意,解释下后三个。
<function-class></function-class>:里面写某类的全限定类名(这个类在哪个包下)
<function-signature></function-signature>:根据上面写的类,你要调取这个类里哪个方法(注意了:方法的类型是公有静态方法****)不然会出现错误;这个方法的返回类型写在方法名称的前面;如果方法中有参数,要写参数的类型;
<example></example>:这里写的值用在前端的,根据这个值来调取后端的方法。用法和jstl一样
下面我把我的测试贴出来;供大家参考
我的文件名叫david.tld

<?xml version="1.0" encoding="UTF-8" ?>

<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
        version="2.0">
    <description>JSTL 1.2 functions  library</description>
    <display-name>JSTL functions </display-name>
    <tlib-version>1.2</tlib-version>
    <short-name>fnd</short-name>
    <uri>http://java.sun.com/jsp/jstl/functions</uri>

    <function>
        <description>获取名称</description>
        <name>getName</name>
        <function-class>cn.huazx.ebp.modules.util.JSONUtil</function-class>
        <function-signature>java.lang.String getName(java.lang.String,int)</function-signature>
        <example>${fnd:getName(name,age)}</example>
    </function>
    <function>
        <description>获取值</description>
        <name>getValue</name>
        <function-class>cn.huazx.ebp.modules.util.JSONUtil</function-class>
        <function-signature> void getValue()</function-signature>
        <example>${fnd:getValue()}</example>
    </function>

    <function>
        <description>获取值</description>
        <name>getList</name>
        <function-class>cn.huazx.ebp.modules.util.JSONUtil</function-class>
        <function-signature> java.util.List getListValue()</function-signature>
        <example>${fnd:getListValue()}</example>
    </function>
</taglib>

后端的方法

public static String getName(String name ,int age){
        return name+age;
    }
    public static void getValue(){
        System.out.println("测试没有参数和返回值的方法");
    }
    public static List<String> getListValue(){
        List<String> list = new ArrayList<>();
        list.add("战三");
        list.add("java");
        return list;
    }

页面使用,别忘记在页面中引用你写的tld文件

 <li class="gis_sort">结果排序:${fnd:getName("谷磊",24)}</li>
${fnd:getValue()}<%--没有任何参数和返回值的--%>
<c:forEach items="${fnd:getList()}" var="str">
    <h1>${str}</h1>
</c:forEach>

效果图:
图片描述
图片描述

到此自定义标签,外加使用demo写完了。对了,要是想在js中文件使用标签,会出现错误的,要在页面定义<script></script>标签才能使用

<script>
    $(function(){
        $("#david").html("${fnd:getName("谷磊",24)}");
    });
</script>
点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消