jsp语法转换为thyemleaf

刺骨的言语ヽ痛彻心扉 2022-06-14 07:10 309阅读 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">  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">  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>