基于HTML5的个人网站的设计与实现

内容摘要

本项目将要设计及制作一个博客类的个人网站，网站分为学习、旅游、宠物、爱豆四个博客大类。访客可以浏览文章和对文章进行评论，还可以给博主留言。管理员可以在后台对网站的数据进行增、删、改。本网站采用HTML5进行页面开发，PHP实现数据的交互，MySQL建立数据库。网站设计及制作过程中所使用到的软件包括但不限于Illustrator

（网站界面图片）、Visual Studio Code（代码编写）、MySQL（网站数据库）、等等。

本项目中涉及到的工作流程有：前期网站运行环境（包括服务器的搭建，PHP环境设置等），个人网站功能的设计和构思，网站数据库的设计，静态页面的设计和搭建，PHP实现前端和数据库的交互，后台登录的安全性设置。

关键词：HTML5 PHP MySQL数据库 个人网站 博客类

Abstract

This project will design and produce a personal blog website, which is

divided into four blog categories: learning, travel, pets and rs can

browse and comment on articles，also leave a message to str-

ators can add, delete and change the data of website uses

HTML5 to design pages, uses PHP to achieve data interaction, uses MySQL

to establish a software used in website design and production

includes but is not limited to Illustrator (website interface pictures),

VisualStudioCode (code writing), Mysql (website database), , etc.

Work process involved in this project are: Building site running

environment ( the construction of the server, the PHP environment Settings,

etc.), personal website function design, web database design, building static

pages, realize the dynamic development in PHP, login security Settings.

Key words: HTML5 PHP MySQL database personal website

Blog

目录

第二章 绪论 ......................................... 1

1.1开发背景及意义 ................................... 1

1.2选题国内研究现状 ................................. 1

1.3课题研究主要内容 ................................. 2

第三章 前期准备 ..................................... 3

2.1 HTML5介绍 ....................................... 3

2.1.1 发展历程 ........................................ 3

2.1.2 新特点 .......................................... 3

2.2搭建运行环境 ..................................... 3

第四章 系统分析 ..................................... 4

3.1 网站需求分析 .................................... 4

3.3.1 前台需求分析 .................................... 4

3.3.2 后台需求分析 .................................... 4

3.2 网站逻辑模型 .................................... 5

3.3 数据库设计 ...................................... 6

第五章 静态页面实现 ................................. 7

4.1 网站文件结构 .................................... 7

4.2 首页实现 ........................................ 7

4.2.1 JavaScript导航栏 ................................ 7

4.2.2 CSS文字特效 ..................................... 8

4.2.3 jQuery页面滚动元素 .............................. 9

4.3留言页实现 ....................................... 9

4.3.1 JavaScript表单验证 .............................. 9

4.3.2 JavaScript生成简单的验证码 ..................... 11

4.3.3 onsubmit阻止表单提交 ........................... 12

4.4 文章列表页实现 ................................. 12

4.4.1 点击返回顶部按钮 ............................... 12

4.4.2 CSS伪元素制作提示框 ............................ 13

4.5 其他前端展示页面 ............................... 13

4.6 后台系统页面 ................................... 14

4.6.1 Bootstrap网格系统 .............................. 14

4.6.2 后台首页基本框架 ............................... 15

4.6.3 Bootstrap模态框 ................................ 16

第六章 实现动态开发 ................................ 17

5.1 留言板动态开发 ................................. 17

5.1.1数据库连接 ...................................... 17

5.1.2 表单提交 ....................................... 17

5.1.3 留言显示 ....................................... 18

5.1.4 后台留言删除 ................................... 18

5.2 栏目动态开发 ................................... 19

5.2.1 栏目修改 ....................................... 19

5.3 文章页面的动态开发 ............................. 20

5.3.1 Simditor富文本编辑器 ........................... 20

5.3.2 文章添加 ....................................... 21

5.3.3 文章修改 ....................................... 22

5.3.4 文章删除 ....................................... 23

5.3.5 后台文章显示列表 ............................... 23

5.4 其他页面开发 ................................... 23

5.4.1 评论的添加和删除 ............................... 23

5.4.2 登录和登出 ..................................... 23

5.4.3 文章搜索 ....................................... 24

第七章 登录安全 .................................... 25

6.1 使用Session判断用户登录 ........................ 25

6.1.1 Session工作原理 ................................ 25

6.1.2 判断用户登录 ................................... 25

第八章 功能测试 .................................... 26

7.1 前端显示页面测试 ............................... 26

7.2 后台系统操作测试 ............................... 26

第九章 总结与展望 .................................. 28

8.1 总结 ........................................... 28

8.2 展望 ........................................... 28

参考文献 ........................................... 29

致谢 ............................................... 30

第一章 绪论

1.1开发背景及意义

