基于HTML的博客系统设计与实现 源代码,基于HTML5的个人网站的设计与实现.docx

内容摘要

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

本项目中涉及到的工作流程有：前期网站运行环境(包括服务器的搭建，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 idol.Visitors can browse and comment on articles，also leave a message to blogger.Administr-

ators can add, delete and change the data of website.This website uses HTML5 to design pages, uses PHP to achieve data interaction, uses MySQL to establish a database.The software used in website design and production includes but is not limited to Illustrator (website interface pictures), VisualStudioCode (code writing), Mysql (website database), draw.io, 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 后台留言删除