Case study：数据库网页构建原理和实践

该笔记的目的是引导读者借助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_timereturn 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代码内容一般会放在不同的文件中，这样显得结构清晰。

欢迎感兴趣的同行朋友们批评指正。
联系邮箱：hrwu_ecology@163.com

Case study：数据库网页构建原理和实践相关推荐

Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示.数据选择.数据详细信息查看功能的数据库网页.该数据库 ...
Case Study: 利用PHP获取关系型数据库中多张数据表的数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个多数据表关联的网页.在上一个案例(Case Study: 利用JS实现数据库网 ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
Case study：在数据库网页中设计数据排序工具
一.目的该笔记的目的是引导读者在已搭建的数据库网页的基础上,利用JS设计数据排序工具.其效果如图1所示."Order by"下拉列表框由一系列字段组成,如"Locati ...
《大数据系统构建：可扩展实时数据系统构建原理与最佳实践》一1.5　大数据系统应有的属性...
本节书摘来自华章出版社<大数据系统构建:可扩展实时数据系统构建原理与最佳实践>一书中的第1章,第1.1节,南森·马茨(Nathan Marz) [美] 詹姆斯·沃伦(JamesWarren ...
从零到一构建完整知识体系，阿里最新SpringBoot原理最佳实践真香
Spring Boot不用多说,是咱们Java程序员必须熟练掌握的基本技能.工作上它让配置.代码编写.部署和监控都更简单,面试时互联网企业招聘对于Spring Boot这个系统开发的首选框架也是考察的 ...
Web Service Case Study: 内容供应服务
本文是Web Service Case Study文章系列的第五篇,在我以前的developerWorks的专栏文章中,我已经系统地介绍了各种Web服务技术标准及其细节,然而Web服务并不仅仅是一种技 ...
计算机网络原理与实践 (杨英鹏著) 电子工业出版社课后答案
上午,网络考完.全书的答案浏览了一遍,留此为证: 习题1 1-1 填空题 1.最早的计算机网络是( ). 2.电话网络采用( )交换技术,计算机网络采用( )交换技术. 3.( )协议是Interne ...
Web安全原理及实践（基础部分）
Web安全原理及实践(入门) Web安全基础 Web安全概述 Web安全基础常见渗透测试工具 Nmap BurpSuite Sqlmap Sublime 常见的漏洞扫描工具 BurpsuiteSca ...

Case study：数据库网页构建原理和实践

Case study：数据库网页构建原理和实践相关推荐

最新文章

热门文章