前言
搭建项目要实现的是个人博客，前端实现博客界面的展示。采用了HTML+CSS+JS的方式搭建。
- 项目目的
该项目要实现的是个人博客，前端实现博客界面的展示。
后台实现管理博客，添加博客文章，注册和登录，文件上传等功能。
源码：https://pan.baidu.com/s/14hd3wfC5AM77BGKcj5tPOA
提取码：jp91
项目内容
项目内容：
前端：
包括了基本是HTML标签，例如div、li、p、img、ol、li、a等标签。
css样式的设置，JavaScript的应用，如轮换图。以及bootstrap的框架使用。
后台：
实现了登录与注销账号，注册账号，与数据库的互联，并且添加数据或修改已有数据到数据库中。
验证是否登录使用了session。
支持文件的上传与下载。
项目过程
前端：
这里不会放过多详细的css样式代码，不然会显得本篇报告内容过于冗余。具体代码我会放在文章开头，需要查看的话可以自行下载。
首先通过代码读取数据库的博客标题和内容，传入到数组中以供后面使用。
设计总体布局，前台页面总共有三大div，分别是导航栏，左侧文章内容，右侧网站介绍等。如图所示。
首先设计的是最上端的导航栏，其中左侧是博客名字，调用的是数据库里的信息。
然后是右侧的标题栏，也是用了a标签，鼠标覆盖到上方会变色。然后点击登录会跳转到后台管理系统。
左上方的图片运用了JavaScript样式，实现图片自动轮换以及点击切换的效果。
以下的部分代码的展示。
左侧文章推荐，是在html里嵌套了php代码，
读取了数据库中的文章数据并调用。并且实现单击文章标题，能够跳转到详情页。这个详情页面没有详细设计，只是简单的设计了一个能够看见文章内容的页面。
网站图片如下：
单击标题跳转后：
跳转后的页面也是能够读取数据库的内容然后展示。
读取数据库代码如下：
再引用数据库内容。
右侧使用了无序列表，使用了图片当做图标。其中鼠标放在图片上时，图片会改变，实现鼠标移动到上方变色的效果。
css样式代码如下：
下方的文章排序推荐运用了JavaScript，鼠标放在点击排行与放在最新文章或者站长推荐的内容是不一样的。文章标题的内容是根据数据库存取的数据，通过php语言读取的。
代码如下：
标签云，鼠标放上去时会改变外观，变成正方形。
图文推荐，也是用的php语言嵌套进去。
最后就是友情链接，这个没有什么特别的地方，就是列表和a标签。
后台：
后台的详细解释在代码部分都有注释，所以在这里就只是介绍他的功能。
在首页界面点击登录，跳转到后台登录界面。
后台的界面大多数都是使用了bootstrap框架，方便布局，重点放在php语言与数据库的操作。比如这个登录界面的背景是能够跟随这鼠标移动的一个界面。
界面图：
代码：
背景实现：
注册账号：
界面和登录差不多。如图所示：
代码：
进入到管理界面：
导航栏有三个选项分别对应三个不同的功能，右上方的登录的账户名。
代码如下：
单击博客管理，界面如上图。能够读取数据，并且实现修改、添加和删除。
代码如下：
添加或者修改博客。
界面如图：如果是添加博客，则默认内容为空，如果是修改博客，则导入对应博客内容。
代码如下：
在此处嵌套了一个script，实现文件的上传。
调用了另外一个php文件，代码如下：
管理员管理：能够修改和删除管理员信息，添加新管理员
代码如下：
管理员添加或修改：
代码：
系统管理：实现修改博客的标题，作者简介，以及博客管理的分页数。
代码如下：
退出登录：
点击右上角的用户名，能够有退出选项。
点击后执行代码，清空session
至此，后台的整体功能都已经实现。还有几个要点是，在后台的代码最前端，都是加载了check.php来验证是否登录。
在HTML代码中，也加载了header.inc.php来引用css和js样式。
加载了nav.inc.php来实现上方导航栏。
这样的做法是可以实现代码的复用，不用每次制作的时候都重新写一遍代码或者复制一遍代码。使代码更加简洁。
还有一个整体配置文件config.php，在check.php,login.php，register.php中被导入。
数据库：
建立了一个数据库blog，包含了三个表格。admin这个表示用来存储后台管理员注册和登录的数据，即账户和密码。page这个表主要是用来存储博客信息。最后给出setting这个表，主要是用来存储博客的系统设置。
两个核心代码，用来与数据库建立连接与操控：
项目展示
总结
感觉有用的点个收藏吧，有什么问题也可以在评论区评论，看见了会回复的，欢迎大家一起交流。