一、目标

该笔记的目的是引导读者借助WampServer平台和MySQL数据库，利用HTML/CSS/JS/PHP设计一个多数据表关联的网页。在上一个案例（Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能）中，我们已经实现了数据表的分页显示，并在网页中呈现的数据表中设计了“Info”按钮。点击“Info”按钮，就能查看一条数据的详细信息。本案例就希望实现这一功能。

具体而言，现在MySQL数据库中有basinfo、camera、vegetation和resolution四张表。四张表都有picture字段。basinfo为主表，其外键为picture。在网页中仅仅呈现basinfo表的部分字段。点击"Info"按钮，进入info页面，就可以看到这条数据在basinfo、camera、vegetation和resolution中所有字段的值，达到查看这条数据的详细信息的目的。其效果如图1、图2所示。

图1 主表内容。展示basinfo表中部分数据字段的信息。

图2 详细信息界面。展示某条特定数据的basinfo、camera、vegetation和resolution四张数据表的内容。

该笔记假定读者已经能自己动手利用WampServer搭建出数据库网页，即利用PHP将获取服务器MySQL数据库中的数据，并将其呈递给JS，最后展示给用户。如尚不能搭建一个简易的网页数据库，请参考Case study：数据库网页构建原理和实践。

二、搭建步骤

JS发送请求：在"show_data.js”文件（详见Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能）中我们已经添加了info函数，其代码如下。该函数将picture值写入Cookie文件中，并将其命名为"query_key"变量，然后打开新的界面。一旦新的界面打开，就会调用PHP。

// href模块功能：点击Info按钮，跳转到图片info界面
function info(path, new_page){setCookie("query_key",path,1);       //利用COOKIE向新页面传送外键信息if(new_page){window.open(print_table_kit["href_location"]);} else{location.href = print_table_kit["href_location"];}
}

PHP读取数据：新建"read.info.php"文件，其代码如下。修改全局可变参数以及代码块最后的函数调用格式使之适应您需要展示的各个数据表的格式。需要注意，代码中使用了$_COOKIE[“query_key”]，即读取JS呈递的Cookie变量。该Cookie变量指导PHP从MySQL数据库中查找符合要求的数据，并重新呈递给JS

