给Mysql构建一个展示界面 这是“构建个人小型医学数据库”系列文章的最后一部分。通过之前的工作我们确定了所要收集的各类变量并将其录入到mysql数据库中。 为了展示Mysql中存储的数据，通过摸索
这是“构建个人小型医学数据库”系列文章的最后一部分。通过之前的工作我们确定了所要收集的各类变量并将其录入到mysql数据库中。
为了展示Mysql中存储的数据，通过摸索我们最终使用appML、PHP和javascript开发一个展示页面。这些技术可以协同工作，以创建一个有用的用户界面，显示相关的数据。
构建展示页面的必要性在于，让用户可以方便地浏览MySQL数据库中的数据。展示页面可以帮助用户更好地理解数据，了解数据的关联和趋势。同时，展示页面还可以方便用户进行数据分析和决策，提高工作效率和数据利用率。
一共有三个板块：
展示数据库建立的目的和过程，最简洁的办法就是使用文字说明，这里使用的是Jquery.js 中的load()将外部的文字导入到html页面，方便后续的维护。还可以搭配一些图片。
除了文字展示，我们还可以使用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;?>最后，我们可以使用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>来源地址：https://blog.csdn.net/skyskytotop/article/details/131305016
--结束END--
本文标题: 给数据库构建一个展示界面
本文链接: https://lsjlt.com/news/388627.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0