建站

緣由

光陰似箭，歲月如梭。看着一身迷彩服的大一新生在踏着整齊的步伐，口中喊着響亮的口號，那夕陽下的身影，是我逝去的青春。轉眼就要畢業了，個人軍訓彷彿就在昨天，歷歷在目。回首前面的兩年，本身並非不學無術，但也浪費了挺多時間。做爲一名學習Java web開發的程序員，應該具有完整開發網站系統的能力。

做爲一個側重後端開發的專業，前端開發切實有必定難度，雖然以前也學校課程上也學習過HTML，css,js,但都只是簡單學習，浮於表面，上個學期也簡單學習也vue，主要時間和精力都放到了Java上了。以前已經在阿里雲服務器上部署一個網站了SpringBoot+Thymeleaf，那是別人提供的源碼，我只是對數據稍作修改，想要在那基礎上進行擴展很難，不如本身建一個吧。那樣也能夠進行一步掌握建站的總體開發流程，麻雀雖小，五臟具全，涉及到前端、後端以及部署等。也是對本身所學知識和技能的一個總結和檢驗吧。

暑假的時間就已經想將這個想法付諸行動了，奈何考駕照練車佔用了我很多時間，技術上也還不成熟，因此練車之餘有時間就進一步學習了vue.js、vuex、vue router、webpack、vue cli等前端技術，瞭解各個技術棧的功能做用及簡單入門。

這個學期的課程比較少，本身支配的時間比較多。萬事具有隻欠東風，那就來實戰一下吧。

項目是打算用先後端分離的開發模式，先開發客戶端再開發服務器端代碼，一是對我來講客戶端開發難度較大，服務器端難度相對較小，開發起來效率更高。 二是客戶端須要什麼數據後端就能夠只開發相關的接口提供相應的數據，需求更加明確，否則就就算後端提供了數據，我客戶端沒能力渲染出來或者渲染出來致使頁面數據太多佈局太亂也很差。

目標

既然要先開發客戶端，那就要先明確開發目標：開發什麼樣的網站，達到什麼樣的效果及用戶體驗。

首先我要開發的是一個我的網站，上面放一些本身寫的文章、學習筆記和心得，提供我在其它平臺學習筆記、分享代碼的跳轉連接及志同道合者想找我探討人生或技術的聯繫方式，其它用戶能夠註冊、登陸、退出登陸、註銷帳號但不能發佈文章，僅能夠在網站留言或者給文章評論、點贊、打賞，pc端和移動端須要可以很好的兼容和適配以提升用戶體驗。 接下來規劃開發流程及網站總體結構。

規劃

pc客戶端

1） 先來設計一下網站的總體結構和佈局

位置1能夠放一張圖片，這樣不會顯得頁面太單調，位置2是導航條，位置3是文章列表，位置4能夠是放置關注站長的跳轉入口（如公衆號、QQ等），文章的排行榜（能夠是最新、最熱、評論最多等的排列順序）以及友情連接。位置5是放置網站備案的相關信息。點擊導航欄按鈕切換頁面的時候，一、二、四、5都是固定不動的，只有3的內容會改變。接下來設計各個模塊的細節

2）

模塊1就是一張圖片做爲背景圖，圖片寬度要能鋪滿瀏覽器的寬度，限制高度，結合頁面的美觀程序酌情設定，沒啥好說的。 模塊2我目前想到這四個導航入口，從左到右分別是首頁、動態、留言、關於，若是須要，還能夠在右邊加個搜索框

3） 模塊4能夠分爲上中下三個部分，分別是關注我、熱門文章、友情連接

4） 模塊3這裏要根據導航切換到不一樣頁面而有不一樣的設計，下面就來一個個設計

4.1）首頁

上部分是放置輪播圖，輪播圖下面就最新發文章列表，即做者最新發布的幾篇文章。文章列表裏的每一篇文章都有一張圖片做爲封面圖，有文章標題，展示部分文章內容（須要截取部份內容做爲摘要，點擊進入才能夠看完全部內容），展示文章做者、文章發佈時間、點贊數量、瀏覽數量、評論數量

4.2)動態

直接就是全部文章列表，做者寫的全部文章都在這裏列出來。比首頁少了輪播圖，其它跟首頁差很少

4.3)留言

一樣也是分爲上下兩部分，上部分是留言輸入框，用來給用戶提交留言，下部分是展示全部用戶提交過的留言

留言輸入框部分有頭像（若是用戶已經登陸的話就顯示出圖片，沒登陸剛不顯示圖片），有文本輸入框，給用戶輸入留言內容，要對輸入的字數進行限制以及敏感字過慮，一天評論的次數也要限制，以上主要是預防用戶惡意留言、評論，還有提交按鈕，用來提交留言內容。當用戶點擊頭像的時候，會彈出模態框，若用戶還沒有登陸，則框裏能夠切換登陸和註冊頁面。若用戶已經登陸，則彈框裏只有登陸頁面，此時登陸頁面裏展示用戶的信息，除了手機號，其它皆能夠編輯修改，此外還有退出登陸入口。在註冊頁面須要手機號發送驗證碼進行註冊，間隔至少60秒方可發送第二次驗證碼，用戶能夠上傳頭像，頭像能夠預覽，輸入框有輸入合法性驗證

全部用戶留言模塊的每一條用戶留言,除了顯示留言內容，還展示用戶頭像、留言時間、用戶名、回覆按鈕，能夠有多級回覆，做者能夠給用戶回覆，用戶也能夠給用戶回覆。留言排序能夠是按時間排，也能夠按熱度排，等等，這裏暫定最新留言在最上面，按時間降序排列

4.4)文章詳情

進行文章詳情頁面是當用戶點擊文章列表裏的子項時進入的，而不是導航欄。這個頁面也大體分爲上下兩個部分，上部分是文章的詳細信息，有文章標題、文章內容、文章發時間、文章做者、訪問量、評論數量，此外還能夠打賞。當用戶點擊打賞按鈕，會彈出彈框，彈框裏能夠切換支付寶打賞或者微信二維碼打賞，實現原理和留言那裏的註冊登陸那差很少。文章評論和留言佈局差很少，只是數據不同。點贊和評論都須要先登陸，未登陸而進行點選或評論操做的會出現登陸註冊的彈框。

4.4)關於

關於頁面目前我尚未想到放啥內容，暫時不作具體設計

移動客戶端

移動客戶端的佈局要等到pc端完成了纔好根據具體狀況來寫樣式進行適配