Python中如何使用Tornado搭建服务并快速用前端框架展示JSON接口数据？

渲染模板，填充到前端

核心思路：用Tornado搭建JSON API，前端用任意框架（这里以原生Fetch为例）调用并展示数据。

1. 后端Tornado服务（server.py）：

import tornado.ioloop
import tornado.web
import json

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # 模拟JSON数据
        data = {
            "status": "success",
            "users": [
                {"id": 1, "name": "张三", "role": "开发"},
                {"id": 2, "name": "李四", "role": "测试"}
            ]
        }
        self.set_header("Content-Type", "application/json")
        self.write(json.dumps(data, ensure_ascii=False))

def make_app():
    return tornado.web.Application([
        (r"/api/data", MainHandler),
    ])

if __name__ == "__main__":
    app = make_app()
    app.listen(8888)
    print("Tornado服务已启动：http://localhost:8888/api/data")
    tornado.ioloop.IOLoop.current().start()

2. 前端展示页面（index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>Tornado数据展示</title>
    <style>
        table { border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ccc; padding: 8px; }
    </style>
</head>
<body>
    <h2>用户数据展示</h2>
    <button onclick="loadData()">加载数据</button>
    <div id="result"></div>

    <script>
        async function loadData() {
            try {
                const response = await fetch('http://localhost:8888/api/data');
                const result = await response.json();
                
                if (result.status === 'success') {
                    let table = `<table>
                        <tr><th>ID</th><th>姓名</th><th>角色</th></tr>`;
                    result.users.forEach(user => {
                        table += `<tr>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.role}</td>
                        </tr>`;
                    });
                    table += '</table>';
                    document.getElementById('result').innerHTML = table;
                }
            } catch (error) {
                document.getElementById('result').innerHTML = 
                    `<p style="color:red">请求失败：${error}</p>`;
            }
        }
    </script>
</body>
</html>

操作步骤：