如今，随着信息技术的飞速发展，人们足不出户就能知天下，互联网已经成为人与外界交流的重要渠道之一，它的作用渗透到社会的方方面面。而网站作为网络信息主要的表现形式之一，更是在互联网上发挥着中流砥柱的作用。互联网的发展使人们的生活发生了翻天覆地的变化，互联网的世界每分每秒都交织着巨大的信息，如何在此情况下抓住消费者的眼球，社会各行各业纷纷开始搭建属于自己的网站，在网站内企业可以根据自身品牌文化来打造专属页面，从而吸引消费者的来访。

网站是一个集文字、图片、音频等多元化的信息传播方式，比起传统的信息传播方式，人们在获取信息的同时可以感受到更多的乐趣。在计算机技术的飞速发展下，建设网站不再局限于企业和单位，独立的个人也可以拥有网站。这就是本论文所讨论的个人网站了。个人网站是一个可以充分展示个人人格魅力和才能的地方的，越来越多人认为拥有个人网站是一件很酷的事情。于是互联网上的个人网站数量与日俱增，五彩缤纷的主页让人看得眼花缭乱，每个人都可以在自己的网站上尽情发挥和展示自己的才能。

在技术层面来说，一个网站的页面是由静态网页和动态网页来实现。静态页面我们可以通过HTML5来完成，而动态页面则可以通过Java、PHP、Python等来完成。HTML5是一种专门用于创建网页的标记语言，是开放的Web网络平台的基础，常与CSS和JavaScript搭配使用。近年来，HTML5俨然已经成为当今最主流的网页制作语言了。HTML5采用直观的标准化标记语言简化了网页的设计和构建，且大大减少了网页对于插件的依赖。本次毕业设计的选题就是基于HTML5的直观和便捷，再结合Bootstrap框架使用，我在设计时充分发挥自己的个性。而后台则使用PHP+MySQL来实现和前端页面的交互。

1.2选题国内研究现状

随着互联网的飞速发展，有关互联网的技术也层出不穷。在过去的10年时间里，互联网上的个人网站多如毫毛。但是这么多的网站不可能每个都是美轮美奂，制作精良，而且近年来个人博客和个人网站的潮流也消退了很多。那么现在的个人网站发展现状到底如何呢？

根据上一节说明我们可以知道对于个人来说，创建网站不再是遥不可及的事情，所以个人网站才会出现大量繁殖的现象。那么个人网站的门槛是不是真的这么低呢？是不是每个人都可以搭建个人网站呢？答案肯定是否。下面是我分析出来的近 1

几年国内个人网站现状。

（1）资本商家套路重重：打开百度搜索个人网站，你会发现一大堆建站广告，而且大多数广告商都标榜着“免费建站”的字样。那事实真的是免费建站吗？在商家的消费套路浸淫多年的我们应该也知道这只不过是商家贴出来吸引消费者眼球的惯有手段罢了。进去之后，你就会发现其实处处都需要掏钱，而且一旦这个商家出了什么意外，那么你的个人网站也很可能会消失在这茫茫互联网长河中。

（2）成本高：搭建个人网站最基本需要域名和服务器，这些都是需要钱购买的，而且后期的运营也是需要投入成本的。再就是搭建个人你需要有专业的知识作为基础，你要设计网页、编写代码等等。那对于一个从未接触过这方面技术的人来说，让他花大量的时间和金钱来搭建一个个人网站，显然是不现实的。

（3）专业性强：现存的个人网站的拥有者大都是程序员和设计师，他们在个人网站分享自己的设计，记录自己的学习收获。对于他们来说，拥有一个个人网站可以大大提升他们在职场的竞争力，所以他们个人网站制作都十分精良。

1.3课题研究主要内容

本项目是开发一个博客类的个人网站，这是一个比较基础的网站设计，在页面的设计上会融入个人特色和风格，网站也具备博客的基本功能。网站系统设计分为前台页面展示和后台管理系统。网站的前端会用HTML5和Bootstrap框架，后台会用PHP和MySQL的搭配实现。

（1）前台页面展示平台功能

文章浏览：内容包括学习、旅游、爱豆、宠物四个栏目，用户可以通过栏目进入文章列表，通过搜索找到感兴趣的文章。用户点击进入文章详情页面可以在文章下方进行评论。

留言板： 网站有一个留言板块，用户可以进入该板块留下想对博主说的话。

（2）后台管理平台功能

栏目管理板块：管理员可以对栏目进行增加、修改和删除。

文章管理板块：管理员可以在后台发布文章，可以对文章内容、标题、标签进行修改，还可以删除文章。

评论管理板块：管理员可以对评论进行选择删除。

留言管理板块：管理员可以对留言进行选择删除。

2

第二章 前期准备

2.1 HTML5介绍

随着互联网产业的高速发展，如今HTML5已经成为主流的前端开发技术。广义地说，HTML5是包含HTML、CSS、JavaScript在内的一套技术组合。

2.1.1 发展历程

