Magic-API输出HTML

cai yinting

于 2024-08-20 10:27:21 发布

阅读量212

点赞数 7

文章标签： html 前端低代码

本文链接：https://blog.csdn.net/weixin_43966292/article/details/141349912

版权

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

展现效果