2. 程式人生 > >jsp語法轉換為thyemleaf

jsp語法轉換為thyemleaf

阿新 • • 發佈：2018-12-26
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.

相關推薦

jsp語法轉換為thyemleaf

1、含有js的jsp頁面 java 類中用model進行資料的傳遞 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib

html 頁面/jsp 頁面 日期格式的轉換，將日期格式轉換為字串型別

jsp 頁面 引入jstl標籤庫中fmt <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 使用標籤進行日期Date型別到String 字串的轉化 <fmt:formatDate valu

js 將json字串轉換為json物件的方法解析（簡單處理JSON語法格式校驗問題）

js 將json字串轉換為json物件的方法解析 將json字串轉換為json物件的方法。在資料傳輸過程中，json是以文字，即字串的形式傳遞的，而JS操作的是JSON物件，所以，JSON物件和JSON字串之間的相互轉換是關鍵 例如： JSON字串: var str1 = ‘{

jsp 將input內value 轉換為url key=vlaue格式 拼接並傳值

jsp button點選事件 使用ajax url拼接無法傳值 request.parameter("name"); 無法獲取值 $("#btn").click(function(){                 //獲得所有提交按鈕                 v

JSP中把動態頁面轉換為靜態頁面

要自動生成靜態頁面，用Filter截獲jsp請求並先進行預處理，自動生成Html，是個不錯的主意。一個很容易想到的方法是在Filter截獲Request後，，導向一個Servlet，在這個Servlet中向本機發送一個http請求，然後將響應寫入一個檔案： URLConnection urlConn =

HTML轉換為JSP

1.首先開啟.HTML檔案，可以用DW、sublime，或者記事本開啟2.然後在頭部加入這麼幾行程式碼<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%    Stri

java中String類型轉換為yyyy-MM-dd的Date類型

col code edate birt mat led div get sys String birthday ="2017-02-22"; SimpleDateFormat sdf = new SimpleDateFormat(("yyyy-MM-dd")); jav

OpenCV視頻讀取播放，視頻轉換為圖片

character capture clas 等待 del only _for lis ostream 轉載請註明出處！！！http://blog.csdn.net/zhonghuan1992 OpenCV視頻讀取播放，視頻轉換為圖片

將UTC日期字符串轉為本地時間字符串，如@"yyyy-MM-dd'T'HH:mm:ssZ"轉換為本地時間

timezone 方法 time ted lda 字符 alloc omd mst 由於蘋果商店上線應用24小時內會不穩定，更新提醒可能會陷入死循環，更新提醒需要24小時後彈出，需要把蘋果返回的上線時間轉換為本地時間故寫了下邊的方法： //將UTC日期字符串轉為本地

組播IP轉換為組播MAC地址【轉載】

映射關系 映射 過程 clas 網段 使用 3層 ans spa 鏈接：https://www.zhihu.com/question/36730567/answer/83083851來源：知乎著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。 組播IP轉換

二十四進制編碼串轉換為32位無符號整數（C語言實現）

bool while open 參數錯誤 hint div 第一個字符 bsp opened typedef int BOOL; #define TRUE 1; #define FALSE 0; #define UINT_MAX 0xffffffff

二進制查找樹轉換為雙向鏈表

creat while cpp val oid 指針 lin chan span 全然依照海濤哥劍指offer裏邊的遞歸思路來寫的。基本一樣。僅作學習驗證。努力鍛煉。努力學習！ 題目：輸入一棵二元查找樹，將該二元查找樹轉換成一個排序的雙向鏈表。要求不能創建不論什麽新

C語言——輸入一個字符串，將連續數字字符轉換為數字

一個 [0 fine main span nbsp 輸出 print ont 輸入一個字符串，內有數字和非數字字符，例如： A123cdf 456.78cpc876.9er 849.1 將其中連續的數字作為一個實數，依次存放到一數組a中。例如123存放在a[0]，456.

Java用OpenOffice將word轉換為PDF

sts pre 成功 accep 存在 china ati url 基礎 本文在原文的基礎上有所修改，原文請參考： http://titanseason.iteye.com/blog/1471606 由於此blog不支持附件附件請到此處下載 http://my.oschin

編程算法 - 把字符串轉換為整數 代碼(C)

fff val while sig track ont ntc pos minus 把字符串轉換為整數 代碼(C)本文地址: http://blog.csdn.net/caroline_wendy題目: 寫一個函數StrToInt, 模擬atoi的功能, 把字符串轉換為整

SSRS 實現數字金額轉換為中文大寫漢字

and pre lds 2.0 ber 部分 ima 中文 res 比如： 金額=49,701,120.00，將其轉換為“肆仟玖佰柒拾萬壹仟壹佰貳拾元整”；金額 289,546.52 ，轉換為 “貳拾捌萬玖仟伍佰肆拾陸元伍角貳分”。 解決方法：添加VB的轉換函數寫在CO

C# ASP.NET 轉換為int型的方法 很實用

con 一個 不能 問題 sum str .net div return 很多新手在搞c#或者.net開發的時候總會碰到一些小問題，如何知道字符能不能為int型 在這裏我寫了一個小的函數僅供大家參考： /// <summary> /// 判斷

C# 將 HTML 轉換為圖片或 PDF

ont gif completed 字段 sed pad cli 滾動條 lose 首先是把 HTML 轉換為圖片。 public partial class Form1 : Form { public Form1() {

get傳輸時，會將加號+ 轉換為空格

技術 傳輸 解決 ima ges png 前端 後端 blog 解決辦法： 前端： 替換加號為 ‘%2B’, 後端： 直接接收即可。 get傳輸時，會將加號+ 轉換為空格

JSP語法

數據 ring back border 出了 tuesday test github 與運算 以下內容引用自http://wiki.jikexueyuan.com/project/jsp/syntax.html： 一、Scriptlet Scriptlet可以包含任意數