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

前端代码如下

  1. <html lang="en">
  2. <head>
  3.  
  4.     <meta charset="utf-8">
  5.     <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport"
  8.           content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  9.     <meta http-equiv="Cache-Control" content="no-siteapp"/>
  10.     <title>风险预警系统</title>
  11.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui/css/H-ui.min.css"/>
  12.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/css/H-ui.admin.css"/>
  13.     <link rel="stylesheet" type="text/css" href="../static/ui/lib/Hui-iconfont/1.0.8/iconfont.css"/>
  14.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/skin/default/skin.css" id="skin"/>
  15.     <link rel="stylesheet" type="text/css" href="../static/ui/static/h-ui.admin/css/style.css"/>
  16.     <link rel="stylesheet" type="text/css" href="../static/css/out.css"/>
  17.     <style>
  18.         .hide {
  19.             display: none;
  20.         }
  21.     </style>
  22.     <script type="text/javascript">
  23.         var region = {
  24.             "反洗钱":
  25.                 {
  26.                     "": [""],
  27.                     "黑名单": ["", "黑名单一致性", "黑名单实时监控"],
  28.  
  29.                     "客户风险等级": ["", "首次评估", "定期评估", "客户风险等级唯一性", ""],
  30.  
  31.                     "可疑交易": ["", "可疑交易定性意见留痕", "可疑交易上报及时性"],
  32.                     "法人客户": ["", "身份要素信息完整性"],
  33.                     "个人客户": ["", "身份证件有效期"]
  34.                 },
  35.             "财务":
  36.                 {
  37.                     "": [""],
  38.                     "赔付差异": ["", "财务支付金额与业务金额不一致", "核赔不通过，财务表显示已支付成功", "财务表显示已支付，理赔端无对应数据", "理赔业务表中未包含公估费", "财务支出时间比理赔业务表时间提前", "理赔主表中的总支付金额小于理赔业务表中的总支付金额"]
  39.  
  40.                 }
  41.         }
  42.  
  43.     </script>
  44. </head>
  45. <body>
  46. <nav class="breadcrumb"><i id="logo"></i> <a class="btn btn-success radius r"
  47.                                              style="line-height:1.6em;margin-top:3px"
  48.                                              href="javascript:location.replace(location.href);"
  49.                                              title="刷新"><i
  50.         class="Hui-iconfont"></i></a></nav>
  51.  
  52. <div class="page-container">
  53.  
  54.     <div class="text-c">
  55.  
  56.         <select id="province" onchange="change(this.value);" class="select-box" style="width:200px;">
  57.             <option>请选择一级指标</option>
  58.         </select>
  59.  
  60.         <select id="city" onchange="countyChange(this.value);" class="select-box" style="width:200px;">
  61.             <option>请选择二级指标</option>
  62.         </select>
  63.  
  64.         <select id="county" class="select-box" style="width:200px;">
  65.             <option>请选择三级指标</option>
  66.         </select>
  67.  
  68.         <span>&nbsp;&nbsp;&nbsp;查询数据范围</span>
  69.         <input type="text"
  70.                onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}',dateFmt:'yyyy-MM-dd',isShowToday:false,isShowClear:false })"
  71.                id="datemin"
  72.                class="input-text Wdate" style="width:300px;">
  73.         -
  74.         <input type="text"
  75.                onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',isShowToday:false,isShowClear:false })"
  76.                id="datemax"
  77.                class="input-text Wdate" style="width:300px;">
  78.  
  79.         <button type="button" class="btn btn-success radius" id="tijiao" name=""><i class="Hui-iconfont"></i> 搜索
  80.         </button>
  81.  
  82.     </div>
  83.  
  84.     <div class="mt-20">
  85.         <table class="table table-border table-bordered table-hover table-bg thisTable">
  86.             <thead>
  87.             <tr class="text-c">
  88.                 <th>序号</th>
  89.                 <th>指标名称</th>
  90.                 <th>指标日期</th>
  91.                 <th>监控状态</th>
  92.                 <th>下载</th>
  93.             </tr>
  94.             </thead>
  95.  
  96.             <tbody id="tbody" class="text-c">
  97.  
  98.             </tbody>
  99.         </table>
  100.  
  101.         <div id="page1" class="r pager" style="margin-top: 10px"></div>
  102.         <div style="font-size: 18px; font-family: 宋体; margin-top: 5px">监控状态：1--预警  0--正常</div>
  103.     </div>
  104. </div>
  105.  
  106. <!--_footer-->
  107. <script type="text/javascript" src="../static/ui/lib/jquery/1.9.1/jquery.min.js"></script>
  108. <script type="text/javascript" src="../static/ui/lib/layer/2.4/layer.js"></script>
  109. <script type="text/javascript" src="../static/ui/static/h-ui/js/H-ui.min.js"></script>
  110. <script type="text/javascript" src="../static/ui/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer-->
  111. <script src='../static/js/threelevellinkpage.js'></script>
  112. <!--业务代码-->
  113. <script type="text/javascript" src="../static/ui/lib/My97DatePicker/4.8/WdatePicker.js"></script>
  114. <script type="text/javascript" src="../static/ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
  115. <script type="text/javascript" src="../static/ui/lib/laypage/1.2/laypage.js"></script>
  116. <script type="text/javascript">
  117.  
  118.     $(function () {
  119.         $('#DataTables_Table_0_length').hide();
  120.         $('#DataTables_Table_0_filter').hide();
  121.         $('#DataTables_Table_0_previous').hide();
  122.         $('#DataTables_Table_0_next').hide();
  123.         $('#DataTables_Table_0_info').hide();
  124.         core.getUserListByPage();
  125.         $("#tijiao").click(function () {
  126.             var datemin = $("#datemin").val();
  127.             var datemax = $("#datemax").val();
  128.             var province = $("#province").val();
  129.             var city = $("#city").val();
  130.             var county = $("#county").val();
  131.  
  132.             core.getUserListByPage(datemin, datemax, province, city, county);
  133.  
  134.         });
  135.  
  136.     });
  137.     var core = (function ($$) {
  138.         var getRootPath = function () {
  139.             var curWwwPath = window.document.location.href;
  140.             var pathName = window.document.location.pathname;
  141.             var pos = curWwwPath.indexOf(pathName);
  142.             var localhostPath = curWwwPath.substring(0, pos);
  143.             var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
  144.             return (localhostPath + projectName);
  145.         };
  146.         var getPage = function (url, config, content) {
  147.             $.getJSON(url, config, function (res) {
  148.                 $('#theme-count').html(res.totalPeo)
  149.                 laypage({
  150.                     cont: 'page1',
  151.                     pages: Math.ceil(res.total / config.pageSize),
  152.                     curr: config.page || 1,
  153.                     group: 10,
  154.                     skip: true,
  155.                     jump: function (obj, first) {
  156.                         if (!first) {
  157.                             config.page = obj.curr;
  158.                             getPage(url, config, content)
  159.                         }
  160.  
  161.                     }
  162.                 });
  163.                 $('tbody').html(content(res, config.page))
  164.             });
  165.         };
  166.  
  167.         function parseUserList(res, currPage) {
  168.             var content = "";
  169.             if (res.total > 0) {
  170.                 var i = 1;
  171.                 $.each(res.rows, function (i, o) {
  172.                     content += "<tr class=\"text-c\">";
  173.                     content += "<td width=\"10\" title='" + o.id + "'>" + o.curr_page + "</td>";
  174.                     content += "<td width=\"10\" title='" + o.target + "'>" + o.target + "</td>";
  175.                     content += "<td width=\"10\" title='" + o.monitor_date + "'>" + o.monitor_date + "</td>";
  176.                     content += "<td width=\"10\" title='" + o.monitir_status + "'>" + o.monitir_status + "</td>";
  177.                     {#content += "<td width=\"10\"" + "id='" +o.target+ o.monitor_date+ ".xls" + "'" + "title='" + o.monitor_dpwnload + "'>" + "<button type=\"button\" class=\"btn btn-secondary radius loadExcel\" id=\"loadExcel\" name=\"\" href=\"\"><i class=\"Hui-iconfont\"></i>导出EXCEL\n" + "</button>" + o.monitor_dpwnload + "</td>";#}
  178.                     content += "<td width=\"10\"" + "id='" + o.target + o.monitor_date + ".xls" + "'" + "title='" + o.monitor_dpwnload + "'>" + "<a href=\"http://127.0.0.1:5000/download_xls?code_n=" + o.monitor_dpwnload + "\"><button type=\"button\" class=\"btn btn-secondary radius loadExcel " + o.hide_h + "\" id=\"loadExcel\" ><i class=\"Hui-iconfont\"></i>导出EXCEL\n" + "</button></a>" + "</td>";
  179.  
  180.                     content += "</tr>";
  181.                 });
  182.                 $('.laypage_main ').show();
  183.                 return content;
  184.             } else {
  185.                 content += "<tr class='odd'>"
  186.                 content += "<td valign=\"top\" colspan=\"12\" class=\"dataTables_empty\">没有数据</td>"
  187.                 content += "</tr>"
  188.                 $('.laypage_main ').hide();
  189.                 return content;
  190.             }
  191.         }
  192.  
  193.         var getUserListByPage = function (datemin, datemax, province, city, county, curr) {
  194.             core.getPage(core.getRootPath() + '/log_mysql_data?', {
  195.                 page: curr || 1,
  196.                 pageSize: 10,
  197.                 datemin: datemin,
  198.                 datemax: datemax,
  199.                 province: province,
  200.                 city: city,
  201.                 county: county,
  202.             }, parseUserList);
  203.         };
  204.  
  205.         return {
  206.             getRootPath: getRootPath,
  207.             getPage: getPage,
  208.             getUserListByPage: getUserListByPage
  209.         }
  210.     })(jQuery);
  211.  
  212. </script>
  213.  
  214. </body>
  215. </html>

后端代码

  1. # 获取mysql存的日志信息
  2. @BLACKLIST_blu.route('/log_mysql_data', methods=["GET"])
  3. def Log_mysql():
  4.     # code = '1________'
  5.     start_date = request.args.get("datemin", None)
  6.     end_date = request.args.get("datemax", None)
  7.     # 编码
  8.     province = request.args.get("province", None)
  9.     city = request.args.get("city", None)
  10.     county = request.args.get("county", None)
  11.     # print(county, 'county')
  12.     # 编码
  13.     code = targetcode(province, city, county)
  14.     # print(code, 'code')
  15.  
  16.     if start_date is None:
  17.         start_date = '1970-01-01'
  18.     if end_date is None:
  19.         end_date = '9999-12-31'
  20.     if start_date is '':
  21.         start_date = '1970-01-01'
  22.     if end_date is '':
  23.         end_date = '9999-12-31'
  24.     curr = int(request.args.get("page"))
  25.     pageSize = int(request.args.get("pageSize"))
  26.     curr = (curr - 1) * pageSize
  27.     sql = "SELECT * FROM inner_factors_summary_display where " + "'" + str(
  28.         start_date) + "' <= FactorsDate and FactorsDate <= " + "'" + str(
  29.         end_date) + "'" + " and ThirdFactorCode like '" + str(code) + "'" + " limit " + str(
  30.         pageSize) + " offset " + str(curr) + " ;"
  31.     # print(sql, 'sql')
  32.     cc = bd_db.cursor()
  33.     cn_list = []
  34.  
  35.     # count = "select count(id) from inner_factors_summary_display"
  36.     count = "SELECT count(id) FROM inner_factors_summary_display where " + "'" + str(
  37.         start_date) + "' <= FactorsDate and FactorsDate <= " + "'" + str(
  38.         end_date) + "'" + " and ThirdFactorCode like '" + str(code) + "'"
  39.     # cc.execute(sql, {"datemin": start_date, "datemax": end_date, "pageSize": pageSize, "curr": curr})
  40.     cc.execute(sql)
  41.     content = cc.fetchall()
  42.     n = 0
  43.     for i in content:
  44.         n += 1
  45.         # print(i,"i")
  46.         if i[4] == '1':
  47.             hide = ''
  48.         else:
  49.             hide = 'hide'
  50.         curr_page = curr + n
  51.         cn_list.append(
  52.  
  53.             {'id': i[0], 'target': i[1], 'monitor_date': i[2], 'monitir_status': i[4], 'monitor_dpwnload': i[7],
  54.              'hide_h': hide, 'curr_page': curr_page})
  55.  
  56.     cc.execute(count)
  57.     count1 = cc.fetchall()[0][0]
  58.     data = {"rows": cn_list, "total": count1}
  59.  
  60.     return json.dumps(data)
  61.  
  62. # 获取前端页面  风险预警系统
  63. @BLACKLIST_blu.route('/earlywarningsystem', methods=["GET", "POST"])
  64. def Narlywarningsystem():
  65.     if request.method == "GET":
  66.         return render_template('translate.html')

给个编码代码

  1. from inner_ctrl01.common.utils import bd_db
  2.  
  3. def targetcode(province, city, county):
  4.     province_code = None
  5.     city_code = None
  6.     county_code = None
  7.     code_str = "_________"
  8.  
  9.     if province == '请选择一级指标' or province == None:
  10.         province_code = '___'
  11.     else:
  12.         if province == '':
  13.             province_code = "___"
  14.         if province != "" and province != None:
  15.             sql = "SELECT FactorsCode FROM inner_frist_level_factors where FactorsCName = " + "'" + str(province) + "'"
  16.             cc = bd_db.cursor()
  17.             cc.execute(sql)
  18.             content = cc.fetchall()
  19.             province_code = str(content[0][0])
  20.  
  21.     if city == '请选择二级指标'or city == None:
  22.         city_code = '___'
  23.     else:
  24.         if city == '':
  25.             city_code = '___'
  26.         if city != '' and city != None:
  27.             sql = "SELECT FactorsCode FROM inner_second_level_factors where FactorsCName = " + "'" + str(city) + "';"
  28.             cc = bd_db.cursor()
  29.             cc.execute(sql)
  30.             content = cc.fetchall()
  31.             province_code = ''
  32.             city_code = str(content[0][0])
  33.  
  34.     if county == '请选择三级指标' or county == None:
  35.         county_code = '___'
  36.     else:
  37.         if county == '':
  38.             county_code = '___'
  39.         if county != "" and county != None:
  40.             sql = "SELECT FactorsCode FROM inner_third_level_factors where FactorsCName = " + "'" + str(county) + "';"
  41.             cc = bd_db.cursor()
  42.             cc.execute(sql)
  43.             content = cc.fetchall()
  44.             province_code = ''
  45.             city_code = ''
  46.             county_code = str(content[0][0])
  47.  
  48.     if province == None:
  49.         province_code = "___"
  50.         city_code = "___"
  51.         county_code = "___"
  52.  
  53.     code_str = str(province_code) + str(city_code) + str(county_code)
  54.  
  55.     return code_str

数据库结构

  1. # inner_frist_level_factors
  2. id 自增 主键 不能为空
  3. FactorsCname varchar
  4. FactorsCode  varchar null unique
  1. # inner_second_level_factors
  2. id 自增 主键 不能为空
  3. FactorsCname varchar
  4. FactorsCode  varchar null unique
  5. FatherCode varchar null 
  1. # inner_third_level_factors
  2. id 自增 主键 不能为空
  3. FactorsCname varchar
  4. FactorsCode  varchar null unique
    FatherCode varchar null
    FactorsEname varchar
  1. # inner_factors_summary_display
    FactorsCname varchar
    FactorsDate varchar
    FactorsStatus varchar
    FactorsFlag varchar
    thirdFactorsCode varchar
    FactorsDownloadUrl varchar
    FactorsEname varchar

以上四张表可以根据自己需求设计。我们将第四张表的数据传到前端页面。

其他部门在前几篇博客里面。

本篇博客不适合新人，结束！

前端页面展示MySQL数据并实现前后端互动的更多相关文章

  1. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

  2. Saiku控制页面展示的数据过长自动换行(二十四)

    Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...

  3. 【FAQ】分析服务导出的事件数据和概览页面展示的数据不一致该如何解决？

    华为分析服务面向开发者提供两种数据展现方式:(1)事件数据下载,开发者可以将事件数据下载后导入到自有的分析系统中:(2)直接在AGC概览页面查看用户数和事件数. 问题描述 某开发者想将事件数据导入到自 ...

  4. vue+mockjs 模拟数据，实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  5. Python Django CMDB项目实战之-2创建APP、建模（models.py）、数据库同步、高级URL、前端页面展示数据库中数据

    基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...

  6. ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

    ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...

  7. 在前端页面展示Markdown文件

    常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢? 有别于G ...

  8. django--如何将数据结果集序列化传给前端页面展示

    示例为一对多的表关系,学生为多,老师为一,设置外键字段可以为空,也就是说关联的老师被删除该学生依然存在,只是相应字段留空 class Teacher(models.Model): name = mod ...

  9. servlet自动获取前端页面提交数据

    servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...

随机推荐

  1. GMA Round 1 相交

    传送门 相交 在实数范围内,设抛物线$C_1:y^2=2x$,双曲线:$C_2:\frac{y^2}{b^2}-\frac{x^2}{a^2}=1$(a,b为参数). 假如a和b都在(0,16)这个区 ...

  2. pygame-KidsCanCode系列jumpy-part10-角色动画(上)

    上一节学习如何利用spritesheet加载图片,但是player仍然是一张静态的图片,比较枯燥,我们要让它动起来! Player类,先把各种状态的图片加载起来: # 加载各种状态的图片序列 def ...

  3. Dockerfile的 RUN和CMD

    在创建Dockerfile的时候,RUN和CMD都是很重要的命令.它们各自的作用分别如下: RUNRUN命令是创建Docker镜像(image)的步骤,RUN命令对Docker容器( containe ...

  4. 将 Smart 构件发布到 Maven 中央仓库

    https://my.oschina.net/huangyong/blog/226738

  5. 卷积神经网络(CNN)代码实现(MNIST)解析

    在http://blog.csdn.net/fengbingchun/article/details/50814710中给出了CNN的简单实现,这里对每一步的实现作个说明: 共7层:依次为输入层.C1 ...

  6. angularjs自定义filter

    angular.Module API Overview Methods info([info]); provider(name, providerType); factory(name, provid ...

  7. curl 模拟表单post文件

    网上查询出来的几乎都是错误的,正确的应该是: $data = array( 'pic'=>new CURLFile($path) // 如果无效可以这样 // 'pic'=>curl_fi ...

  8. APP微信支付Java后台的实现（springmvc）

    第一次做微信支付,阅读完开发文档后,下了个官方demo,摸索了好久,期间也出现了好多问题,终于是实现生成预支付订单以及支付成功后接收微信服务器通知,不多说了,直接上代码: 一.工具类 Constant ...

  9. XSS跨站脚本小结（转）

    原文链接:http://www.cnblogs.com/xiaozi/p/5588099.html#undefined XSS漏洞验证经常遇到一些过滤,如何进行有效验证和绕过过滤呢,这里小结一下常见的 ...

  10. Gorm使用详解

    1.什么是Gorm go语言编写的orm框架 特点: 1)全功能ORM 2)关联(包含一个,包含多个,属于,多对多) 3)Callbacks(创建/保存/更新/删除/查找前后回调) 4)预加载 5)事 ...