开源项目：张帅我的博客

时间  2019-11-12
标签 开源 项目 我的 博客 繁體版
原文   原文链接

开源项目：张帅我的博客

【实战】如何经过html+css+mysql+php来快速的制做动态网页（以制做一个博客网站为列）php

为完成学校的期末课程设计，花了将近两个月闲暇之余，制做了一个简单的博客网站。下面我将这几天的操做流程来讲一下，在原文末会贴上部分代码，也会给出下载连接。（闲复制代码麻烦的能够到下载地址这里直接下载 )css

GitHub下载: 点击下载html

码云下载：点击下载前端

codding下载：点击下载mysql

oschina下载：点击下载jquery

百度网盘：点击下载git

CSDN下载：点击下载github

个人博客网站地址：http://myblog.zh66.clubweb

制做前景：sql

想拥有一个本身独自开发的一个小型博客网站，能发布博文管理博文实现前台展现。

记住Armani_MyBlog /admin/lib/config.php修改里面数据库配置信息便可运行

本博客项目基本概述：

​ 本项目使用php编写后台，前台功能基本完善，有顶部菜单和侧栏菜单底部菜单，支持首页展现功能，文章功能，文章包括列表显示和单篇文章显示功能，分页分类显示功能，友链添加功能，用户评论功能，相册功能，关于我页面，留言版功能，支持文章页下评论和已有评论的预览及引入QQ头像显示功能，用户未填写则默认显示，还有慢生活，包括扩展的更多功能，可登陆后台，打赏做者，发送邮件功能（邮件能够发送），友情连接的显示，等待扩展功能，拥有后台结构编写完成，文章发布删除添加修改，评论区的删除审核，友链的添加删除审核，系统日志功能记录了每一条SQL语句，后台登陆记录，数据库sql脚本文件已经放到根目录文件夹中。

主要开发流程简介

了解了动态网站的概念事后，咱们做为开发者更多想到的就是如何具体开发一个动态网站应用程序，有那些具体的工做，流程是怎样的？

正常状况下，咱们大概会有以下几个阶段：

需求分析：分析咱们这个应用程序到底要去作哪些功能，应对哪些业务。

原型设计：根据需求分析的结果规划应用程序的原型，能够理解为“打草稿”。

UI 设计：将“草稿”转换为设计稿，并提供相应的产物（设计稿、静态页面）。

技术选型：根据业务场景分别选择对应的技术栈（数据库技术栈、后端技术栈、前端技术栈），通常考虑的因素：人、业务。

数据库设计：根据需求和原型分析咱们有哪些类型的数据须要存，从而获得咱们数据库的基本结构。

项目架构设计：俗称搭架构，其中具体的操做主要就是制定项目规范约束、建立基本的项目结构、编写基础的公共模块代码和组织代码。

业务迭代开发：开发者的平常，基于项目架构（条条框框）下完成各项业务功能。

集中测试：将全部功能模块整合到一块儿事后，集中测试业务功能是否有 BUG，是否知足需求。

部署上线：从开发环境向生产环境转换，就是把应用部署到服务器上。

开发环境的搭建

（1）apache+php+mysql环境搭建

由于要用apache来作服务器，mysql做为数据库来存储数据，php来写代码以此实现网页与数据库的交互数据，因此须要下载上述软件，但上述软件的安装环境、配置很麻烦，因此在这里用了一个功能强大的集成软件WampServer具体的安装方法可见连接（点击打开连接）

WampServer是Windos Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。PHP扩展、Apache模块，开启/关闭鼠标点点就搞定，不再用亲自去修改配置文件了，WAMP它会去作。不再用处处询问php的安装问题了，WAMP一切都搞定了。

固然，也有可能启动Apache时候出现错误，这里给出连接（点击打开连接），若是apache启动有错误能够参考上面这个连接来解决问题。

（2）数据库客户端软件Navicat

直接在cmd命令控制台操做数据库并不方便，不够直白，固然也能够直接用phpmyadmin来操做（上述WampServer软件包安装以后在浏览器输入localhost/phpmyadmin/便可打开），可是phpmyadmin来操做也不方便，这里便采用Oracle公司出品的数据库客户端Navicat，这里仍是给出连接（点击打开连接），按照教程中的要求下载便可。

