前言
搭建項目要實現的是個人博客，前端實現博客界面的展示。采用了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這個表，主要是用來存儲博客的系統設置。
兩個核心代碼，用來與數據庫建立連接與操控：
項目展示
總結
感覺有用的點個收藏吧，有什么問題也可以在評論區評論，看見了會回復的，歡迎大家一起交流。