前端页面展示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\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
以上四张表可以根据自己需求设计。我们将第四张表的数据传到前端页面。
其他部门在前几篇博客里面。
本篇博客不适合新人，结束！
前端页面展示MySQL数据并实现前后端互动的更多相关文章
- base64编码后的pdf文件前端页面展示--pdf.js的应用
最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...
- Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...
- 【FAQ】分析服务导出的事件数据和概览页面展示的数据不一致该如何解决？
华为分析服务面向开发者提供两种数据展现方式:(1)事件数据下载,开发者可以将事件数据下载后导入到自有的分析系统中:(2)直接在AGC概览页面查看用户数和事件数. 问题描述 某开发者想将事件数据导入到自 ...
- vue+mockjs 模拟数据，实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- Python Django CMDB项目实战之-2创建APP、建模（models.py）、数据库同步、高级URL、前端页面展示数据库中数据
基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...
- ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...
- 在前端页面展示Markdown文件
常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢? 有别于G ...
- django--如何将数据结果集序列化传给前端页面展示
示例为一对多的表关系,学生为多,老师为一,设置外键字段可以为空,也就是说关联的老师被删除该学生依然存在,只是相应字段留空 class Teacher(models.Model): name = mod ...
- servlet自动获取前端页面提交数据
servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...
随机推荐
- 29、粘包现象（struct模块）
昨天我们所做的套接字是有漏洞的,它会出现粘包现象,没有发现这个问题的我们今天会进行演示.今天也会稍微讲解一下基于udp的套接字. 本篇导航: 基于udp的套接字 粘包现象 粘包 解决粘包方法 stru ...
- springboot + websocket + spring-messaging实现服务器向浏览器广播式
目录结构 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...
- 微信小程序WebSocket报错：Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received
Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was ...
- ffmpeg -i 10.wmv -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 C:\fm\074\10\10.m3u8
ffmpeg -i 10.wmv -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 C:\fm\074\10\1 ...
- 单片机成长之路（51基础篇） - 013 MCS－51单片机控制详解–T2MOD
T2CON:定时器控制寄存器 寄存器地址0C8H,位寻址0C8H-0CFH. 位地址 CF CE CD CC CB CA C9 C8 位符号 TF2 EXF2 RCLK TCLK EXEN2 TR2 ...
- SQL 数据库结构化查询语言
1.数据库 常见数据库 MySQL:开源免费的数据库,小型的数据库. Oracle:收费的大型数据库,Oracle 公司的产品 DB2:IBM 公司收费的数据库,常应用在银行系统中 SQLServer ...
- Canvas入门到高级详解(下)
四. Canvas 开发库封装 4.1 封装常用的绘制函数 4.1.1 封装一个矩形 //思考:我们用到的矩形需要哪些绘制的东西呢? 矩形的 x.y坐标 矩形的宽高 矩形的边框的线条样式.线条宽度 矩 ...
- Postman 接口测试神器
Postman 接口测试神器 Postman 是一个接口测试和 http 请求的神器,非常好用. 官方 github 地址: https://github.com/postmanlabs Postma ...
- chrome 下 input[file] 元素cursor设置pointer不生效的解决
https://jingyan.baidu.com/article/48b558e32fabb67f38c09a81.html 环境是chrome浏览器,今天发现为html网页中的input [fil ...
- linux搭建FTP服务器并整合Nginx
操作系统:Centos7 1.1.服务器配置 # 关闭SELINUX,把SELINUX=enforcing改为SELINUX=disabled,reboot重启服务器生效 vim /etc/sysco ...