前端页面展示MySQL数据并实现前后端互动-优快云博客

本文链接：https://blog.youkuaiyun.com/aaronthon/article/details/86694059

前端页面展示MySQL数据并实现前后端互动

前端页面使用H-ui框架后端使用flask框架数据库使用mysql 连接数据库通过pymysql实现

前端代码如下

<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>风险预警系统</title>
    <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="../static/ui/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/out.css"/>
    <style>
        .hide {
      
            display: none;
        }
    </style>
    <script type="text/javascript">
        var region = {
            "反洗钱":
                {
                    "": [""],
                    "黑名单": ["", "黑名单一致性", "黑名单实时监控"],

                    "客户风险等级": ["", "首次评估", "定期评估", "客户风险等级唯一性", ""],

                    "可疑交易": ["", "可疑交易定性意见留痕", "可疑交易上报及时性"],
                    "法人客户": ["", "身份要素信息完整性"],
                    "个人客户": ["", "身份证件有效期"]
                },
            "财务":
                {
                    "": [""],
                    "赔付差异": ["", "财务支付金额与业务金额不一致", "核赔不通过，财务表显示已支付成功", "财务表显示已支付，理赔端无对应数据", "理赔业务表中未包含公估费", "财务支出时间比理赔业务表时间提前", "理赔主表中的总支付金额小于理赔业务表中的总支付金额"]

                }
        }

    </script>
</head>
<body>
<nav class="breadcrumb"><i id="logo"></i> <a