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>