一天教会你搭建一个动态网站（下）

轩玖小瑞
1,496 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

在上篇教程中，我们已经搭建好了一个可以实现动态网站的所有工具。

在这篇的教程，我将会教你如何将一个动态网站给做出来。

为了方便你的浏览，我先给你介绍一下本期的教程目录，本期的教程分为两大章节，其中第一章节是给完全没有任何基础的小白看的，看完第一个章节，我相信你按步骤来的话一定可以做出这个案例的网站的；第二个章节，是给懂些编程知识但是却不知道怎么搭建一个动态网站的看的。（如有错误，路过的大佬请指教。同时小伙伴们如果有什么疑问，欢迎公众号内留言，我会尽我所能去解答你的疑惑的）

第一章：搭建静态网站

1、首先打开下面的网站链接，点击"下载地址>江苏电信下载"

https://sc.chinaz.com/moban/210309074280.htm#downhttps://sc.chinaz.com/moban/210309074280.htm#down

（或者公众号回复“静态网站源码”，我将会分享文件给你）

 2、下载之后将文件解压在我们想要放在的一个位置，例如说“桌面”上

我们打开解压后的文件，然后双击 " index.html " 你就会发现，我们已经在浏览器中打开了这个网页（这个网页是别人已经写好了的）。我们接下来要做的事情就是将这个已经写好的页面上传到我们的服务器之中。

640.png

