给mySQL构建一个展示界面
这是“构建个人小型医学数据库”系列文章的最后一部分。通过之前的工作我们确定了所要收集的各类变量并将其录入到mySQL数据库中。
为了展示MySQL中存储的数据，通过摸索我们最终使用appML、PHP和JavaScript开发一个展示页面。这些技术可以协同工作，以创建一个有用的用户界面，显示相关的数据。
- appML是一种基于XML和JavaScript的语言，可用于构建Web应用程序和移动应用程序。它提供了一种简单的方法，将数据从服务器传递到客户端，并使用JavaScript将其呈现在Web页面上。
- PHP是一种服务端脚本语言，可与MySQL等数据库协同工作，用于处理服务器端上的数据。PHP提供了一个强大的API，可用于连接和查询MySQL数据库。
- JavaScript是一种客户端脚本语言，可用于创建交互式Web应用程序。它可以与appML和PHP协同工作，以创建一个响应式的用户界面。
构建展示页面的必要性在于，让用户可以方便地浏览MySQL数据库中的数据。展示页面可以帮助用户更好地理解数据，了解数据的关联和趋势。同时，展示页面还可以方便用户进行数据分析和决策，提高工作效率和数据利用率。
具体构建板块
一共有三个板块：
1. 文字展示部分
展示数据库建立的目的和过程，最简洁的办法就是使用文字说明，这里使用的是jQuery.js 中的load()将外部的文字导入到html页面，方便后续的维护。还可以搭配一些图片。
2. 图表展示部分（Dashbord）
除了文字展示，我们还可以使用JavaScript库（如Chart.js）来创建图表，以更好地可视化数据。这些图表可以包括柱状图、折线图、饼图等。这里我们使用的是php从mySQL数据库获取数据，并结合plotly.js库来形成图表。这里值得一提的php文件的实现方式，可以同时实现多个query，并一起返回数据，为绘制多个图表提供了数据，供大家参考。
<?php
$count_year = array();
$count_type = array();
$year=array();
$type=array();
$db = new PDO('mysql:host=localhost;dbname=the_info', 'liuyp2080', '819800');
$query = 'SELECT year,SUM(count) AS count_year FROM main group by year';
$query2='SELECT type,SUM(count) AS count_type FROM main group by type';
$result = $db->query($query);
$result2 = $db->query($query2);
while($row = $result->fetch()) {
$year[] =$row['year'];
$count_year[]=$row['count_year'];
};
while ($row = $result2->fetch()) {
$type[] = $row['type'];
$count_type[] = $row['count_type'];
}
$finaldata=array('year'=>$year,
'count_year'=>$count_year,
'count_type'=>$count_type,
'type'=>$type);
// Encode data to JSON format
$jsonData = json_encode($finaldata, JSON_UNESCAPED_SLASHES);
echo $jsonData;
?>
3. 表格浏览部分
最后，我们可以使用appML和javascript创建一个表格，并搭配翻页和过滤功能，以便用户浏览MySQL数据库中的内容。这个表格可以包含多个列和行，每个单元格可以显示文本、数字或日期。这一部分是复制w3schools网站的已有的代码，各方面的介绍比较完善，是更好的参考资料。
通过以上步骤，我们可以构建一个功能齐全的展示页面，以帮助用户更好地管理和利用MySQL数据库中的数据。至此，一个相对完整的数据库构建流程已经形成，包括使用设计数据库内容、安装WAMP作为数据库、设置数据库局域网访问，使用内网穿透使数据库可段时间外网访问，以及构建展示界面。文章来源：https://www.toymoban.com/news/detail-503104.html
附：展示界面的代码文章来源地址https://www.toymoban.com/news/detail-503104.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>医院样本库</title>
<script src="js/plotly-2.24.1.min.js" charset="utf-8"></script>
<script src="js/jquery-3.7.0.js"></script>
<style>
body {
background-color: #f0f0f0;
}
.w3-container {
border: 1px solid #dbd6d6;
padding: 10px;
margin: 10px 0;
}
h1 {
text-align: center;
}
</style>
</head>
<html lang="zh">
<title>样本库展示页面</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>
<h1>样本库展示</h1>
<div class='w3-container'><h2>一、文字介绍</h2></div>
<div id='introduction' class="w3-container">
<p id="p1">样本库介绍</p>
</div>
<div class="w3-container"><h2>二、图片指标</h2></div>
<div class="w3-container" style="display:flex;">
<div id="count_bar" style="height:300px;width:50%"></div>
<div id="count2_bar" style="height:300px;width:50%"></div>
</div>
<div class="w3-container"><h2>三、列表浏览</h2></div>
<div class="w3-container" appml-data="appml.php?model=model_db">
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filtercommands.htm"></div>
<table class="w3-table-all">
<tr>
<th>年份</th>
<th>类型</th>
<th>数量</th>
</tr>
<tr appml-repeat="records">
<td>{{year}}</td>
<td>{{type}}</td>
<td>{{count}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var url="get_data_from_mysql.php";
//jquery函数获取php中的数据
function arrTest(url){
let year=[],count_year=[],count_type=[],type=[];
// Use jQuery's AJAX method to send a POST request to the specified URL.
$.ajax({
type:"post",
async:false,
url:url,
data:{},
dataType:"json",
success:function(result){
if (result) {
year.push(result.year);
count_year.push(result.count_year);
count_type.push(result.count_type);
type.push(result.type);
}
}
});
return [year,count_year,count_type,type];
};
//执行函数获取mySql中的数据
var data=arrTest(url);
var year=data[0][0];
var count_year=data[1][0];
var count_type=data[2][0];
var type=data[3][0];
//使用获取的数据进行绘图,指定data和layout
var count_bar = document.getElementById('count_bar');
var plot_data= [
{
x:year,
y:count_year,
type: 'bar',
}
];
var layout = {
title: '样品数量',
xaxis:{title:'年份'},
yaxis:{title:'数量'},
};
Plotly.newPlot(count_bar, plot_data,layout);
</script>
<script>
var count2_bar = document.getElementById('count2_bar');
var plot_data2= [
{
x:type,
y:count_type,
type: 'bar',
}
];
var layout2 = {
title: '样品类型',
xaxis:{title:'类型'},
yaxis:{title:'数量'},
};
Plotly.newPlot(count2_bar, plot_data2,layout2);
</script>
<script>$('#p1').load("introduction.txt");</script>
</body>
</html>
到了这里，关于给数据库构建一个展示界面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