<?php
/********** 全局可变参数 **********/
/*********************************/
// MySQL账户信息
$servername = "localhost";
$username = "您的MySQL账户名";
$password = "您的MySQL账户密码";// 数据库名称
$dbname = "您希望展示的数据库名称";// 数据表结构
// 改为您希望展示的数据表的格式
function data_row($row, $tbname){// "basinfo"数据表的格式if($tbname == "basinfo"){return Array("id" => $row["id"],"picture" => $row["picture"],"user" => $row["user"],"location" => $row["location"],"time" => $row["time"],"lat" => $row["lat"],"long" => $row["long"],"al" => $row["al"],"submit_time" => $row["submit_time"],);      // "camera"数据表的格式} else if($tbname == "camera"){return Array("picture" => $row["picture"],"image_make" => $row["image_make"],"image_model" => $row["image_model"],"compress" => $row["compress"],"exposure_time" => $row["exposure_time"],"ISO" => $row["ISO"],"maxape" => $row["maxape"],"foc" => $row["foc"],);// "resolution"数据表的格式} else if($tbname == "resolution"){return Array("picture" => $row["picture"],"Xpix" => $row["Xpix"],"Ypix" => $row["Ypix"],"XRes" => $row["XRes"],"YRes" => $row["YRes"],"Band" => $row["Band"],"bits" => $row["bits"],);// "vegetation"数据表的格式} else if($tbname == "vegetation"){return Array("GVI" => $row["GVI"],"EXG" => $row["EXG"],"CIVE" => $row["CIVE"],"VEG" => $row["VEG"],"EXGR" => $row["EXGR"],"WI" => $row["WI"]);}}
/********** /全局可变参数**********/
/*********************************//*******  MySQL检索式构建 *********/
/*********************************/
//构建SELECT语句
function select_mysql($tbname){//构建检索式$sql = "SELECT * FROM ". $tbname;$sql = $sql. " WHERE `picture` = '". $_COOKIE["query_key"]. "';";return $sql;
}
/*********** /必要函数 ************/
/*********************************//****** MySQL数据获取函数 *********/
/*********************************/
//如果用户提交空表单，什么也不做
function main_mysql($servername, $username, $password, $dbname, $tbname){// 创建和检测连接$conn = new mysqli($servername, $username, $password);if ($conn->connect_error) {die("Connection failed: " . $conn->connect_error);}// 筛选数据$conn->query("USE ". $dbname.";");$sql = select_mysql($tbname); //echo $sql;$result = $conn->query($sql);// 数据包装为JSON数组if ($result->num_rows > 0) {$res_json=array();while($row = $result->fetch_assoc()) {$newdata = data_row($row, $tbname);array_push($res_json, $newdata);}$data=json_encode($res_json);} else {$data=json_encode([]);}// 断开连接$conn->close();return $data;
}
/***** /MySQL数据获取函数 *********/
/*********************************/// $tbname修改为您希望展示的数据表名称
//  这里以"basinfo", "camera", "vegetation"和"resolution"四张数据表为例
//  展示PHP读取四张数据表的数据，并分别存于$points, ..., $resolution变量
$points = main_mysql($servername, $username, $password, $dbname, "basinfo");
$camera = main_mysql($servername, $username, $password, $dbname, "camera");
$vegetation = main_mysql($servername, $username, $password, $dbname, "vegetation");
$resolution = main_mysql($servername, $username, $password, $dbname, "resolution");
?>

JS接收变量：新建"info.php"文件，用于向用户展示主要的数据信息。在该文件中引入"read.info.php"文件，并增加以下代码。从而PHP获取的数据转化为JS变量。

<script>var points = JSON.parse('<?php echo $points ?>');</script>
<script>var camera = JSON.parse('<?php echo $camera ?>');</script>
<script>var resolution = JSON.parse('<?php echo $resolution ?>');</script>
<script>var vegetation = JSON.parse('<?php echo $vegetation ?>');</script>

数据包装与展示：新建"show.info.js"文件，在"info.php"文件中引入"show.info.js"脚本。在"show.info.js"中加入以下代码。随后在"info.php"文件的<body>标签中添加onload事件，即<body onload="showphoto()">。此时在图1展示的网页中点击Info按钮，跳转到新的页面后，调试器就会输出一条特定数据的详细信息。如需要渲染HTML网页，则继续在"show.info.js"的//Print information后加入需要输出的HTML内容，并将其写到"info.php"中的HTML元素中即可。

//Merge jsonObject
// 参考https://blog.csdn.net/wangshu696/article/details/50969281
function merge(jsonbject1, jsonbject2){var resultJsonObject = {};for (var attr in jsonbject1) {resultJsonObject[attr] = jsonbject1[attr];}for (var attr in jsonbject2) {resultJsonObject[attr] = jsonbject2[attr];}return resultJsonObject;
} function showphoto(){//get datavar info = merge(points[0], camera[0]);var info = merge(info, resolution[0]);var info = merge(info, vegetation[0]);console.log(info)//Print information//...
}

Case Study: 利用PHP获取关系型数据库中多张数据表的数据相关推荐

获取sqlserver数据库中所有库、表、字段名的方法
获取sqlserver数据库中所有库.表.字段名的方法 2009年03月12日星期四下午 12:51 1.获取所有数据库名: SELECT Name FROM Master..SysDatabas ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
mysql支持非关系_说下oracle、mysql、非关系型数据库中的索引结构？
谢邀~~树懒君悉心整理了一篇索引结构方面的内容,跟各位知友分享分享~ Oracle 索引的数据结构:B-TreeOracle 数据库使用 B-trees 存储索引,来加速数据访问.若没有索引,你必须顺 ...
Sqoop（三）将关系型数据库中的数据导入到HDFS（包括hive，hbase中）
本文转自:https://www.cnblogs.com/yfb918/p/10855170.html 一.说明: 将关系型数据库中的数据导入到 HDFS(包括 Hive, HBase) 中,如果导入 ...
利用ECharts可视化mysql数据库中的数据
利用ECharts可视化mysql数据库中的数据技术实现背景在我们的日常开发中我们经常使用到各种各样的数据进行相关的功能的开发,在这个过程中我们可以用到各种各样的图表来分析和实现我们的需求,很多的 ...
获取SQLServer数据库中所有表
对于获取SQLSERVER数据库中所有表,首先第一步引有SQLDMO.dll 找到文件路径: C:\Program Files\Microsoft SQL Server\80\Tools\ ...
mysql表中的多对多关系表_「一对多」关系型数据库中一对多，多对一，多对多关系（详细） - seo实验室...
一对多在关系型数据库中,通过外键将表跟表之间联系在了一起. 一个班级有很多学生,外键维护在学生的一方,也就是多的一方.(在做页面设计的时候,需要把两个表连接到一块查询信息) 建立一个student和 ...
获取某数据库中含有某字段的所有表的脚本
2019独角兽企业重金招聘Python工程师标准>>> 背景在某些情况下,比如业务重构时,需要对涉及到某字段的代码进行修改,则需要获取到某数据库中所有含有该字段的数据表．代码 & ...
mysql 5.74安装教程_MySQL数据库作为关系型数据库中的佼佼者，因其体积小，速度快，成本低，不仅受到了市场的极大追捧，也受到了广大程序员的青睐。接下来，就给大家说一下，MySQL的...
MySQL数据库作为关系型数据库中的佼佼者,因其体积小,速度快,成本低,不仅受到了市场的极大追捧,也受到了广大程序员的青睐.接下来,就给大家说一下,MySQL的下载和安装: 一.MySQL的下载第一 ...

Case Study: 利用PHP获取关系型数据库中多张数据表的数据

一、目标

二、搭建步骤

Case Study: 利用PHP获取关系型数据库中多张数据表的数据相关推荐

最新文章

热门文章