3、打开“命令行”或者“终端”（Windows系统下为命令行，Mac系统下为终端） 输入以下命令，将文件上传到服务器到根目录中(解释：绝对路径可以看上图红圈圈中的位置，你打开index.html文件后，地址栏中显示的就是绝对路径。“src” 代表将本地文件复制到服务器中，“ -r ”代表将绝对路径下的所有文件都复制到服务器中）

src -r /输入下载下来文件的绝对路径 root@服务器IP地址：/usr/share/nginx
//例如我下面给出的例子
src -r /Users/zsjddna/Download/moban/html root@127.0.0.1:/usr/share/nginx

4、打开命令行或者终端输入以下代码，首先登入服务器，然后重启Nginx服务器，以更新页面显示内容

shh root@服务器IP地址
//输入服务器登入密码
systemctl restart nginx

5、接着打开浏览器在页面输入我们服务器的IP地址，就能够看到我们的页面了。

640-1.png

恭喜你，成功将页面部署到服务器上面了。如果你想换个页面只需要将你想要更换的页面文件放在服务器中“ /usr/share/nginx/html ” 文件下面即可。（解释：因为设置是这个目录为根目录，如果有人访问你到页面，首先便会访问这个文件夹下面的 index.html 文件）

第二章：搭建一个简单的动态网站

在这里的，我建议小白可以先去补一下，PHP 和 MySQL的相关知识，不然可能不好理解，当然啦，如果你按照我的步骤来也是可以成功的，但是不理解什么意思也就达不到学习的效果啦～

首先我们知道，数据库就是存储我们想要存储的一些信息，所有与数据库有关的命令不过就是“增删查改”即增添、删除、查询、修改。其次，PHP语言就是可以使我们与数据库进行交互，操作数据库进行“增删查改”这些操作而已。

接下来，我们就以一小段代码进行学习，如何用数据库进行增删查改。

第一步：创建一个数据库和表

1、先登入我们的服务器，打开命令行或者终端，然后输入以下代码：

ssh root@127.0.0.1 (相信你在上一节已经懂得了，我就不再解释了）

接下来输入服务器密码，便可以看到欢迎登入的信息了。

2、接着登入Mysql关系数据库管理系统，输入以下代码：

mysql -u root -p //'-u'表示用户，后面紧跟用户名 '-p'表示密码

输入关系数据库管理系统root用户的密码便能够成功登入，看到以下界面了

640-2.png

3、输入以下代码查看数据库、创建数据库、创建表（mysql中语句必须以“;”结尾，并按Enter键执行）

SHOW DATABASES; //查看所有数据库。CREATE DATABASE test_db; //创建数据库test_db。
SHOW DATABASES; //查看所有数据库。USE test_db; //想要进入一个数据库必须先选择这个数据库。
SHOW TABLES; //查看所有表。
CREATE TABLE personnel(name VARCHAR(20),sex CHAR(1),birth DATE,stu_id int); 
//创建一个personnel表格其中有姓名、性别、出生日期、学号。
SHOW TABLES; //查看所有表。
DESCRIBE personnel; //查看personnel表的信息/数据类型

参考图如下：

640-3.png

640-4.png 关于数据库和表的结构关系我个人理解如下：

640-5.png

4、退出数据库

quit; //exit;也可以

第二步：在本地写好“增删查改”代码

1、增，创建一个PHP文件，输入以下代码：（我使用的软件是sublime text3，你可以使用任何你习惯使用的IDE（集成开发环境））；

<?php
$servername = "localhost"; //主机地址
$username = "root"; //登入用户
$password = "xuanjiuxiaorui"; //登入用户密码
$dbname = "test_db"; //需要连接的数据库
//创建链接
$conn = mysqli_connect($servername,$username,$password,$dbname);

//检测连接
if (!$conn) {
        die('连接失败:'.mysqli_error($conn));
}

//mysql 添加语句
$sql = "INSERT INTO personnel(name,sex,birth,stu_id) VALUES ('Xiaolan','m','1998-8-25','19992020')";

if (mysqli_query($conn,$sql)) {
        echo "添加成功";
}else{
        echo "添加失败";
}
mysqli_close($conn); //终止连接

?>

2、删，与1、的步骤相同：

<?php
$servername = "localhost";  //主机地址
$username = "root";  //登入用户
$password = "xuanjiuxiaorui"; //用户密码
$dbname = "test_db"; //需要连接的数据库

//创建链接
$conn = mysqli_connect($servername,$username,$password,$dbname);

//检测连接
if (!$conn) {
        die('连接失败:'.mysqli_error($conn));
}//mysql 删除语句
$sql = "DELETE FROM personnel WHERE name = 'Xiaolan'";


if (mysqli_query($conn,$sql)) {
        echo "删除成功";
}else{
        echo "删除失败";
}
mysqli_close($conn); //终止连接

?>

3、查，与1、的步骤相同(注：为了能够直观的在网页查看数据，我做了一个小表格）：

<!DOCTYPE html >
<html>
<head>
        <title>查询数据表</title>
</head>
<body>
<?php
$servername = "localhost"; //主机地址
$username = "root"; //登入用户
$password = "xuanjiuxiaorui"; //用户密码
$dbname = "test_db"; //需要连接的数据库

//创建链接
$conn = mysqli_connect($servername,$username,$password,$dbname);

//检测连接
if (!$conn) {
        die('连接失败:'.mysqli_error($conn));
}
$sql = "SELECT * FROM personnel ";

if (mysqli_query($conn,$sql)) {
        echo "查询成功".'<br \>';
}else{
        echo "查询失败".'<br \>';
}
?>
<table width=500 border=1> //html表格
        <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>生日</td>
        <td>学号</td>
<?php

$result = mysqli_query($conn,$sql);

if(mysqli_num_rows($result) > 0 ){

        while($row = mysqli_fetch_assoc($result)){
                echo '<tr>';
                echo '<td>'.$row["name"].'</td>';
                echo '<td>'.$row["sex"].'</td>';
                echo '<td>'.$row["birth"].'</td>';
                echo '<td>'.$row["stu_id"].'</td>';
                echo '</tr>';
?>
        <?php } ?>
<?php } ?>
</table>

</body>
</html>

4、改，与1、的步骤相同：

<?php
$servername = "localhost"; //主机地址
$username = "root"; //登入用户
$password = "xuanjiuxiaorui"; //用户密码
$dbname = "test_db"; //需要连接的数据库

//创建链接
$conn = mysqli_connect($servername,$username,$password,$dbname);

//检测连接
if (!$conn) {
        die('连接失败:'.mysqli_error($conn));
}

//mysql 更改语句
$sql = "UPDATE personnel SET sex = 'f' WHERE name = 'Xiaolan' ";

if (mysqli_query($conn,$sql)) {
        echo "更改成功";
}else{
        echo "更改失败";
}
mysqli_close($conn); //终止连接


?>

第三步：将本地“增删查改”上传到服务器web根目录下面，并在浏览器输入网址进行测试。

1、运用第一章第3步的方法，将本地四个PHP文件上传到web根目录下，输入以下代码：

scp -r /四个PHP文件所在文件夹的绝对路径 root@服务器IP地址：/要将PHP文件夹放在的哪里的绝对地址//例如我下面给出的例子
src -r /Users/zsjddna/Download/moban/html root@127.0.0.1:/usr/share/nginx/html

2、在浏览器中输入PHP文件的URL，如下

http://www.guoningwen.com/public/add.php
http://www.guoningwen.com/public/select.php
http://www.guoningwen.com/public/update.php
http://www.guoningwen.com/public/delect.php

640.gif 大家也可以输入我给的网址查看效果。同时也可以自己进行多次不同组合的尝试，例如：增添两次数据，然后更改数据，查看增添的两个数据是全部更改了还是只更改了一个数据；删除所有数据，然后更改数据，查看数据是否有显示；当然也可以更改PHP文件中的代码，做出自己想要的数据。大家就自己去尝试吧。

恭喜你！！！已经成功的使用PHP、MySQL以及HTML实现了一个小小的动态网站。

当然这个网站非常简陋，不过我相信你已经能够明白做一个动态网站的原理了。

对于小白来说，我建议有兴趣的话接下来可以去学习一下

HTML（网页的基本语言）、

CSS（优化网页页面，让页面看起来更好看）、

JavaScript（脚本语言，可以与网页页面交互）、

PHP（脚本语言，用来连接网页和数据库的交互）、

MySQL（数据库、用来存储相关的数据）。

希望这篇文章能够给你带来一些帮助，当然如有错误欢迎大神批评指正。

avatar
文章
阅读
粉丝