開源項目：張帥我的博客

時間  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教程