前端页面展示MySQL数据并实现前后端互动
Posted aaronthon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端页面展示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 class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a></nav> <div class="page-container"> <div class="text-c"> <select id="province" onchange="change(this.value);" class="select-box" style="width:200px;"> <option>请选择一级指标</option> </select> <select id="city" onchange="countyChange(this.value);" class="select-box" style="width:200px;"> <option>请选择二级指标</option> </select> <select id="county" class="select-box" style="width:200px;"> <option>请选择三级指标</option> </select> <span> 查询数据范围</span> <input type="text" onfocus="WdatePicker({ maxDate:‘#F{$dp.$D(‘datemax‘)||‘%y-%M-%d‘}‘,dateFmt:‘yyyy-MM-dd‘,isShowToday:false,isShowClear:false })" id="datemin" class="input-text Wdate" style="width:300px;"> - <input type="text" onfocus="WdatePicker({ minDate:‘#F{$dp.$D(‘datemin‘)}‘,maxDate:‘%y-%M-%d‘,dateFmt:‘yyyy-MM-dd‘,isShowToday:false,isShowClear:false })" id="datemax" class="input-text Wdate" style="width:300px;"> <button type="button" class="btn btn-success radius" id="tijiao" name=""><i class="Hui-iconfont"></i> 搜索 </button> </div> <div class="mt-20"> <table class="table table-border table-bordered table-hover table-bg thisTable"> <thead> <tr class="text-c"> <th>序号</th> <th>指标名称</th> <th>指标日期</th> <th>监控状态</th> <th>下载</th> </tr> </thead> <tbody id="tbody" class="text-c"> </tbody> </table> <div id="page1" class="r pager" style="margin-top: 10px"></div> <div style="font-size: 18px; font-family: 宋体; margin-top: 5px">监控状态：1--预警 0--正常</div> </div> </div> <!--_footer--> <script type="text/javascript" src="../static/ui/lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="../static/ui/lib/layer/2.4/layer.js"></script> <script type="text/javascript" src="../static/ui/static/h-ui/js/H-ui.min.js"></script> <script type="text/javascript" src="../static/ui/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer--> <script src=‘../static/js/threelevellinkpage.js‘></script> <!--业务代码--> <script type="text/javascript" src="../static/ui/lib/My97DatePicker/4.8/WdatePicker.js"></script> <script type="text/javascript" src="../static/ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> <script type="text/javascript" src="../static/ui/lib/laypage/1.2/laypage.js"></script> <script type="text/javascript"> $(function () { $(‘#DataTables_Table_0_length‘).hide(); $(‘#DataTables_Table_0_filter‘).hide(); $(‘#DataTables_Table_0_previous‘).hide(); $(‘#DataTables_Table_0_next‘).hide(); $(‘#DataTables_Table_0_info‘).hide(); core.getUserListByPage(); $("#tijiao").click(function () { var datemin = $("#datemin").val(); var datemax = $("#datemax").val(); var province = $("#province").val(); var city = $("#city").val(); var county = $("#county").val(); core.getUserListByPage(datemin, datemax, province, city, county); }); }); var core = (function ($$) { var getRootPath = function () { var curWwwPath = window.document.location.href; var pathName = window.document.location.pathname; var pos = curWwwPath.indexOf(pathName); var localhostPath = curWwwPath.substring(0, pos); var projectName = pathName.substring(0, pathName.substr(1).indexOf(‘/‘) + 1); return (localhostPath + projectName); }; var getPage = function (url, config, content) { $.getJSON(url, config, function (res) { $(‘#theme-count‘).html(res.totalPeo) laypage({ cont: ‘page1‘, pages: Math.ceil(res.total / config.pageSize), curr: config.page || 1, group: 10, skip: true, jump: function (obj, first) { if (!first) { config.page = obj.curr; getPage(url, config, content) } } }); $(‘tbody‘).html(content(res, config.page)) }); }; function parseUserList(res, currPage) { var content = ""; if (res.total > 0) { var i = 1; $.each(res.rows, function (i, o) { content += "<tr class="text-c">"; content += "<td width="10" title=‘" + o.id + "‘>" + o.curr_page + "</td>"; content += "<td width="10" title=‘" + o.target + "‘>" + o.target + "</td>"; content += "<td width="10" title=‘" + o.monitor_date + "‘>" + o.monitor_date + "</td>"; content += "<td width="10" title=‘" + o.monitir_status + "‘>" + o.monitir_status + "</td>"; {#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 " + "</button>" + o.monitor_dpwnload + "</td>";#} 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 " + "</button></a>" + "</td>"; content += "</tr>"; }); $(‘.laypage_main ‘).show(); return content; } else { content += "<tr class=‘odd‘>" content += "<td valign="top" colspan="12" class="dataTables_empty">没有数据</td>" content += "</tr>" $(‘.laypage_main ‘).hide(); return content; } } var getUserListByPage = function (datemin, datemax, province, city, county, curr) { core.getPage(core.getRootPath() + ‘/log_mysql_data?‘, { page: curr || 1, pageSize: 10, datemin: datemin, datemax: datemax, province: province, city: city, county: county, }, parseUserList); }; return { getRootPath: getRootPath, getPage: getPage, getUserListByPage: getUserListByPage } })(jQuery); </script> </body> </html>
后端代码
# 获取mysql存的日志信息 @BLACKLIST_blu.route(‘/log_mysql_data‘, methods=["GET"]) def Log_mysql(): # code = ‘1________‘ start_date = request.args.get("datemin", None) end_date = request.args.get("datemax", None) # 编码 province = request.args.get("province", None) city = request.args.get("city", None) county = request.args.get("county", None) # print(county, ‘county‘) # 编码 code = targetcode(province, city, county) # print(code, ‘code‘) if start_date is None: start_date = ‘1970-01-01‘ if end_date is None: end_date = ‘9999-12-31‘ if start_date is ‘‘: start_date = ‘1970-01-01‘ if end_date is ‘‘: end_date = ‘9999-12-31‘ curr = int(request.args.get("page")) pageSize = int(request.args.get("pageSize")) curr = (curr - 1) * pageSize sql = "SELECT * FROM inner_factors_summary_display where " + "‘" + str( start_date) + "‘ <= FactorsDate and FactorsDate <= " + "‘" + str( end_date) + "‘" + " and ThirdFactorCode like ‘" + str(code) + "‘" + " limit " + str( pageSize) + " offset " + str(curr) + " ;" # print(sql, ‘sql‘) cc = bd_db.cursor() cn_list = [] # count = "select count(id) from inner_factors_summary_display" count = "SELECT count(id) FROM inner_factors_summary_display where " + "‘" + str( start_date) + "‘ <= FactorsDate and FactorsDate <= " + "‘" + str( end_date) + "‘" + " and ThirdFactorCode like ‘" + str(code) + "‘" # cc.execute(sql, {"datemin": start_date, "datemax": end_date, "pageSize": pageSize, "curr": curr}) cc.execute(sql) content = cc.fetchall() n = 0 for i in content: n += 1 # print(i,"i") if i[4] == ‘1‘: hide = ‘‘ else: hide = ‘hide‘ curr_page = curr + n cn_list.append( {‘id‘: i[0], ‘target‘: i[1], ‘monitor_date‘: i[2], ‘monitir_status‘: i[4], ‘monitor_dpwnload‘: i[7], ‘hide_h‘: hide, ‘curr_page‘: curr_page}) cc.execute(count) count1 = cc.fetchall()[0][0] data = {"rows": cn_list, "total": count1} return json.dumps(data) # 获取前端页面 风险预警系统 @BLACKLIST_blu.route(‘/earlywarningsystem‘, methods=["GET", "POST"]) def Narlywarningsystem(): if request.method == "GET": return render_template(‘translate.html‘)
给个编码代码
from inner_ctrl01.common.utils import bd_db def targetcode(province, city, county): province_code = None city_code = None county_code = None code_str = "_________" if province == ‘请选择一级指标‘ or province == None: province_code = ‘___‘ else: if province == ‘‘: province_code = "___" if province != "" and province != None: sql = "SELECT FactorsCode FROM inner_frist_level_factors where FactorsCName = " + "‘" + str(province) + "‘" cc = bd_db.cursor() cc.execute(sql) content = cc.fetchall() province_code = str(content[0][0]) if city == ‘请选择二级指标‘or city == None: city_code = ‘___‘ else: if city == ‘‘: city_code = ‘___‘ if city != ‘‘ and city != None: sql = "SELECT FactorsCode FROM inner_second_level_factors where FactorsCName = " + "‘" + str(city) + "‘;" cc = bd_db.cursor() cc.execute(sql) content = cc.fetchall() province_code = ‘‘ city_code = str(content[0][0]) if county == ‘请选择三级指标‘ or county == None: county_code = ‘___‘ else: if county == ‘‘: county_code = ‘___‘ if county != "" and county != None: sql = "SELECT FactorsCode FROM inner_third_level_factors where FactorsCName = " + "‘" + str(county) + "‘;" cc = bd_db.cursor() cc.execute(sql) content = cc.fetchall() province_code = ‘‘ city_code = ‘‘ county_code = str(content[0][0]) if province == None: province_code = "___" city_code = "___" county_code = "___" code_str = str(province_code) + str(city_code) + str(county_code) return code_str
数据库结构
# inner_frist_level_factors id 自增 主键 不能为空 FactorsCname varchar FactorsCode varchar null unique
# inner_second_level_factors id 自增 主键 不能为空 FactorsCname varchar FactorsCode varchar null unique FatherCode varchar null
# inner_third_level_factors id 自增 主键 不能为空 FactorsCname varchar FactorsCode varchar null unique
FatherCode varchar null
FactorsEname varchar
# inner_factors_summary_display
FactorsCname varchar
FactorsDate varchar
FactorsStatus varchar
FactorsFlag varchar
thirdFactorsCode varchar
FactorsDownloadUrl varchar
FactorsEname varchar
以上四张表可以根据自己需求设计。我们将第四张表的数据传到前端页面。
其他部门在前几篇博客里面。
本篇博客不适合新人，结束！
以上是关于前端页面展示MySQL数据并实现前后端互动的主要内容，如果未能解决你的问题，请参考以下文章