点击链接，输入链接名root，主机名和端口号都不用变，这里的用户名和密码。若是是你用的是WampServer，那么用户名是root，密码为空；若是不是用的是WampServer安装的，按照你设置的用户名和密码登陆便可。填写完毕以后点击链接测试，没有问题直接肯定便可链接好数据库。

连接测试完成后，新建数据库名称为你的项目名称，最后要在admin配置文件中修改数据库链接名。上图10张表是博客后台数据存放的文章评论分类等内容，用户能够根据本身需求添加修改，里面有部分测试数据。

此外你要是想掌握数据库，简单来说你想对数据库的任何操做，都必须操做sql语句，总的来讲分为四个操做：增删改查。

①增：向数据库写入数据

语句：insert into users (`username`,`password`) values ('name','passwd')

（ps新手必定要注意这离users这个数据表后面的``这个符号是在tab键上方的引号，而values后面的就是个单引号）

②删：删除已有数据

语句：delete from users WHERE id='3'

③改：修改数据

语句：update set users username='新值', password='新值' WHERE id=3

④查：从数据库读取数据

语句：select * from users where id>1 order by id desc limit 0,2

若是你想进一步深刻的了解mysql语句的话，看一下这里的链接，（点击打开连接）链接给出了这四个操做的具体参数的详解，要想用数据库必定要掌握这四个操做。

（3）HTML+PHP网页的编写工具Visual Studio Code

Visual studio code 版是一款免费开源的现代化轻量级代码编辑器，支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片断、代码对比 Diff、GIT 等特性，Visual studio code针对网页开发和云端应用开发作了优化。

官网下载地址：点击下载

Visual Studio Code编辑器也集成了全部一款现代编辑器所应该具有的特性，包括语法高亮（syntax hight lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片断收集（snippets）。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。运行很是快速。

Visual Studio Code 的快捷键设置是统一管理的，因此你只须要修改一个文件就能够了。咱们先来看看 Visual Studio Code 的经常使用快捷键。

下面开发环境和开发软件，及数据库已准备完毕，咱们就进入了博客的开发环节

博客网站的书写

1.整体框架

首先在这里我先介绍一下个人整体框架，讲解一下，让你们先熟悉一下配置文件，好根据需求进行相关修改。

  • Armani_MyBlog 是项目的名字
  • admin文件夹里面存储的是后台界面配置文件
  • bootstrap文件夹里面存储的是bootstrap框架
  • css文件夹存储网页的样式文件
  • font文件夹是存储字体的相关文件
  • images文件夹存放了网站中的图片
  • js文件夹存储网站中的因此js引用文件
  • log文件夹存储网站运行过程当中的日志信息
  • public文件夹里放着如下网页的公共部分代码
  • Uploads文件夹是存储从本地上传到服务器的图片信息
  • index.php文件是网站的首页
  • about.php文件是关于个人我的介绍
  • article.php文件是文章的浏览页面
  • gbook.php文件是留言页面还没有开发
  • info.php文件是慢生活页面讲述了
  • link.php文件是友情连接展现页面
  • list.php文件是文章的分类展现页面
  • share.php文件是好图分享页面
  • login.php文件是前台登陆页面

后台页面将另行介绍，下面介绍一下博客中用到的几张数据库表

数据库表中的设计在这里我给出以下代码，方便你们参考学习！

user这个表示用来存储后台管理员注册和登陆的数据，即帐户和密码：

