html和flask进行交互，使用json进行增删显示

*Major*

已于 2023-07-20 17:14:21 修改

阅读量209

点赞数

文章标签： html flask 交互

于 2023-07-20 17:08:19 首次发布

本文链接：https://blog.csdn.net/qq_41375318/article/details/131835239

版权

这是一个使用Flask框架构建的Web应用，用户可以上传模型文件，填写相关信息并提交。应用会将提交的信息存储到JSON文件中。同时，页面上展示已注册的模型列表，用户可以选择模型进行删除操作，删除前会有确认提示。

摘要由CSDN通过智能技术生成

当"type": "submit"时，此时意味着这个按钮是可以触发表单提交行为；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<!--分界线-->
<hr/>
<p>上传模型</p>

<form action="/uploadForm" enctype="multipart/form-data" method="post">
    <table>
        <tbody>
           <tr>
               <td>算法类型：</td>
               <td><input type="text" name="algoCategory"></td>
           </tr>
           <tr>
               <td>任务类型：</td>
               <td><input type="text" name="task"></td>
           </tr>

           <tr>
               <td>模型文件：</td>
               <td><input type="file" name="model"></td>
           </tr>

           <tr>
               <td>提交：</td>
               <td><input type="submit" name="提交"></td>
           </tr>
        </tbody>
    </table>

</form>
<!--分界线-->
<hr/>

<p>已注册模型列表</p>


<table>
    <tbody>
        <tr>
           <td>唯一ID</td>
           <td>任务类型</td>
           <td>算法类型</td>
           <td>模型文件</td>
       </tr>
        {% for item in content %}
          <tr>
              <form action="/deleteModel"  method="post" onSubmit="return confirm('确认删除吗？')">
              <td><input type="text" name="uuid" value={{item}}></td>
              <td><input type="text" name="algoCategory" value={{content[item]["algoCategory"]}}></td>
              <td><input type="text" name="task" value={{content[item]["task"]}}></td>
              <td><input type="text" name="ModelName" value={{content[item]["ModelName"]}}></td>
              <td><input type="submit" name="del" value="删除"></td>
              </form>
           </tr>
        {% endfor %}

    </tbody>
</table>



</body>
</html>

在这里插入图片描述

Flask

from flask import Flask, request,url_for,render_template
import os
from JsonHelper import jsonHelper
import uuid

app = Flask(__name__)
app.config.from_pyfile('config.py')

# 添加功能
# 1.初始化模型
# 2.测试模型是否可用
# 3.显示已添加模型

@app.route('/')
def index():
    jsonres = jsonHelper.read(r"./modelData.json")
    return render_template('index.html',content=jsonres)


@app.route("/uploadForm",methods=['GET','POST'])
def uploadForm():
    algoCategory = request.form.get("algoCategory")
    task = request.form.get("task")
    model = request.files.get("model")
    model.save(os.path.join("AI_Model_Zoo",model.filename))
    print("algoCategory",algoCategory,"task",task)
    # 根据 时间戳生成 uuid , 保证全球唯一
    jsonHelper.update(str(uuid.uuid1()),
                      {"algoCategory":algoCategory,
                                    "task":task,
                                    "ModelName": model.filename
                                    },
                      r"./modelData.json")

    jsonres = jsonHelper.read(r"./modelData.json")
    for item in jsonres:
        print(item)
    return render_template('index.html',content=jsonres)



@app.route("/deleteModel",methods=['GET','POST'])
def deleteModel():
    uuid = request.form.get("uuid")
    jsonres = jsonHelper.delete(uuid,r"./modelData.json")
    return render_template('index.html',content=jsonres)




if __name__ == '__main__':
    app.run()

import json
import os

class JsonHelper:
    '''
    更新
    '''
    def update(self,key,data,data_path):
        # 如果json文件不存在，则创建
        if not os.path.exists(data_path):
            with open(data_path, 'w') as f:
                json.dump({"test":""}, f)
        # 更新数据
        with open(data_path, encoding='utf-8-sig', errors='ignore') as file:
            content = json.load(file)
            if key in content:
                content[key].update(data)
            else:
                content[key] = data
            # 保存数据
            with open(data_path, 'w') as f:
                json.dump(content, f, indent=2)

    '''
    读取
    '''
    def read(self,data_path):
        with open(data_path, encoding='utf-8-sig', errors='ignore') as file:
            content = json.load(file)
        return content


    '''
    删除
    '''
    def delete(self,key,data_path):
        with open(data_path, encoding='utf-8-sig', errors='ignore') as file:
            content = json.load(file)
            del content[key]
        # 保存数据
        with open(data_path, 'w') as f:
            json.dump(content, f, indent=2)

        return content


jsonHelper = JsonHelper()

if __name__ == '__main__':
    jsonHelper = JsonHelper()
    # jsonHelper.write({"tetset":1231})
    print("写入json")
    jsonHelper.data_path = r"../assets/data.json"
    print(jsonHelper.read())
    test= jsonHelper.read()
    print(test["data"])