將個人構思更直觀的表現出來,爲個人博客繪製一個簡單的設計稿

學習golang開發,不該該僅僅侷限於golang語言自己。同時咱們還應該拓展學習爲學好golang而須要應用到的其餘方面的知識。好比學習html、css、js,項目架構、畫原型圖等工做。css

這一節,咱們就要利用網絡工具來給咱們的博客畫出存在於咱們腦子裏的博客的基本樣子,以便後面咱們製做博客網站的時候,能夠拿它來作基本的參考,同時也是能夠給咱們後面分步編寫工做提供工做量預估等。html

博客首頁該長的樣子,博客首頁的設計圖

博客首頁
博客首頁包含三大塊,頭部導航、中間主體文章列表內容、頁腳信息等。golang

頭部採用常規的網址設置,中規中矩。頭部左邊顯示網址logo和文字,中間爲導航按鈕,右邊爲博客管理按鈕,登陸退出、發佈文章等操做。數據庫

中間主題部分採用左邊大右邊小的兩欄佈局,左邊大的部分放置文章列表,文章列表顯示文章標題、文章簡介、簡介顯示最多三行,超出部分使用省略號顯示。簡介下方是次要信息,採用灰色小字體顯示文章分類、文章發佈時間、瀏覽量等信息。微信

中間右側邊欄顯示博客信息、文章歸類、熱門文章等內容,用來擴大內容入口。這裏還能夠根據須要顯示更多的信息,好比最新發布的文章、按年月歸檔的記錄、tag集合等信息。網絡

頁腳信息設計的比較簡單,這裏能夠放置版權信息、博客一句話介紹、關於咱們等信息,也能夠將本身的聯繫方式,好比微信、qq、郵箱、二維碼等掛到頁腳這裏。架構

博客文章詳情頁設計圖

文章詳情頁
文章詳情頁面主要是用於醒目的展現標題、文章內容,輔助信息如文章分類、發佈時間,瀏覽量等信息,用淺一點的顏色來顯示,它沒有那麼重要,最下方還要放上一篇、下一篇,用來方便蜘蛛爬取和用戶連續瀏覽。右側放一些相關的文章內容,好比最新發布的文章、本文相關的文章等信息展現。工具

博客文章發佈頁面設計圖

文章發佈頁面
博客文章發佈頁面,集合了文章發佈、分類建立等操做。在發佈文章的時候,填寫上標題、填寫文章分類、文章關鍵詞、文章簡介、文章內容字段後,點擊發布,後臺就會根據提交的表單信息,自動判斷入庫,若是標題已經存在,則這篇文章不會被髮布。分類已經存在,則直接使用已存在的分類,若是分類不存在,則建立新分類等。佈局

博客登陸管理頁面設計圖

登陸頁面
博客登陸頁面比較簡單,要求填寫用戶名、密碼,經過驗證便可開始管理和發佈文章了。這裏還能夠設置得更復雜一些,好比設置一個誰也想不到的隨機路徑做爲登陸路徑,這樣子就不會暴露管理權限路徑了。同時增長其餘輔助驗證,好比圖形驗證碼、12306選圖驗證、極驗驗證碼驗證等方式。這裏爲了簡便,先把其餘驗證都省了。學習

博客初始化頁面設計圖

初始化頁面
博客初始化頁面須要填寫數據庫地址、數據庫端口、數據庫名稱、數據庫用戶名、數據庫密碼信息,用來將博客的表建立到數據庫中,管理數據。

同時,初始化的時候,還須要設置管理員帳號和管理員密碼,用於初始化完成,博客正常使用管理和發佈文章等操做的時候,驗證管理權限。

相關文章
相關標籤/搜索