1.需求背景
通过Magic-Api前端查询,可以返回Json数据,但是有时候为了方便不查看,需要表格显示展现,所以基于Magic-API开发一个类似与SQL查询的界面,方便平时查看数据。
2.实现
2.1 定义函数:/sys/outHtml
功能:把html展示表格在返回结果
参数:
代码:
import response;
response.setHeader("Content-Type","text/html;charset=utf-8");
var out = response.getOutputStream();
out.write(data.getBytes());
return response.end()
2.2 定义函数:/sys/HtmlFormat
功能:把数据格式化成Html格式
参数:
代码:
import log
var tabHeader = "<tr> \n"
for(key,value in resData[0]){
log.info("key={} value={}",key,value)
tabHeader = tabHeader + "<th>"+key+"</th>\n"
}
tabHeader = tabHeader + "</tr>\n"
//log.info("tabHeader={}",tabHeader)
var tabBody = ""
resData.forEach(d=>{
var trBody = "<tr>\n"
for(key,value in d){
trBody = trBody + "<td>"+value+"</td>\n"
}
trBody = trBody + "</tr>\n"
tabBody = tabBody + trBody
})
//log.info("tabBody={}",tabBody)
var data = """
<html>
<style>
table {
border-collapse: collapse; /* 表格边框合并 */
width: 50%; /* 表格宽度 */
font-size: 14px; /* 表格字体大小 */
}
th, td {
border: 1px solid #ccc; /* 单元格边框 */
padding: 10px; /* 单元格内边距 */
text-align:center; /* 水平居中 */
}
tr:nth-child(2n) {
background-color: #f2f2f2; /* 偶数行背景色 */
}
th {
background-color: #e0e0e0; /* 表头背景色 */
font-weight:bold; /* 表头加粗 */
}
</style>
<body>
<table border="1">
<thead>
"""+tabHeader+"""
</thead>
<tbody>
""" + tabBody + """
</tbody>
</table>
<br/>
<br/>
</body>
</html>
"""
return data
2.3 调用
代码
import log
import '@/sys/outHtml' as outHtml;
import '@/sys/HtmlFormat' as HtmlFormat;
var sql = """
select id,name
from sztest.union_org
"""
var resData = db.page(sql)
var data = HtmlFormat(resData.list);
return outHtml(data)
sql 变量中 可以自由书写SQL
展现效果
可以扩展成多数据源查询