给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作为数据库、设置数据库局域网访问，使用内网穿透使数据库可段时间外网访问，以及构建展示界面。

附：展示界面的代码

<!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>