如何将已开发的Flask REST API与HTML页面连接并实现数据交互展示

1. 调整项目结构与路由配置 #

Flask默认从项目根目录的templates文件夹读取HTML模板，首先调整项目结构：

• 项目根目录新增templates文件夹，存放HTML页面
• 可选新增static文件夹，存放CSS、JS等静态资源
  调整后的结构参考：

项目根目录/
├── app.py
├── templates/
│   └── index.html
├── static/
└── 原有文件（db.py、resources文件夹等）

在app.py的导入部分新增render_template，并加HTML页面返回路由：

# 原有导入部分新增
from flask import render_template

# 在api.add_resource代码块之前新增路由
@app.route('/')
def index():
    return render_template('index.html')

注意：你现有代码中redis配置的端口是5000，和Flask运行端口冲突，需要把redis的端口改为默认的6379，否则服务会启动失败

2. 前端调用API获取数据渲染 #

直接在HTML中用原生JS的fetch方法调用你已开发的API接口即可，公开接口可直接调用，需要鉴权的接口要在请求头中携带登录获取的JWT token。
无需鉴权的接口调用示例（获取商品列表），写在templates/index.html中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<body>
    <h1>在售商品</h1>
    <ul id="itemList"></ul>
    <script>
        // 调用你已写好的/items接口
        fetch('/items')
        .then(res => res.json())
        .then(data => {
            const listDom = document.getElementById('itemList')
            // 遍历数据渲染到页面
            data.items.forEach(item => {
                const li = document.createElement('li')
                li.innerText = `商品名：${item.name} | 价格：${item.price} | 所属店铺：${item.store_name}`
                listDom.appendChild(li)
            })
        })
        .catch(err => console.log('请求失败：', err))
    </script>
</body>
</html>

3. 需鉴权接口的调用方法 #

先调用/login接口拿到token，存在本地localStorage中，后续请求时携带在请求头即可：

// 登录获取token
fetch('/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: '测试账号',
        password: '测试密码'
    })
})
.then(res => res.json())
.then(data => {
    localStorage.setItem('access_token', data.access_token)
})

// 携带token请求需要鉴权的接口
fetch('/user/1', {
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('access_token')}`
    }
})
.then(res => res.json())
.then(data => console.log('用户信息：', data))

如果后续需要将前端部署在独立域名，可安装flask-cors包配置跨域规则，本地同端口调试不需要额外处理。

内容的提问来源于stack exchange，提问作者Himanshu