在HTML5出现之前，人们一直都是在使用HTML4.01，但是4.01版本从2000年开始就没有跟新过了。当时的一些公司想继续推动web标准化的发展，于是他们就共同成立了超文本应用技术工作组（WHATWG），投身于web应用程序中。2006年，WHATWG和万维网联盟决定进行合作，开发出新的HTML。随后经过双方的共同努力，HTML5终于在2014年面世。

2.1.2 新特点

HTML5提供了一些新的元素和属性，给开发人员带来很多便利。如canvas绘画元素，video和audio媒介回放元素等。

HTML5有很好的跨平台性和离线缓存功能。

HTML5增加了更多样化的应用程序接口（API）。

2.2搭建运行环境

在开发网站前先要电脑配置好网站的运行环境，Apache服务器、PHP脚本语言和MySQL数据库是当前主流的动态网站开发组合，组合的开源性和跨平台是其最突出的优势，是很多中小型网站开发的首选组合。Apache是一款基于C语言开发的专门用来提供HTTP服务的服务器，PHP是一种开源的多用途脚本语言，非常适用于Web开发，MySQL是一种开源的关系型数据库管理系统。本次毕业设计的网站后台我也将采用这种组合方式来进行开发。

第三章 系统分析

3.1 网站需求分析

现在网上有很多博客网站，功能也很完善，能给用户提供一个很好的分享空间。但是这些网站是面向大众的，这就意味着它有很多方面是受限制的，如果用户比较追求网页个性化样式的布局，显然这些网站是无法满足的。在具备网站开发知识的 3

基础上，自己开发一个博客类网站不仅能满足自身对页面设计的要求，而且能对在大学期间所学的知识进一步加深和巩固。

3.3.1 前台需求分析

分析viky博客类个人网站的用户需求：

（1）文章浏览：该板块浏览者可以根据自己的兴趣通过栏目板块进入文章列表，浏览不同的文章。

（2）文章查询：访客在文章列表可以通过搜索框找到自己想要的文章，搜索的关键字会和文章的标题进行比对。

（3）文章评论：访客在浏览完文章的时候可以对文章进行评论，给博主提供一些意见或询问相关问题。

（4）访客联系博主：访客可以通过网站下方的社交软件联系博主，也可以通过网站的留言面板联系博主。

（5）了解博主：访客通过介绍页面获得博主的一些基本信息。

3.3.2 后台需求分析

分析viky博客类个人网站的（博主）管理员需求：

（1）文章管理：该板块可以对文章进行添加、修改和删除。在添加完文章后，管理员可以对文章的标题、简介、内容、栏目、标签、图片进行再次修改。

（2）评论管理：管理员可以对评论进行筛选，对一些恶意评论进行删除。

（3）留言管理：管理员可以对留言进行筛选，对一些恶意留言进行删除。

（4）栏目管理：该板块可以对栏目进行添加、修改和删除。本网站虽然只固定了四个栏目，但是后续可能还会增加。管理员可以对栏目的标题和简介进行修改。

（5）用户管理：本网站只设置了一个管理员用户。

3.2 网站逻辑模型

根据网站的需求分析，我针对两个角色分别绘制了流程图：面向访客的流程图、面向管理员的流程图。运用逻辑的思维把系统所需的功能展示出来。

面向访客的流程图如图3-1所示。

4

图3-1面向访客的流程图

面向管理员的流程图如图3-2所示

图3-2面向管理员的流程图

根据上面两个流程图，我们可以得到一个网站系统基本功能的流程图，如图3-3所示。

5

图3-3网站基本功能流程图

3.3 数据库设计

根据之前分析的网站的需求分析，我会创建一下表单：管理员表，文章表，评论表，留言表，标签表，栏目表。然后找到各表之间的联系，绘制如图3-4的数据表结构图。

图3-4数据表结构图

6

第四章 静态页面实现

4.1 网站文件结构

在编写静态页面之前，先介绍一下本网站的文件结构，我在Apache的htdocs文件夹创建了一个vblog文件夹，里面放着本网站的所有页面和所需的类、库。admin文件夹放的是后台页面，assets文件夹放js、css和图片，database文件夹放连接数据库和操作数据库的PHP文件，lib文件夹放方法和类，upfiles文件夹放需要上传的图片，view文件夹放前端页面。

4.2 首页实现

首先创建一个名为index的HTML文件，网页的头部用header标签包裹，中间内容用类名为container的div标签包裹，尾部用footer标签包裹。我先进行css的初始化，在css文件夹新建一个文件，输入如下初始化代码，然后link到当前页面。Css的初始化包括对页面整体风格的设定和标签样式的初始化。

4.2.1 JavaScript导航栏

（1）导航栏的HTML部分

整个导航部分用div包裹，定义一个（.active）的div标签作为遮罩层，用ul和li标签来写一级和二级菜单。代码如下：

7

（2）导航栏的JavaScript部分