CREATE TABLE `user` (
  `user_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '用户id',
  `name` char(20) NOT NULL DEFAULT '' COMMENT '用户名',
  `password` char(32) NOT NULL DEFAULT '' COMMENT '用户密码',
  `email` char(30) NOT NULL DEFAULT '' COMMENT '邮箱',
  `nick` char(20) NOT NULL DEFAULT '' COMMENT '昵称',
  `cal` char(11) NOT NULL DEFAULT '' COMMENT '电话',
  `created_at` datetime DEFAULT NULL COMMENT '注册时间',
  `updated_at` varchar(10) DEFAULT NULL COMMENT '最后一次登陆时间',
  `login_ip` varchar(20) DEFAULT NULL COMMENT '最后登陆的ip地址',
  `login_times` int(6) DEFAULT '0' COMMENT '登陆次数',
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;

tag这个表示用来存放文章中的标签字段：

DROP TABLE IF EXISTS `tag`;
CREATE TABLE `tag` (
  `tag_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '标签id',
  `art_id` varchar(10) DEFAULT NULL COMMENT '文章id',
  `tag` varchar(10) DEFAULT NULL COMMENT '标签名称',
  PRIMARY KEY (`tag_id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8;

log这个表主要用来记录后台管理员的登陆记录，登陆时间，ip,用户名等信息

CREATE TABLE `log` (
  `log_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '日志id',
  `user_name` varchar(15) DEFAULT NULL COMMENT '用户名' ,
  `ip` varchar(255) DEFAULT NULL COMMENT 'ip地址',
  `time` varchar(255) DEFAULT NULL COMMENT '登陆时间',
  `browser` varchar(255) DEFAULT NULL COMMENT '浏览器型号',
  `os` varchar(255) DEFAULT NULL COMMENT '登录系统',
  `adress` varchar(255) DEFAULT NULL COMMENT '登陆地址',
  PRIMARY KEY (`log_id`)
) ENGINE=MyISAM AUTO_INCREMENT=60 DEFAULT CHARSET=utf8;

link这个表用于存放友情连接的字段信息

CREATE TABLE `link` (
  `link_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '友链id',
  `link_name` varchar(255) NOT NULL COMMENT '友链名称',
  `link_web` varchar(255) NOT NULL COMMENT '友链URL地址',
  `link_img` varchar(255) DEFAULT NULL COMMENT '友链头像',
  `link_des` varchar(255) DEFAULT NULL COMMENT '友链描述',
  `udit` int(1) DEFAULT '0',
  PRIMARY KEY (`link_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

comment这个表用于存放文章中的评论内容

CREATE TABLE `comment` (
  `comment_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '评论ID',
  `art_id` int(11) DEFAULT NULL COMMENT '文章id',
  `comm` varchar(255) DEFAULT NULL COMMENT '评论内容',
  `time` varchar(30) DEFAULT NULL COMMENT '评论时间',
  `ip` varchar(255) DEFAULT NULL COMMENT '评论ip',
  `author` varchar(255) DEFAULT NULL COMMENT '评论用户名',
  `email` varchar(255) DEFAULT NULL COMMENT '邮箱',
  `qq` varchar(255) DEFAULT '3202025856' COMMENT '评论网址',
  PRIMARY KEY (`comment_id`)
) ENGINE=InnoDB AUTO_INCREMENT=50 DEFAULT CHARSET=utf8;

cat这个表用于存放文章的分类字段

CREATE TABLE `cat` (
  `cat_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '分类id',
  `alias` varchar(10) DEFAULT NULL COMMENT '分类别名',
  `catname` char(30) NOT NULL DEFAULT '' COMMENT '分类名称',
  `num` smallint(5) unsigned NOT NULL DEFAULT '0' COMMENT '文章数量',
  `keywords` varchar(50) DEFAULT NULL COMMENT '关键字',
  `des` varchar(50) DEFAULT NULL COMMENT '描述',
  PRIMARY KEY (`cat_id`)
) ENGINE=MyISAM AUTO_INCREMENT=31 DEFAULT CHARSET=utf8;

art这个表存放文章的内容描述图片标题

CREATE TABLE `art` (
  `art_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '文章id',
  `cat_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '文章分类id（cat表主键id）',
  `title` varchar(50) NOT NULL DEFAULT '' COMMENT '文章标题',
  `contents` longtext COMMENT '文章内容',
  `tags` varchar(10) DEFAULT NULL COMMENT '标签',
  `keywords` varchar(255) DEFAULT NULL COMMENT '文章关键字',
  `des` varchar(255) DEFAULT NULL COMMENT '文章描述',
  `pv` int(10) NOT NULL DEFAULT '0' COMMENT '文章浏览量',
  `add_time` varchar(10) NOT NULL COMMENT '发表时间',
  `pic` varchar(255) DEFAULT NULL COMMENT '文章封面图片',
  PRIMARY KEY (`art_id`)
) ENGINE=MyISAM AUTO_INCREMENT=43 DEFAULT CHARSET=utf8 COMMENT='文章表';

2.网站后台admin的书写

前面介绍了前台页面的整体框架，这里将详细介绍一下后台页面的整体框架

其余文件和前台相同功能，这里我就不一一介绍了，主要讲一下lib文件夹中的数据库配置文件

打开lib文件夹，咱们能够看到这些文件，上述三个文件夹存放着文本编辑器的配置文件，下面介绍一下数据库文件配置内容，首先拿到项目，数据库文件导入数据库，服务器成功启动，这一步就是要修改config中的数据库链接命令了。文件存放路径：Armani_MyBlog /admin/lib/config.php

config.php

<?php 

return array(
    'host'=>'localhost',
    'user'=>'root',   //用户名
    'pwd'=>'DxzTEgf1NYOHsXsu',   //数据库链接密码
    'db'=>'zhangshuai',   //数据库名称
    'charset'=>'utf8',    //编码字符
    'salt' => 'bcd'
    );

?>

主要代码展现

（1）登陆界面（login.php）**

登陆界面地址：https://myblog.zh66.club/admin/login.php

主要代码以下：

login.php

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>张帅我的博客后台登陆</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" >
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet" />
        <link href="css/login.css" rel="stylesheet" />
    </head>

    <style>

    </style>

    <body id="body">
        <nav class="bg-canvas blur"><iframe name="htm" src="./a5.html" ></iframe></nav>
        <section class="cont">
            <section>
                <nav class="cont_left">
                    <p><h1>博客后台管理系统登录</h1></p>
                </nav>
                <form class="cont_right" action="login_check.php" method="post">
                    <h2 align="center">平台登录</h2>
                    <div class="form-group">
                        <p><i class="fa fa-user"></i><input type="text" class="form-control" id="inputEmail3" name="name" placeholder="请输入用户名"></p>
                        <p><i class="fa fa-key"></i>
                            <input type="password" class="form-control" id="exampleInputPassword3" name="password" placeholder="请输入密码">
                            <input type="text" class="form-control" id="exampleInputPassword3" name="pwd" placeholder="请输入密码" style="display: none;">
                            <a class="eye"><i class="fa fa-eye-slash"></i></a>
                        </p>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg btn-block" >登录</button>
                </form>
            </section>
        </section>
    </body>

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function() {

            $("#body").height($(window).height());

        })

        $(".eye").mouseover(function() {

            $("input[name=pwd]").val($("input[name=password]").val());

            $("input[name=password]").hide();

            $("input[name=pwd]").show().focus();

            $(".eye i").removeClass("fa-eye-slash");

            $(".eye i").addClass("fa-eye");

        });

        $(".eye").mouseout(function() {

            $("input[name=password]").val($("input[name=pwd]").val());

            $("input[name=password]").show().focus();

            $("input[name=pwd]").hide();

            $(".eye i").removeClass("fa-eye");

            $(".eye i").addClass("fa-eye-slash");

        })
    </script>
</html>

登陆验证login_check.php

<?php
/**
 * 
 * 登陆数据处理
 * 
 */
header("content-type:text/html;charset=utf-8");


require_once "./lib/init.php";



if(empty($_POST)){
    require_once "./login.php";
}else{
    //1-接收登陆信息
    $name = trim($_POST['name']);
    $password = trim($_POST['password']);
    $sql = "select * from user where name='" . $name  . "' and password='" . $password . "'";
    $res= mGetRow($sql); 
    //判断用户名密码是否正确
    if(!$res){
        echo "<script>alert('用户名或密码错误，请从新输入！');window.location.href='login.php'</script>";
    }else{

        //登陆记录log
        $ip=get_real_ip();
        $time=time();
        $browser=get_browser_name();
        $os=get_os();
        $adress=getCity($ip);
        $sql="insert into log (user_name,ip,time,browser,os,adress) values ('$name','$ip','$time','$browser','$os','$adress')";
        mQuery($sql);

        //记录用户表中的登陆时间，IP，登陆次数登
        $sql="update user set updated_at='$time',login_ip='$ip',login_times=login_times+1 where name='$name'";
        echo $sql;
        mQuery($sql);


        //设置cookie值
        setcookie('name' , $res['name'],time()+3600*2);
        header('Location:index.php');
    }

}

?>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程