搭建项目要实现的是个人博客,前端实现博客界面的展示。采用了HTML+CSS+JS的方式搭建。
该项目要实现的是个人博客,前端实现博客界面的展示。
后台实现管理博客,添加博客文章,注册和登录,文件上传等功能。
源码:https://pan.baidu.com/s/1xSlK1RdW4sMWv2bN5_CY1Q 提取码: 565s
项目内容:
前端:
包括了基本是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这个表,主要是用来存储博客的系统设置。
两个核心代码,用来与数据库建立连接与操控:
感觉有用的点个收藏吧,有什么问题也可以在评论区评论,看见了会回复的,欢迎大家一起交流。