本系统将实现下列基本目标:
博客管理系统主要由博文管理、图片管理、好友管理、用户管理模块组成
(1)博文管理模块主要由上传博文、浏览博文、查询博文、删除博文、评论查看添加、评论删除功能组成。
(2)图片管理模块主要由上传图片、浏览图片、删除图片功能组成。
(3)好友管理模块主要由添加好友、删除好友、查询好友功能组成。
(4)用户管理模块主要完成用户个人信息设置功能。
博客系统的功能结构如下
大概流程如图所示
第一次看学长的代码,发现创建表时末尾有一行代码,看不太懂,了解如下
CREATE TABLE `books` (
`isbn` int(10) NOT NULL,
`title` varchar(50) DEFAULT NULL,
`author` varchar(50) DEFAULT NULL,
`publisher` varchar(50) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
1.ENGINE=InnoDB使用innodb引擎,从zhidaoMySQL 5.6开始默认使用该引擎
2.DEFAULT CHARSET=utf8 数据库默认编码为utf-8
还有其他参数,想要了解的可以看这个链接:参考链接
学长给的代码里是这样设置的,参考链接后设置如下,mysql时区问题解决几种方法
SET time_zone = "+00:00"; # 学长示例
set global time_zone = '+8:00'; # 修改mysql全局时区为北京时间,即我们所在的东8区
set time_zone = '+8:00'; # 修改当前会话时区
flush privileges; # 立即生效
经过上面的步骤我们已经创建好数据库,现在我们建立与博客管理系统的模式,这部分我建立了五张表,分别为:
用户表,主要属性为注册id,注册姓名,注册密码,注册qq,注册邮箱,性别,是否登录,是否为超级管理员
-- 用户表adminuser
CREATE TABLE `adminuser` (
`regid` int(11) UNSIGNED AUTO_INCREMENT NOT NULL,
`regname` varchar(20) NOT NULL,
`regpwd` varchar(100) NOT NULL,
`regqq` varchar(20) DEFAULT NULL,
`regemail` varchar(50) NOT NULL,
`regsex` varchar(10) DEFAULT NULL,
`islock` int(11) NOT NULL DEFAULT 0,
`fig` int(11) NOT NULL DEFAULT 0,
PRIMARY KEY (`regid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
博文表,主要属性为博文id,类型,博文题目,内容,作者,提交时间
-- 博文表 article
CREATE TABLE `article` (
`id` int(11) UNSIGNED AUTO_INCREMENT NOT NULL,
`type_id` int(11) NOT NULL,
`title` varchar(200) NOT NULL,
`content` text NOT NULL,
`author` varchar(20) NOT NULL,
`pubtime` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
评论表,主要属性为评论id,博文id,评论人,评论内容,评论时间
-- 评论表 comment
CREATE TABLE `comment` (
`id` int(11) UNSIGNED AUTO_INCREMENT NOT NULL,
`fileid` int(11) NOT NULL,
`username` varchar(20) NOT NULL,
`content` text NOT NULL,
`comtime` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
图片表,主要属性为图片id,图片名,作者,发表时间
-- 图片表 pictures
CREATE TABLE `pictures`(
`id` int(11) UNSIGNED AUTO_INCREMENT NOT NULL,
`picname` varchar(30) NOT NULL ,
`user` varchar(50) NOT NULL ,
`time` datetime NOT NULL,
PRIMARY KEY (`id`)
)ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
好友表,本人id,好友id,好友姓名
-- 好友表
CREATE TABLE `friends`(
`id` int(11) NOT NULL,
`fid` int(10) NOT NULL ,
`fname` varchar(50) NOT NULL ,
PRIMARY KEY (`id`)
)ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
文章类型表,博文类型id,博文类型名称
-- 博文类型表 article_type
CREATE TABLE `article_type` (
`type_id` int(11) UNSIGNED AUTO_INCREMENT NOT NULL,
`type_name` varchar(30) NOT NULL,
PRIMARY KEY (`type_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
创建好模式后执行将其真正创建,具体的执行过程如图所示:
创建好的关系模式如图所示
在自己的程序里如何连接数据库呢?这部分运用PHP MySQL实现比较简单,具体代码如下
const HOST = 'localhost';
const USER = 'root';
const PASS = '********';
const DBNAME = 'myblog';
// 连接mysql
$link = @mysqli_connect(HOST, USER, PASS, DBNAME) or die("ERROR: CANNOT CONNECT TO DATABASE!");
// 编码设置
mysqli_set_charset('utf8',$link);
<a href="#">a>
<a href="#" οnclick="window.close()">关闭a>
写法1
<nav>
<ul>
<li><a href="#">Homea>li>
<li><a href="#">Abouta>li>
<li><a href="#">Contenta>li>
ul>
nav>
写法2
<div class="nav">
<ul>
<li><a href="#">Homea>li>
<li><a href="#">Abouta>li>
<li><a href="#">Contenta>li>
ul>
div>
写法3
<nav>
<h1>Navigationh1>
<p>Welcome to my website.
<a href="/blog">my bloga>
You can find my books and papers in the
<a href="/publications">publicationa>
section. If you are interested in my work···
<a href="/contact">herea>
.p>
nav>
原文链接:https://blog.csdn.net/ziquqileccc/article/details/103260091
元素选择器根据元素名称来选择 HTML 元素,在这里,页面上的所有
元素都将居中对齐,并带有红色文本颜色:
p {
text-align: center;
color: red;
}
id 选择器,使用 HTML 元素的 id 属性来选择特定元素,元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!要选择具有特定 id 的元素,写一个井号(#),后跟该元素的 id, 这条 CSS 规则将应用于 id=“para1” 的 HTML 元素:
#para1 {
text-align: center;
color: red;
}
CSS 类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素,写一个句点(.)字符,后面跟类名。在此例中,所有带有 class=“center” 的 HTML 元素将为红色且居中对齐:
.center {
text-align: center;
color: red;
}
HTML 元素也可以引用多个类,类名不能以数字开头!
查看表格如下,详细信息可点击这个链接查看
CSS样式的优先级定义如下,页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表,其中第一优先级最高:
所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。下图展示了框模型:
box-shadow属性向box添加一个或多个阴影,语法:
box-shadow: offset-x offset-y blur spread color inset;
词解释:blur:模糊 spread:伸展 inset:内凹
参数解释:
原文链接:https://blog.csdn.net/qq_44607694/article/details/89605857
这里我将页眉与导航栏合并为一个,实现效果如下,这里在点击首页 登录 注册 关于时会弹出相应界面,并且已登录后还会显示个人中心以及退出按钮,但是相关的连接代码还未实现,暂时用本地页面链接实现(2021-11-19)
后期发现这个界面有点单调,和登陆界面一样加上背景就好看多了,效果图
页眉导航栏HTML实现代码如下,导航栏的CSS样式header.css借鉴了网上的代码修改而成:参考链接1,参考链接2 在文末有链接可自行下载
博客登陆界面可以按照平时所习惯的登陆界面设计,网上有很多样式,可以仿照修改,我主要参考了下面几个博客
漂亮的登录界面中的css示意图
HTML+CSS实现炫酷的登录界面
一个简约精美的登录页面(HTML+CSS)
实现效果如下,用户输入用户名和密码后可以登录,若没有账号可返回注册界面,若忘记密码则执行相应操作(暂时还没想好怎么处理),可以选择记录登入信息,存入到缓存中(2021-11-20)
课上看了朋友的界面,再次对界面进行修改美化,实现效果如下
登陆界面HTML实现代码如下,登陆界面CSS样式login.css部分文末有源代码链接,如有需要可点击下载(2021-11-19)
博客登录
博客登录