位置：首页-资讯-后端开发

给数据库构建一个展示界面

2023-09-01 14:07

短信预约 -IT技能 免费直播动态提醒

给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，并一起返回数据，为绘制多个图表提供了数据，供大家参考。

$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 class="lazy" data-src="js/plotly-2.24.1.min.js" charset="utf-8">script>    <script class="lazy" data-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 class="lazy" data-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>