jsp語法轉換為thyemleaf
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語法格式 (轉)JS
- JSP 語法詳解(轉)JS
- JSP基本語法JS
- JSP常用語法JS
- JSP 的語法JS
- JSP開發入門(二)----JSP語法的基本原理 (轉)JS
- JSP/Servlet基礎語法JSServlet
- R語言中如何將科學計數法轉換為數值型R語言
- SQL Server中型別轉換（將varchar值轉換為資料型別為int的列時發生語法錯誤）SQLServer資料型別
- 切換輸入法預設語言為英文
- JSP第一篇【JSP介紹、工作原理、生命週期、語法、指令、行為】JS
- Android 多國語言轉換 Excel 和 Excel 轉換為 stringAndroidExcel
- Java學習--jsp基礎語法JavaJS
- vim替換命令 （語法）
- java json字串轉換為物件，轉換為listJavaJSON字串物件
- 【基礎語法】short、int、long轉為byte
- 【菜鳥學Java】7：JSP的基本語法JavaJS
- 如何在Python中將語音轉換為文字Python
- javascript 字元轉換為ascii碼，ascii碼轉換為字元JavaScript字元ASCII
- Activity轉換為View和把圖片轉換為ViewView
- Java中將XML轉換為PDF的兩種辦法JavaXML
- JSP結合XML XSLT將輸出轉換HTML（轉）JSXMLHTML
- Swift3.0語言教程字串轉換為數字值Swift字串
- 使用 Orator 將你的 SQL 轉換為 Laravel Query 語句SQLLaravel
- unix時間轉換為datetimedatetime轉換為unixtime
- MarkDown語法教程(轉)
- jsp換皮膚JS
- SAP OTR語言轉換R語言
- js日期轉換工具類（仿oracle to_char，to_date等語法）JSOracle
- 語法糖甜不甜？巧用列舉實現“狀態”轉換限制
- JS實現將文字轉換為語音並自動播放JS
- JS的語句及語法(轉)JS
- 在linux shell下將漢字轉換為url編碼的辦法(轉)Linux
- 轉換RM為MP3(轉)
- 在Jsp/Servlet中的中文解決辦法 (轉)JSServlet
- swift 3.0：as語法與強制型別轉換的一些理解Swift型別
- kotlin 由淺入深（五）基本語法（空安全、轉換、區間）Kotlin
- 轉換成為整數