jsp語法轉換為thyemleaf

瞅小丫發表於2017-06-13

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>

JSP語法格式 (轉)
2008-01-06
JS
JSP 語法詳解(轉)
2007-08-11
JS
JSP基本語法
2020-10-26
JS
JSP常用語法
2017-10-24
JS
JSP 的語法
2006-12-19
JS
JSP開發入門(二)----JSP語法的基本原理 (轉)
2007-12-04
JS
JSP/Servlet基礎語法
2014-05-15
JSServlet
SQL Server中型別轉換（將varchar值轉換為資料型別為int的列時發生語法錯誤）
2011-10-20
SQLServer資料型別
切換輸入法預設語言為英文
2018-01-21
JSP第一篇【JSP介紹、工作原理、生命週期、語法、指令、行為】
2018-02-05
JS
Android 多國語言轉換 Excel 和 Excel 轉換為 string
2019-03-02
AndroidExcel
Java學習--jsp基礎語法
2016-07-17
JavaJS
vim替換命令（語法）
2013-09-12
java json字串轉換為物件，轉換為list
2014-04-16
JavaJSON字串物件
【基礎語法】short、int、long轉為byte
2024-04-04
如何在Python中將語音轉換為文字
2020-07-29
Python
【菜鳥學Java】7：JSP的基本語法
2015-12-21
JavaJS
javascript 字元轉換為ascii碼，ascii碼轉換為字元
2016-11-15
JavaScript字元ASCII
Activity轉換為View和把圖片轉換為View
2017-06-09
View
Swift3.0語言教程字串轉換為數字值
2016-11-18
Swift字串
使用 Orator 將你的 SQL 轉換為 Laravel Query 語句
2017-12-05
SQLLaravel
JSP結合XML XSLT將輸出轉換HTML（轉）
2007-06-28
JSXMLHTML
unix時間轉換為datetimedatetime轉換為unixtime
2018-07-06
js日期轉換工具類（仿oracle to_char，to_date等語法）
2018-07-29
JSOracle
語法糖甜不甜？巧用列舉實現“狀態”轉換限制
2021-10-14
jsp換皮膚
2004-01-15
JS
SAP OTR語言轉換
2010-07-11
R語言
JS實現將文字轉換為語音並自動播放
2022-06-22
JS
JS的語句及語法(轉)
2007-08-15
JS
在linux shell下將漢字轉換為url編碼的辦法(轉)
2007-08-15
Linux
轉換RM為MP3(轉)
2007-08-11
swift 3.0：as語法與強制型別轉換的一些理解
2016-11-11
Swift型別
kotlin 由淺入深（五）基本語法（空安全、轉換、區間）
2018-04-17
Kotlin
在Jsp/Servlet中的中文解決辦法 (轉)
2007-08-16
JSServlet
轉換成為整數
2020-12-30
數值轉換為字元
2014-09-26
字元
Oracle Blob 轉換為Clob
2010-06-10
Oracle
【轉載】oracle更新語法
2017-06-30
Oracle

jsp語法轉換為thyemleaf

相關文章