个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)

前言

搭建项目要实现的是个人博客,前端实现博客界面的展示。采用了HTML+CSS+JS的方式搭建。

  1. 项目目的

该项目要实现的是个人博客,前端实现博客界面的展示。

后台实现管理博客,添加博客文章,注册和登录,文件上传等功能。

源码:https://pan.baidu.com/s/1xSlK1RdW4sMWv2bN5_CY1Q 提取码: 565s

项目内容

项目内容

前端:

包括了基本是HTML标签,例如div、li、p、img、ol、li、a等标签。

css样式的设置,JavaScript的应用,如轮换图。以及bootstrap的框架使用。

后台:

实现了登录与注销账号,注册账号,与数据库的互联,并且添加数据或修改已有数据到数据库中。

验证是否登录使用了session。

支持文件的上传与下载。

项目过程

前端:

这里不会放过多详细的css样式代码,不然会显得本篇报告内容过于冗余。具体代码我会放在文章开头,需要查看的话可以自行下载。

首先通过代码读取数据库的博客标题和内容,传入到数组中以供后面使用。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第1张图片

设计总体布局,前台页面总共有三大div,分别是导航栏,左侧文章内容,右侧网站介绍等。如图所示。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第2张图片

首先设计的是最上端的导航栏,其中左侧是博客名字,调用的是数据库里的信息。

然后是右侧的标题栏,也是用了a标签,鼠标覆盖到上方会变色。然后点击登录会跳转到后台管理系统。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第3张图片

左上方的图片运用了JavaScript样式,实现图片自动轮换以及点击切换的效果。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第4张图片

以下的部分代码的展示。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第5张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第6张图片

左侧文章推荐,是在html里嵌套了php代码,
读取了数据库中的文章数据并调用。并且实现单击文章标题,能够跳转到详情页。这个详情页面没有详细设计,只是简单的设计了一个能够看见文章内容的页面。

网站图片如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第7张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第8张图片

单击标题跳转后:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第9张图片

跳转后的页面也是能够读取数据库的内容然后展示。

读取数据库代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第10张图片

再引用数据库内容。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第11张图片

右侧使用了无序列表,使用了图片当做图标。其中鼠标放在图片上时,图片会改变,实现鼠标移动到上方变色的效果。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第12张图片

css样式代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第13张图片

下方的文章排序推荐运用了JavaScript,鼠标放在点击排行与放在最新文章或者站长推荐的内容是不一样的。文章标题的内容是根据数据库存取的数据,通过php语言读取的。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第14张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第15张图片

代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第16张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第17张图片

标签云,鼠标放上去时会改变外观,变成正方形。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第18张图片

图文推荐,也是用的php语言嵌套进去。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第19张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第20张图片

最后就是友情链接,这个没有什么特别的地方,就是列表和a标签。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第21张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第22张图片

后台:

后台的详细解释在代码部分都有注释,所以在这里就只是介绍他的功能。

在首页界面点击登录,跳转到后台登录界面。

后台的界面大多数都是使用了bootstrap框架,方便布局,重点放在php语言与数据库的操作。比如这个登录界面的背景是能够跟随这鼠标移动的一个界面。

界面图:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第23张图片

代码:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第24张图片

背景实现:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第25张图片

注册账号:

界面和登录差不多。如图所示:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第26张图片

代码:

进入到管理界面:

导航栏有三个选项分别对应三个不同的功能,右上方的登录的账户名。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第27张图片

代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第28张图片

单击博客管理,界面如上图。能够读取数据,并且实现修改、添加和删除。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第29张图片

代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第30张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第31张图片

添加或者修改博客。

界面如图:如果是添加博客,则默认内容为空,如果是修改博客,则导入对应博客内容。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第32张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第33张图片

代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第34张图片

在此处嵌套了一个script,实现文件的上传。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第35张图片

调用了另外一个php文件,代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第36张图片

管理员管理:能够修改和删除管理员信息,添加新管理员

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第37张图片

代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第38张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第39张图片

管理员添加或修改:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第40张图片

代码:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第41张图片

系统管理:实现修改博客的标题,作者简介,以及博客管理的分页数。

代码如下:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第42张图片

退出登录:

点击右上角的用户名,能够有退出选项。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第43张图片

点击后执行代码,清空session

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第44张图片

至此,后台的整体功能都已经实现。还有几个要点是,在后台的代码最前端,都是加载了check.php来验证是否登录。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第45张图片

在HTML代码中,也加载了header.inc.php来引用css和js样式。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第46张图片

加载了nav.inc.php来实现上方导航栏。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第47张图片

这样的做法是可以实现代码的复用,不用每次制作的时候都重新写一遍代码或者复制一遍代码。使代码更加简洁。

还有一个整体配置文件config.php,在check.php,login.php,register.php中被导入。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第48张图片

数据库:

建立了一个数据库blog,包含了三个表格。admin这个表示用来存储后台管理员注册和登录的数据,即账户和密码。page这个表主要是用来存储博客信息。最后给出setting这个表,主要是用来存储博客的系统设置。

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第49张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第50张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第51张图片

两个核心代码,用来与数据库建立连接与操控:

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第52张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第53张图片

项目展示

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第54张图片

个人博客搭建(含源码,数据库文件下载)(前端HTML+CSS+JS 后台PHP+Mysql)_第55张图片

总结

感觉有用的点个收藏吧,有什么问题也可以在评论区评论,看见了会回复的,欢迎大家一起交流。

你可能感兴趣的:(数据库)