jsp语法转换为thyemleaf

最新推荐文章于 2024-07-22 08:30:00 发布

瞅小丫

最新推荐文章于 2024-07-22 08:30:00 发布

阅读量4k

点赞数

分类专栏： springboot 文章标签： jsp java

本文链接：https://blog.csdn.net/shiqiangdexin/article/details/73164970

版权

springboot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、含有js的jsp页面 java 类中用model进行数据的传递

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
    var pickCallBack = ${iCallBack};
    var pickCallBackParam = '${iCallBackParam}';
    var pickRadio ="${radio}";
    var pickTag = "${tag}";
    var pickTagName = "${tagName}";
        function pickCheck(id,isRadio) {
            if ($("#"+id).is(':checked')) {
                $("#"+id).prop("checked", false);
                $("#d_"+id).removeClass("pickActive");
            } else {
                $("#"+id).prop("checked", true);
                $("#d_"+id).addClass("pickActive");
                if(isRadio=='true'){
                    $("#pickContent div").removeClass("pickActive")
                    setPick();
                }
            }
            navigateText = "";
            $("#pickTip").html(navigateText);
            $("#pickTip").css("display","none");
        }
        document.onkeydown = function(event) {
            if (event.keyCode == 13) {
                setPick();
            }
        }
        /* 关闭下拉快速定位
        if(hasLoad==0){ 
            $(document).ready(keyMonitor());
        } */

    </script>
<div class="form-group">
    <blockquote>
        <p class="f12 fb pl10 tl C999">选择后回车即可快速确认，键盘输入可快速定位，退格可删除输入</p>
    </blockquote>
</div>
<div id="pickContent">
    ${pickContent}
</div>
<c:if test="${radio!='true'}">
<div class="fr w border-t ml10 tr pt10 form-group">
    <button type="button" class="btn btn-info form-control" onclick="setPick()">选择</button>
</div>
</c:if>

转换后的

 <html xmlns:th="http://www.thymeleaf.org">  

<script th:inline="javascript" >
/*<![CDATA[*/
    var pickCallBack = eval([[${iCallBack}]]) ;
    var pickCallBackParam = [[${iCallBackParam}]];
    var pickRadio =[[${radio}]];
    var pickTag =[[${tag}]];
    var pickTagName = [[${tagName}]];
        function pickCheck(id,isRadio) {
            if ($("#"+id).is(':checked')) {
                $("#"+id).prop("checked", false);
                $("#d_"+id).removeClass("pickActive");
            } else {
                $("#"+id).prop("checked", true);
                $("#d_"+id).addClass("pickActive");
                if(isRadio=='true'){
                    $("#pickContent div").removeClass("pickActive");
                    setPick();
                }
            }
            navigateText = "";
            $("#pickTip").html(navigateText);
            $("#pickTip").css("display","none");
        }
        document.onkeydown = function(event) {
            if (event.keyCode == 13) {
                setPick();
            }
        }
        /* 关闭下拉快速定位
        if(hasLoad==0){ 
            $(document).ready(keyMonitor());
        } */
        /*]]>*/
    </script>
<div class="form-group">
    <blockquote>
        <p class="f12 fb pl10 tl C999">选择后回车即可快速确认，键盘输入可快速定位，退格可删除输入</p>
    </blockquote>
</div>
<div id="pickContent" th:utext="${pickContent}">  

</div>
<div th:if="${radio!='true'}">
    <div class="fr w border-t ml10 tr pt10 form-group">
        <button type="button" class="btn btn-info form-control" onclick="setPick()">选择</button>
    </div>
</div>
</html>