首先获取页面元素，定义一个当前位置current，用for循环lis元素给它绑定一个鼠标进入事件（mouseenter）和鼠标离开事件（mouseleave），当鼠标移动到某个li时调用animateX这函数遮罩层向当前li移动，鼠标离开遮罩回到原来位置。animateX是一个横向移动的缓动函数，函数的两个参数分别是移动的物体和移动的距离。下面一个if判断，如果循环到下标是2的li时，给这个lis[2]添加鼠标移入和移出事件，调用下面的fnNav函数对二级菜单进行显示和隐藏。循环代码如下。

for (var i = 0; i < ; i++) {

lis[i].addEventListener('mouseenter', function () {

animateX(mask, Left);})

lis[i].addEventListener('mouseleave', function () {

animateX(mask, current);})

if (lis[i] = 2) {

lis[2].onmouseover = function () {

fnNav(this, "block")};

lis[2].onmouseout = function () {

fnNav(this, "none")}; }}

导航栏最终效果如图4-1所示。

图4-1js二级菜单

4.2.2 CSS文字特效

首页开场文字动画，使用到CSS中的animation，效果是welcome字样会有一个字距由宽变窄的，颜色由黑色过渡到粉色的过程，然后vikyvika的字样会在welcome动画结束后下坠出现，HTML代码如下。

8

CSS动画部分代码如下。

文字的布局如图4-2所示。

图4-2css文字特效

4.2.3 jQuery页面滚动元素

首页的四个栏目特效运用了jQuery和它的插件smove，制作了一个3D向上翻的效果。首先引入jQuery和smove的库，然后把包裹着栏目的div标签里写上这段data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"代码，然后在页面的下面写一个函数就可以了，代码如下：

$('.block').smoove({offset: '40%'});

4.3留言页实现

留言页面需把向后台提交数据，这里要form表单标签把要提交数据的留言发送区域包裹起来，然后input框里name的名称一定要和数据库的对应的字段相同，不然到后期提交数据会提交不了。form表单的提交方法是post，绑定了一个checkSubmit的方法用于验证，表单里面则包裹多个div，div中包裹文字和输入框内。

4.3.1 JavaScript表单验证

既然要向数据库传数据，那么就要验证数据的正确与否，并向用户作出相应的提示。

（1）内容为空或错误的提示方法inputCheck：首先获取页面元素，包括表单，提示和所有的输入框。通过for循环，遍历每个输入框，当遇到类型为submit的输入框continue跳过，给剩下的输入框绑定失去焦点事件和获得焦点事件，然后给两个事件添加事件处理函数。

9

第一个失去焦点事件的处理函数，if语句判断输入框里的value是否为空，如果为空，输入框的颜色会变成粉红色，并且输入框的placeholder提示“此处不为空”，然后返回false。如果不为空则执行下一个if语句，判断输入的邮箱格式是否正确，这里运用到正则表达值，先定义了一个叫reg的变量来存放正则表达式，if语句判断，如果输入框的内容和正则表达式不符合且这个输入框的类型是email，就把提示的样式设为visible，然后返回false。最后else如果两条if语句都为真，则把提示的样式设为hidden，返回真。

第二个获得焦点函数，则把输入框的颜色变为蓝色，给输入框插入一个为空的占位符属性。在这个方法的下面调用这个方法。部分代码如下。

