该笔记的目的是引导读者借助WampServer平台，并利用HTML/CSS/JS/PHP将MySQL数据库挂载到网页中。同时，该笔记通过一个具体的案例，向读者分析数据库网页架构中五个部分协同工作的机理，使读者能自己运用HTML/CSS/JS/PHP在网页中呈现本地的MySQL数据库。
该笔记假定读者已对MySQL和WampServer有了基本的了解。如对MySQL尚不熟悉，请参考数据库网页搭建教程（一）——数据准备。如对WampServer基本操作尚不熟悉，请参考WampServer挂载MySQL数据库。如对HTML/CSS/JS/PHP基本语法尚不熟悉，个人比较推荐w3cschool的相关教程。
- HTML教程：https://www.w3cschool.cn/html/
- CSS教程：https://www.w3cschool.cn/css/
- JS教程：https://www.w3cschool.cn/javascript/
- PHP教程：https://www.w3cschool.cn/php/
首先简明地介绍目前较为流行的网页数据库架构。此架构由HTML、CSS、JS、PHP和MySQL五个部分组成。首先，PHP从MySQL数据库中读取数据，并以JSON数据格式将其呈递给前端变量（JS变量）。JS将前端变量写入到HTML元素中，从而在网页中显示出数据表内容。CSS通过规定一套样式表，从而对网页内容进行美化。用户还可以向服务器发出命令，即利用JS向服务器后端发出数据库检索指令，PHP负责分析用户给出的指令，并重新读取MySQL数据库的内容，将其呈递给JS，并最终向用户展示。
那么，如何用代码实现上述架构？打开WampServer，右击工具栏中的WampServer图标，打开“www目录”。在该目录中新建一个文本文件，并修改其扩展名，将文件名改为“test.php”。用文本编辑器软件打开“test.php”，并输入以下内容：
<?php
// 可变参数
/****** Need Modification ******/
$servername = "localhost";
$username = "您的MySQL账户名";
$password = "您的MySQL账户密码";
$dbname = "您需要呈现的MySQL数据库";
$tbname = "您需要展示的MySQL数据表";
/****************************/
function data_row($row){
/****** 根据您需要展示的数据表的结构进行修改 *****/
//这里使用的数据表有9列，列名分别为id, picture, user, …, submit_time
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"],
);
/*************************************************/
}
// 创建和检测连接
$conn = new mysqli($servername, $username, $password);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 显示数据
$conn->query("USE ". $dbname.";");
$sql = "SELECT * FROM ". $tbname;
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 转化为json数组
$res_json=array();
while($row = $result->fetch_assoc()) {
$newdata = data_row($row);
array_push($res_json, $newdata);
}
$data=json_encode($res_json);
//输出数据
//echo $data;
} else {
echo "0 results";
}
$conn->close();
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Mydb</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>var data = JSON.parse('<?php echo $data ?>');</script>
<script>console.log(data);</script>
</head>
<body>
<span id="show_data"><a href="###">Click to show data!</a></span>
<span id="show_json"></span>
</body>
</html>
<script>
//可变参数
/**** 根据您需要展示的数据列的名称修改该变量 ****/
//此处表示只展示列名为'picture', 'location', 'long', 'lat'的这四列内容
var title = ['picture', 'location', 'long', 'lat'];
//辅助全局变量
var has_show_data = false;
//展示数据
function print_data(data, title, title_display = "defaulted"){
var cout = "<table class='table table-striped'>";
//输出标题
cout += "<tr>";
if(title_display == "defaulted"){
title_display = title;
}
for(var j = 0; j < title.length; j++){
cout += "<th>" + title_display[j] + "</th>";
}
cout += "</tr>";
//输出数据
for(var i = 0; i < data.length; i++){
cout += "<tr>";
for(var j = 0; j < title.length; j++){
cout += "<td>" + String(data[i][title[j]]) + "</td>";
}
cout += "</tr>";
}
cout += "</table>";
return cout;
}
//事件响应函数
$(document).ready(function(){
$("#show_data").click(function(){
if(!has_show_data)
{
$(this).after(print_data(data, title));
}
has_show_data = true;
});
});
</script>
在含有/* … */注释的模块中修改相应的参数，以确保数据库网页能够显示出您需要展示的数据表内容。打开任一浏览器，输入“localhost/test.php”地址，敲击回车键，结果界面如图1所示。
图1 MySQL挂载到网页中
下面对HTML/CSS/JS/PHP协同挂载MySQL数据库的步骤作全面介绍。
- 数据读取：数据读取由PHP完成。
<?php … ?>代码块都是PHP的执行内容。PHP首先通过MySQL账户名和密码与本地数据库创立连接，然后利用MySQL的SELECT语句读取数据表中的所有内容，并将这些内容转化为JSON数组$data变量。这些步骤完成后，PHP与MySQL断开连接。 - 数据呈递：由PHP读取的数据必须被传递到前端。代码段
<script>var data = JSON.parse('<?php echo $data ?>');</script>即提供了JS和PHP之间的接口。JS将PHP包装好的JSON格式数据转移到网页前端，成为JS变量data，并等待网页渲染的进行。
【补充】console.log(data);是为了检验数据是否被成功地从后端转移到了前端。这是JS中最常用的调试方法。 - HTML初始化：位于
<html>和</html>之间的代码初始化DOM树，并在网页中呈现“Click to show data!”链接。 - JS交互：用户点击“Click to show data!”链接，触发事件响应函数。jQuery识别到用户单击链接的操作，并执行
$("#show_data").click()中的函数，调用print_data()函数，开始将data变量转换为HTML表格，并最终插入到“Click to show data!”链接的后端。 - CSS网页渲染：
print_data()函数中的代码段<table class='table table-striped'>指定了输出表格的样式。该样式被bootstrap CSS框架识别，从而使表格呈现出马鞍形布局。
【注意】引用bootstrap CSS框架时必须先引入bootstrap CSS样式核心文件，即
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
【注意】使用jQuery时，必须先引入相应JS文件，即
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
【注意】实际构建数据库网页时，PHP、HTML、CSS和JS代码内容一般会放在不同的文件中，这样显得结构清晰。
扫一扫
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
