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

时间:2023-03-09 20:17:00
前端页面展示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>&nbsp;&nbsp;&nbsp;查询数据范围</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\n" + "</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\n" + "</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

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

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

本篇博客不适合新人,结束!