for (var i = 0; i < ; i++) {

if (inputs[i].type == "submit") continue;

inputs[i].addEventListener("blur", function () {

if ( == "") {

oundColor = "#f3d7ca";

older = "此处不为空";

return false;}}

错误提示效果如图4-3所示

图4-3错误提示

（2）内容为空阻止提交的方法checkSubmit：首先获取页面元素（表单、输入框），for循环遍历每个输入框，然后continue跳过表单提交按钮，再if语句判断输入框的value是否为空，如果为空弹出弹框，提示“所有内容不为空”，然后返回false。提示结果如图4-4所示。

图4-4弹框提示

10

4.3.2 JavaScript生成简单的验证码

（1）HTML部分

在表单最下面添加一个div，在div中添加一个span标签包裹“验证码：”，一个input输入框，再一个空span标签用来显示生成的验证码。

（2）JavaScript部分

随机生成验证码：首先定义一个全局变量code，在窗口加载是调用createCode方法，在方法中先把空字符赋值给code，定义一个codeLength变量来确定验证码的长度，并赋值为4，然后就是获取id为code的span元素，接着定义一个数组，里面存放大小写字母和数字。然后通过for循环和方法随机获取四个数组元素，然后把获取的元素存到code变量中，最后把code的值赋给验证码。

校验验证码部分：新建一个名为validate的方法，首先获取输入的验证码，然后将验证码通过toUpperCase方法转化为大写，同时也将显示的验证码转化为大写。然后通过if语句校验，如果输入的验证码长度为0，则弹出弹框提示“请输入验证码”，返回false。如果不为空则继续判断，如果输入的验证码与产生的验证码不同，则弹出弹框提示“验证码输入错误”，并重新调用createCode方法，刷新验证码，并把输入框清空，返回false。随后两个if语句都为true是返回true。最后要在checkSubmit函数中返回validate方法。

验证码生产代码如下：

var code;

function createCode() {

code = "";

var codeLength = 4;

var checkCode = mentById("code");

var random = new Array(数字和26个字母大小写);

for (var i = 0; i < codeLength; i++) {

var index = (() * );

code += random[index];

}

TML = code;

k = function () {

createCode();

}

验证码效果如图4-5所示。

11

图4-5验证码

4.3.3 onsubmit阻止表单提交

总结关于onsubmit阻止表单提交的两个注意事项：

1. onsubmit属性是由HTML表单内点击提交表单时触发的事件，且默认返回值为true，所以填值的时候不能只写函数调用，要在前面加上return。

2.

onsubmit属性的触发实际是在form表单用input：submit这样的button提交时才会触发。如果是用一个普通input:button，则在onclick属性中指定一个javascript函数，在这个函数里面再执行form的submit()函数，而不是onsubmit属性。

4.4 文章列表页实现

文章列表页的大体结构是上面一个form表单标签包裹的搜索输入框和输入按钮，下面是由一个个div标签包裹的文章列表块，文章列表块左边是图片区域，右边是详情区域，都用div标签包裹。把HTML结构写好然后再用css调整其样式，文章的列表页面就大致完成了。

4.4.1 点击返回顶部按钮

制作一个返回顶部的按钮，在文章列表滚动到第二个列表时，页面的右下角会出现一个返回按钮，点击按钮页面会缓动回到页面的顶部。

（1）HTML结构部分

定义一个（.slider）的div包裹一个（.up）的span标签，span标签中包裹着向上箭头图标，这个图标是引用Font Awesome图标区，只要在页面引入Font Awesome的样式，把字体库放到assets文件夹中，图标就可以被引用。返回按钮如图4-6所示。

图4-6返回按钮

（2）JavaScript部分

首先获取按钮元素，获取全部文章列表元素，获取返回图标元素，定义变量article2Top返回第一个文章列表相对body上方的偏移，这里注意要给body添加定位，不然offsetTop就不起作用了。再定义一个变量存放第一个文章列表相对body上方的偏移减按钮元素相对body的偏移。给document添加滚动事件，如果页面的 12

高度大于article2Top，就把按钮元素的样式变成浮动，返回图标的样式调整为block，否则把按钮元素的定位变成绝对定位，返回图标的样式调整为none。接下来给返回图标添加一个点击事件，当鼠标点击按钮页面缓动回到顶部，这里调用了纵向的缓动函数animationY。缓动函数是事前封装好的。

4.4.2 CSS伪元素制作提示框

鼠标移动到微信图标时，以提示框的形式显示微信二维码。提示框运用CSS的伪元素（：after）制作，该伪元素可以在元素之后添加元素而不扰乱文档本身。使用时搭配content属性，可设置在对象后发生的内容。伪类CSS代码如下：

提示框效果如图4-7所示。

图4-7微信提示框

4.5 其他前端展示页面

简介页和文章详情页的HTML布局和CSS样式比较简单，不做说明。

到此为止前端的展示页面全部完成，整个前端展示部分都是以粉色为主色调，个别区块用蓝色，局部效果如图4-8所示。

13

图4-8展示页面局部

4.6 后台系统页面

后台系统页面更多地运用了Bootstrap框架，Bootstrap框架是基于jQuery的，所以后台的每个页面都要引用jQuery库。下面将简单介绍Bootstrap框架。

4.6.1 Bootstrap网格系统

（1）所有内容必须包裹在容器（.container）或（.container-fluid）中，容器中可包含多个行（.row）。两个容器的区别（.container）是固定宽度，（.container-fluid）是100%宽度，代码如下：

（2）在行（.row）中可以添加列（.column），但列数之和不能超过12，列的类名一般格式是（.col-md-4）代码如下：

（3）在行（.row）中，列（.column）是其唯一的子元素，网页的内容可在列中书写。

下图是一个简单的网格排版，如图4-9所示：

14

图4-9Bootstrap网格系统

4.6.2 后台首页基本框架

首先插入（.container-fluid）的容器，容器内分为头部header，中间内容（.row）。在（.row）行内放两列，左边占2，右边占10。左侧导航栏用ul和li写一个二级菜单，右边是操作区域，操作区域再插入一行，一行分三列，在行下面放一个表格。后台首页的基本框架代码如下：

在区域里填充具体内容，效果如图4-10所示。

图4-10后台首页

15

4.6.3 Bootstrap模态框

模态框（Modal）是基于JavaScript的插件，可以为网站添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互。

首先提前编写好个人信息和二维码模态框的HTML结构，并给它们赋予id，然后在需要打开模态框的元素添加data-toggle=“modal”的属性,同时设置 data-target="" ，target里面的内容要跟模态框设定的id一样。

个人信息模态框如图4-11所示，微信二维码模态框如图4-12所示。

图4-11个人信息模态框

图4-12微信二维码模态框

第五章 实现动态开发

本章主要讲述通过PHP实现前端和后台的数据交互。

16

5.1 留言板动态开发

5.1.1数据库连接

留言板的数据流程是用户在前端将信息提交到PHP，然后PHP把数据插入数据库，在前端用PHP把数据显示出来。那么首先就要连接数据库，在database文件夹新建用来连接数据库，这里我用MySQLi的连接方式。

5.1.2 表单提交

插入数据：新建文件，引入刚刚写好的，设置时区，用$_POST["xx"]获取前台提交的数据，初始化时间格式$send_time = date("Y-m-d

H:i:s");，然后写SQL语句insert into 表名（字段名，、、）values（“值”，、、、）。用$conn->query()执行SQL语句，判断如果执行成功header连接到留言页面，失败echo“数据插入失败”。代码如下：

写完之后，返回留言的前端显示页面在form表单的action里填上的路径。发送测试，打开Navicat，打开留言的表单，会显示刚刚发送的留言数据。如图5-1所示。

17

图5-1留言表

5.1.3 留言显示

读取数据：返回留言的前端页面，首先引入，写SQL语句$sql = "sql语句";，然后$conn->query()执行SQL语句，然后$result->num_rows 返回结果集中的行数，用while ($row = $result->fetch_assoc()) 返回数据集的关联数组，并移动内部的数据指针，逐行输出数据。效果如图5-2所示。

图5-2留言显示

5.1.4 后台留言删除

（1）单条删除

新建，引入，用$_GET["xx"]获取留言的唯一id，创建SQL语句"DELETE from contact where id =" . $id，$()执行SQL语句，if语句判断执行成功弹出“删除成功”并回到留言管理页面，否则echo“删除失败”。

到留言管理页面，和之前获取数据的方法一样，在页面动态生成留言列表，这里列表的删除连接要连接到页面并且拼接该留言的id，代码如下：

href='../database/contact/?id=" . $row["id"]

留言管理页面如图5-3所示。

图5-3留言管理页面

（2）批量删除

如图4-3中所见，在动态生成数据的时候会生成了对应的CheckBox，在HTML结构中用form表单把全部内容包裹起来，批量删除会以表单提交POST的方式进行 18

删除。所以动态生成的时候，要在CheckBox的value上绑定留言的id。代码如下：

value= ".$row['id'] ."

新建,引入，用$_POST获区CheckBox的id，获取过来是一个数组，所以用implode（）函数把数组转化为字符串并用逗号隔开，创建删除留言SQL语句，执行SQL语句，判断。

（3）删除确认

最后用JavaScript写一个comfirm（）防止管理员误删操作，在点击删除的时先弹框是否删除，如果是再提交数据。

5.2 栏目动态开发

栏目的添加和删除和留言的添加和删除方法一致，下面对栏目的修改进行详细说明。

5.2.1 栏目修改

在栏目管理页面点击进入栏目修改页面，栏目修改页面应该存在默认值，所以在栏目管理页面的修改连接要把栏目的cid传过去。代码如下：

修改

然后在栏目修改页面用$_GET["xx"]获取cid并读取数据，修改页面如图5-4所示。

图5-4栏目修改页面

新建c_，引入，用isset（）函数判断是否获得cid，用POST方法获取管理员输入的数据，创建SQL语句UPDATE category SET cname = '$cname',

calias = '$calias',cdescription='$cdescription' WHERE cid=" . $cid，执行语句，判断。

19

5.3 文章页面的动态开发

文章页面的动态开发比之前复杂，因为涉及到四个数据表和图片的上传。

5.3.1 Simditor富文本编辑器

使用Simditor首先要引入它所需要的CSS和JS文件，在文章的添加页面插入一个textarea文本域并赋一个id，在页面下面用JS初始化编辑器，代码如下：

$(function() {

toolbar = ['bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul',

'blockquote', 'code', 'table', '|','link', 'image', 'hr', '|', 'indent', 'outdent', '|', 'alignment',];

var editor = new Simditor({

textarea: $('#content'),

toolbar: toolbar, //工具栏

defaultImage: '../assets/img/', //编辑器插入图片时使用的默认图片upload: {

url: '../lib/simditor/sim_', //文件上传的接口地址params: null, //键值对,

fileKey: 'fileData', //服务器端获取文件数据的参数名

connectionCount: 3,

leaveConfirm: '正在上传文件'

},});})

初始化成功后，在浏览器上看到效果如图5-5所示。

图5-5simditor文本编辑器

编写作为富文本的接收接口，PHP文件中要判断上传文件是否有错误，判断文件是否超过2bm，判断上传的文件是不是图片，最后把数据以json格式返回。

20

5.3.2 文章添加

新建一个art_的文件，把所有操作整合到这个文件中，首先引入，用if判断提交数据的方法是POST还是GET，然后定义一个变量$act来存传过来的操作。然后下面用switch语句选择判断执行哪段代码。代码如下：

if ($_SERVER['REQUEST_METHOD'] == "POST") {

$act = $_POST["act"];

} else if ($_SERVER['REQUEST_METHOD'] == "GET") {

$act = $_GET["act"];

} else {

$act = "";

}

switch ($act) {

······

}

在文章添加页面的form表单插入连个隐藏的input标签，用来判断进行添加操作。返回，在switch语句添加case ‘add’，在里面写文章添加的处理语句，前半部分的添加和之前写的一样所以不重复了，到判断文章插入的SQL语句成功后，这里添加一个if判断是否插入标签，如果有用SELECT LAST_INSERT_ID()语句查询最新插入的文章id，把id赋给$aid。然后用explode（）函数把刚刚获取的标签字符串转化为数组，创建SQL语句把标签插入到tag表中，这里要用foreach循环拼接。代码如下：

$tags = trim($_POST["tags"]);

// echo $tags;

if ($tags == "") {

echo "";

} else {

$sql = "SELECT LAST_INSERT_ID()";

$result = $conn->query($sql);

$row = mysqli_fetch_row($result);

$aid = $row[0];

$tname = explode(",", $tags);

$sql = "insert into tag (aid,tname) values";

foreach ($tname as $v) {

$sql .= "(" . $aid . ",'" . $v . "'),";

}$sql = rtrim($sql, ",");

21

5.3.3 文章修改

文章修改页面也需要把文章id传过来，让修改页面有默认内容，操作和之前的栏目修改一样。这里文章表和栏目表是分开的，所以在栏目显示的上方再做一次查询，然后取出所以栏目，在input标签里写一个判断，如果文章表的cid等于栏目表的cid就把当前栏目选中，用checked属性。在form表单中也要加入两个隐藏的input框，一个传upload方法，一个传文章的aid。代码如下：

文章修改页面如图5-6所示。

图5-6文章修改页面

文章修改操作代码部分：在里添加case ‘upload’，前面的修改语句和栏目的一样用update更新数据库就可以了，之后判断执行成功后再添加判断来判断是否有标签插入。如果有则先把标签表里所有对应文章的标签删除，再插入新的标签。部分代码如下：

$tags = trim($_POST["tags"]);

if (empty($tags)) {

echo "";

} else {

$sql = "delete from tag where aid =" . $aid;

$conn->query($sql);

22

5.3.4 文章删除

删除文章的同时把文章的评论一并删除，写一个case ‘del’，用GET方法获取文章id，执行SQL语句，执行成功后用if判断，如果成功再执行一条删除文章对应评论的SQL语句，再执行成功后弹出“删除成功”并返回到文章列表页面，如果失败显示“删除失败”。

5.3.5 后台文章显示列表

文章显示列表中，要有栏目的显示，但是文章表和栏目表是分开的，所以这里用到了两表联查，SQL代码如下：

select aid,acomment,atitle,cname,atime,tags from article left join category on

= order by aid desc

5.4 其他页面开发

后台还剩下评论、登录、登出页面的动态开发，因为大多数操作相同，所以在这节统一分析。

5.4.1 评论的添加和删除

评论的添加、删除操作和留言的添加、删除操作基本相同，评论的添加要在数据插入成功的时候文章表的评论数加一，评论删除成功的时候文章表的评论数要减一。代码如下：

$sql = "update article set acomment=acomment-1 where (aid=" . $aid . ")";

$sql = "update article set acomment=acomment+1 where (aid=" . $aid . ")";

5.4.2 登录和登出

（1）登录

登录的操作代码直接写在登录页面，先用isset（）判断数据是否提交，POST方法获取输入的用户名和密码，创建SQL语句把查询是否有这个用户，把查询结果写入$result中，再以数组$row形式存储数据库查询语句的返回结果，判断如果row不为空，则跳转到后台系统首页，否则提示“用户或者密码错误”。

（2）退出

新建一个logout的PHP页面，把页面连接到登录页面。在首页退出登录按钮

连接到即可。

5.4.3 文章搜索

文章搜索的功能以表单提交的方式进行开发，首先新建一个article_页面，HTML内容和文章列表页面相同。

23

这里的文章搜索是搜索本栏目的文章，所以要获取栏目cid和搜索框输入的key，通过SQL的模糊查询得到结果，然后显示到页面。文章搜索页面如图5-7所示。

图5-7文章搜索页面

第六章 登录安全

网站的登录页面虽然已经做好，但是我们任然可以通过URL路径进入到后台管理，所以我们要做一个登录验证，判断管理员是否登录了。

6.1 使用Session判断用户登录

6.1.1 Session工作原理

假设一个服务器使用了Session，工作流程如图6-1所示。

图6-1session工作流程图

24

6.1.2 判断用户登录

新建，新建logged_in函数返回是否获取session_id，再创建一个confirm_logged_in函数判断第一个函数返回的值，如果没有获得session_id就返回登录页面。代码如下:

session_start();

function logged_in()

{return isset($_SESSION['id']);}

function confirm_logged_in()

{if (!logged_in()) { header('Location:');}}

然后在每个后台页面都加入这个，然后调用confirm_logged_in()，在登录页面的上面加上session_start();，登录成功后把用户id给session。

第七章 功能测试

7.1 前端显示页面测试

表7-1 前端显示页面测试表

测试内容

导航栏转跳

栏目转跳

从文章列表跳转到文章详情

社交图标点击外链接转跳

微信的二维码出现和隐藏

留言错误提示 输入错误内容 输入框背景色变红，提示语成功出现

留言提交和显示 输入内容

点击按钮

评论错误提示 输入错误内容 输入框背景色变红，提示语成功出现

测试成功

留言提交成功，成功显示到页面 测试成功

测试成功

鼠标滑过 二维码成功出现 测试成功

鼠标点击 成功转跳到对应页面 测试成功

操作

鼠标点击

鼠标点击

鼠标点击

结果

成功转跳到对应页面

成功转跳到对应的文章列表

成功跳转到对应的文章详情页面

结论

测试成功

测试成功

测试成功

25

评论提交和显示 输入内容

点击按钮

评论提交成功，成功显示到页面 测试成功

7.2 后台系统操作测试

表7-2 后台系统操作测试表

测试内容

管理员登录信息输入，登录验证

栏目添加

操作

1. 填写正确的用户名和密码

2. 填写错误的用户名和密码

添加新的栏目，编辑后点击按钮

栏目删除

文章添加

点击删除栏目的连接

添加新的文章，编辑后点击按钮

文章修改 点击进入修改页面，编辑后点击按钮提交

文章删除 点击删除文章的连接

系统提示删除成功 测试成功

系统提示添加成功，返回文章列表

系统提示修改成功，返回文章列表

系统提示删除成功，返回文章列表

留言删除 点击删除留言的连接 系统提示删除成功，返回留言列表

评论删除 点击删除评论的连接 系统提示删除成功，返回评论列表

测试成功

测试成功

测试成功

测试成功

测试成功

结果

1. 登陆成功

2. 登录失败

系统提示添加成功 测试成功

结论

测试成功

该章节进行了一系列网站前端页面操作测试，以及后端管理系统测试，通过表格列出的项目进行一系列的测试之后发现一切功能均运行正常，无不良情况发生。

26

第八章 总结与展望

8.1 总结

毕业论文工作开始到今天是一个迷茫到煎熬到明了的状态，虽然都是觉得这个论题对于我来说是可以完成的，但是到了写开题报告的时候我都没弄明白一个网站系统的制作流程，当时的开题报告初稿也是写得一言难尽。在这几个月的奋战期，一开始真的是困难重重，连网站要用的图片我都重画了三次，每次完成又被否决的时候心里真的煎熬。到后来通过不断的学习，我终于看到了曙光。网站一次又一次的报错，我一次又一次的修改代码，这个过程让我对网站建设有了更深刻的了解。这是我第一次搭建个人网站，由于自身的理论和实践水平有限，网站依然存在很多不足，希望日后能通过自己的不断学习和努力完善这个网站。

8.2 展望

本项目的个人博客类网站还处于初步开发阶段，值完成了比较基础的功能，网站还有很多功能要补充，以下几个方面，还要进一步完善。

（1）本网站的页面做的不够丰富，页面还是比较单调，在CSS样式的运用上也不够灵活，页面看起来略微死板。

（2）在运用PHP传递数据时页面的转跳问题没有得到很好的解决，可以通过ajax来实现，希望日后通过学习能解决这个问题。

（3）站主和用户的交互性不足，现在实现的功能基本是单方面，希望后期可以完成评论和留言的回复功能。

参考文献

[1] 赵燕萍. 论个人网站的建设与应用[J]. 科学之友, 2011(01):159-160.

[2] 周灵,王莉莉,宋燕燕,段红秀,李云琳. 一种基于HTML5的品牌宣传网站设计[J]. 计算机时代(8期):19-22.

[3] 王曼. 设计动态网站的最佳组合：Apache+PHP+MySQL[J]. 电子制作, 2014,

000(007):85-85,84.

[4] 葛蓝. 基于HTML5+CSS3的网页布局[J]. 数字技术与应用, 2017(10):102-103.

[5] 潍坊网站建设.博客已死 个人网站还有戏吗?.潍坊网站建设，2018.8.

[6] 隋欣, 赵玲, 张欣, et al. 基于PHP的"接钥匙"装修网站的设计与实现[J]. 电脑知识与技术, 2019, 015(015):92-93.

[7] 戴维. 基于Bootstrap的响应式网页设计[J]. 电脑编程技巧与维护, 2018,

000(011):132-133,166.

[8] 刘磊. 基于Web框架的博客管理系统设计与实现[J]. 计算机时代, 2017(5).

27

[9] 孙强等.Java Script 从入门到精通.北京·清华大学出版社,2012-09.

[10] 陈勇, 谢雪环, 成筠. 基于PHP的个人博客系统[J]. 福建电脑, 2009,

025(009):147,149.

28