2.还有样式便利的jsp转为thyemleaf

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--font-family: SimSun;-->
    body {
        font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    }

    pre {
        border: 0px;
        color: #595959;
        font-weight: 100;
        line-height: 24px;
        font-size: 12px;
    }
    td{padding:5px;}
    tr{background:#F0F0F0;}
    h1,h2,h3,h4,h5{color:#000000;}
    </style>
</head>
<body screen_capture_injected="true" ryt11773="1" style="padding:10px;">
        <!-- 标题 -->
        <div style="padding-left:4px;padding-bottom:0px; background:#fff; color:${MAIN_COLOR};font-size:18px;font-weight:bold;">

        </div>
        <div style="padding-right:4px;background:#fff; color:#999;font-size:12px;text-align:right;">
            本系统由CrapApi【crap.cn】提供技术支持
        </div>
        <div style="clear:both;height:2px;width:100%;background:${MAIN_COLOR};"></div>
        <!-- 列表 -->
        <div style="font-size:18px;line-height:36px; color:${MAIN_COLOR};padding:15px;background:#eeeeee;">
            <div style="color:#000000;font-size:20px;">目录</div>
            <c:forEach var="f" items="${requestScope.interfaces}" varStatus="status"> 
                ${ status.index + 1}. ${f.model.interfaceName}<br/>
            </c:forEach>
        </div>

        <!-- 内容 -->
        <c:forEach var="f" items="${requestScope.interfaces}" varStatus="status"> 
            <div style="height:20px;"></div>
            <div style="padding:20px;padding-top:10px;background:#f6f6f6; margin-top:20px;font-size:14px;color:#999;">
            <div style="margin-left:-10px;font-size:18px;font-weight:bold;color:${MAIN_COLOR};">${ status.index + 1}、 ${f.model.interfaceName}</div>
            <h3>1 功能说明</h3>
            ${f.model.remark}
            <br/>
            <h3>2 URL地址</h3>
            ${f.model.moduleUrl}${f.model.url}
            <br/>
            <br/>
            <h3>3 版本号</h3>
            ${f.model.version}
            <br/>
            <br/>
            <h3>4 Mock地址</h3>
            正确：${f.trueMockUrl}<br/>
            错误：${f.falseMockUrl}
            <br/>
            <br/>

            <h3>3 HTTP请求方式</h3>
            ${f.model.method}
            <br/>
            <br/>
            <h3>4 请求头说明</h3>
            <table style="width:100%;">
                <tr style="background:${MAIN_COLOR};color:#fff;">
                    <td>名称</td>
                    <td>是否必须</td>
                    <td>类型</td>
                    <td>默认值</td>
                    <td style="width:260px;">备注</td>
                </tr>
                <c:forEach var="v" items="${f.headers}"> 
                <tr>
                    <td>${v.name}</td>
                    <td>${v.necessary}</td>
                    <td>${v.type}</td>
                    <td>${v.def}</td>
                    <td>${v.remark}</td>
                </tr>
                </c:forEach>
            </table>
            <br/>
            <h3>5 输入参数说明<c:if test="${f.customParams!=null}">(自定义参数)</c:if></h3>
                <c:if test="${f.formParams!=null}">
                    <table style="width:100%;">
                        <tr style="background:${MAIN_COLOR};color:#fff;">
                            <td>名称</td>
                            <td>是否必须</td>
                            <td>参数位置</td>
                            <td>类型</td>
                            <td>默认值</td>
                            <td style="width:260px;">备注</td>
                        </tr>

                        <c:forEach var="v" items="${f.formParams}"> 

                        <tr>
                            <td>${v.name}</td>
                            <td>${v.necessary}</td>
                            <td>${v.inUrl=='true'?'URL地址':'普通参数'}</td>
                            <td>${v.type}</td>
                            <td>${v.def}</td>
                            <td>${v.remark}</td>
                        </tr>
                        </c:forEach>
                    </table>
                </c:if>
                <c:if test="${f.customParams!=null}">
                    <h5 style="color:#999999;">请求示列</h5>
                    ${f.customParams}
                    <br/><br/>
                    <h5 style="color:#999999;">参数备注</h5>
                    <table style="width:100%;">
                        <tr style="background:${MAIN_COLOR};color:#fff;">
                            <th style="width:30px;"></th>
                            <th>名称</th>
                            <th style="width:60px;">类型</th>
                            <th style="width:50px;">是否必须</th>
                            <th style="width:80px;">备注</th>
                        </tr>
                        <c:forEach var="v" items="${f.paramRemarks}"> 
                        <tr>
                            <td style="color:red;">${v.deep}</td>
                            <td style="padding-left:20px;">
                                <div style="padding-left: ${v.deep*10}px;">${v.name}</div>
                            </td>
                            <td>${v.type}</td>
                            <td>${v.necessary}</td>
                            <td>${v.remark}</td>
                        </tr>
                        </c:forEach>
                </table>
            </c:if>
            <br/>
            <h3>6 请求示例</h3>
            <div style="background:#F0F0F0; padding:10px;">
            <pre style="font-family: SimSun;">${f.model.requestExam}</pre>
            </div>
            <br/>
            <h3>7 返回参数说明</h3>
            <table style="width:100%;">
                <tr style="background:${MAIN_COLOR};color:#fff;">
                    <th style="width:30px;"></th>
                    <th>名称</th>
                    <th style="width:60px;">类型</th>
                    <th style="width:50px;">是否必须</th>
                    <th style="width:80px;">备注</th>
                </tr>
                <c:forEach var="v" items="${f.responseParam}"> 
                <tr>
                    <td style="color:red;">${v.deep}</td>
                    <td style="padding-left:20px;">
                        <div style="padding-left: ${v.deep*10}px;">${v.name}</div>
                    </td>
                    <td>${v.type}</td>
                    <td>${v.necessary}</td>
                    <td>${v.remark}</td>
                </tr>
                </c:forEach>
            </table>
            <br/>
            <h3>8 正确返回示例</h3>
            <div style="background:#F0F0F0; padding:10px;">
            <pre>${f.model.trueExam}</pre>
            </div>
            <br/>
            <h3>9 错误返回示例</h3>
            <div style="background:#F0F0F0; padding:10px;">
            <pre>${f.model.falseExam}</pre>
            </div>
            <br/>
            <h3>10 错误码</h3>
            <table style="width:100%;">
                <tr style="background:${MAIN_COLOR};color:#fff;">
                    <td>Code</td>
                    <td>Msg</td>
                </tr>
                <c:forEach var="v" items="${f.errors}"> 
                <tr>
                    <td>${v.errorCode}</td>
                    <td>${v.errorMsg}</td>
                </tr>
                </c:forEach>
            </table>
        </div>
        </c:forEach>


</body>
</html>

转换后

<html xmlns:th="http://www.thymeleaf.org">  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--font-family: SimSun;-->
    body {
        font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    }

    pre {
        border: 0px;
        color: #595959;
        font-weight: 100;
        line-height: 24px;
        font-size: 12px;
    }
    td{padding:5px;}
    tr{background:#F0F0F0;}
    h1,h2,h3,h4,h5{color:#000000;}
    </style>
</head>
<body screen_capture_injected="true" ryt11773="1" style="padding:10px;">
        <!-- 标题 -->
        <div th:style="'padding-left:4px;padding-bottom:0px; background:#fff; color:'+${MAIN_COLOR}+';font-size:18px;font-weight:bold;'">
            <span th:text="${title}">--模块</span>【<span th:text="${moduleName}"></span>】
        </div>
        <div style="padding-right:4px;background:#fff; color:#999;font-size:12px;text-align:right;">
            本系统由内蒙古朗坤科技有限公司技术部提供技术支持
        </div>
        <div th:style="'clear:both;height:2px;width:100%;background:'+${MAIN_COLOR}+';'"></div>
        <!-- 列表 -->
        <div th:style="'font-size:18px;line-height:36px; color:'+${MAIN_COLOR}+';padding:15px;background:#eeeeee;'" >
            <div style="color:#000000;font-size:20px;">目录</div>

            <div  th:each="f,status:${interfaces}" >
                <span th:text="${status.index + 1}">.</span><span th:text="${f.model.interfaceName}"></span><br/>
            </div> 
        </div>


        <div  th:each="f,status:${interfaces}" > 
            <div style="height:20px;"></div>
            <div style="padding:20px;padding-top:10px;background:#f6f6f6; margin-top:20px;font-size:14px;color:#999;">
            <div th:style="'margin-left:-10px;font-size:18px;font-weight:bold;color:'+${MAIN_COLOR}+';'">
                <span th:text="${ status.index + 1}"></span>、<span th:text="${f.model.interfaceName}"></span> </div>
            <h3>1 功能说明</h3>
                <span th:text="${f.model.remark}"></span>
            <br/>
            <h3>2 URL地址</h3>
                <span th:text="${f.model.moduleUrl}"></span>
                <span th:text="${f.model.url}"></span>

            <br/>
            <br/>
            <h3>3 版本号</h3>
                <span th:text="${f.model.version}"></span> 
            <br/>
            <br/>
            <h3>4 Mock地址</h3>
                正确：<span th:text="${f.trueMockUrl}"></span> <br/>
                错误：<span th:text="${f.falseMockUrl}"></span>  
            <br/>
            <br/>

            <h3>3 HTTP请求方式</h3>
                <span th:text="${f.model.method}"></span> 
            <br/>
            <br/>
            <h3>4 请求头说明</h3>
            <table style="width:100%;">
                <tr th:style="'background:'+${MAIN_COLOR}+';color:#fff;'">
                    <td>名称</td>
                    <td>是否必须</td>
                    <td>类型</td>
                    <td>默认值</td>
                    <td style="width:260px;">备注</td>
                </tr>


                <div  th:each="v,status:${f.headers}" >  
                <tr>
                    <td th:text="${v.name}"></td>
                    <td th:text="${v.necessary}"></td>
                    <td th:text="${v.type}"></td>
                    <td th:text="${v.def}"></td>
                    <td th:text="${v.remark}"></td>
                </tr>
                </div>
            </table>
            <br/>
            <h3>5 输入参数说明<div th:if="${f.customParams!=null}">(自定义参数)</div></h3>
                <div th:if="${f.formParams!=null}">
                    <table style="width:100%;">
                        <tr th:style="'background:'+${MAIN_COLOR}+';color:#fff;'">
                            <td>名称</td>
                            <td>是否必须</td>
                            <td>参数位置</td>
                            <td>类型</td>
                            <td>默认值</td>
                            <td style="width:260px;">备注</td>
                        </tr>

                        <div  th:each="v,status:${f.formParams}" > 

                        <tr>
                            <td th:text="${v.name}"></td>
                            <td th:text="${v.necessary}"></td>
                            <td th:text="${v.inUrl=='true'?'URL地址':'普通参数'}"></td>
                            <td th:text="${v.type}"></td>
                            <td th:text="${v.def}"></td>
                            <td th:text="${v.remark}"></td>
                        </tr>
                        </div>
                    </table>
                 </div>

                <div th:if="${f.customParams!=null}">
                    <h5 style="color:#999999;">请求示列</h5>
                    ${f.customParams}
                    <br/><br/>
                    <h5 style="color:#999999;">参数备注</h5>
                    <table style="width:100%;">
                        <tr th:style="'background:'+${MAIN_COLOR}'+;color:#fff;'">
                            <th style="width:30px;"></th>
                            <th>名称</th>
                            <th style="width:60px;">类型</th>
                            <th style="width:50px;">是否必须</th>
                            <th style="width:80px;">备注</th>
                        </tr> 
                        <div  th:each="v,status:${f.paramRemarks}" > 
                        <tr>
                            <td style="color:red;" th:text="${v.deep}"></td>
                            <td style="padding-left:20px;">
                                <div th:style="'padding-left:'+${v.deep*10}+'px;'" th:text="${v.name}"></div>
                            </td>
                            <td th:text="${v.type}"></td>
                            <td th:text="${v.necessary}"></td>
                            <td th:text="${v.remark}"></td>
                        </tr>
                        </div>
                </table>
            </div>
            <br/>
            <h3>6 请求示例</h3>
            <div style="background:#F0F0F0; padding:10px;">
            <pre style="font-family: SimSun;" th:text="${f.model.requestExam}"></pre>
            </div>
            <br/>
            <h3>7 返回参数说明</h3>
            <table style="width:100%;">
                <tr th:style="'background:'+${MAIN_COLOR}+';color:#fff;'">
                    <th style="width:30px;"></th>
                    <th>名称</th>
                    <th style="width:60px;">类型</th>
                    <th style="width:50px;">是否必须</th>
                    <th style="width:80px;">备注</th>
                </tr>

                <div  th:each="v,status:${f.responseParam}" >  
                <tr>
                    <td style="color:red;" th:text="${v.deep}"></td>
                    <td style="padding-left:20px;">
                        <div th:style="'padding-left:'+${v.deep*10}+'px;'" th:text="${v.name}"></div>
                    </td>
                    <td th:text="${v.type}"></td>
                    <td th:text="${v.necessary}"></td>
                    <td th:text="${v.remark}"></td>
                </tr>
                </div>
            </table>
            <br/>
            <h3>8 正确返回示例</h3>
            <div style="background:#F0F0F0; padding:10px;">
            <pre th:text="${f.model.trueExam}"></pre>
            </div>
            <br/>
            <h3>9 错误返回示例</h3>
            <div style="background:#F0F0F0; padding:10px;">
            <pre th:text="${f.model.falseExam}"></pre>
            </div>
            <br/>
            <h3>10 错误码</h3>
            <table style="width:100%;">
                <tr th:style="'background:'+${MAIN_COLOR}+';color:#fff;'">
                    <td>Code</td>
                    <td>Msg</td>
                </tr>
                <div  th:each="v,status:${f.errors}" >   
                <tr>
                    <td th:text="${v.errorCode}"></td>
                    <td th:text="${v.errorMsg}"></td>
                </tr>
                </div>
            </table>
        </div> 
        </div> 
        <!-- 内容 --> 
</body>
</html>