光陰似箭,歲月如梭。看着一身迷彩服的大一新生在踏着整齊的步伐,口中喊着響亮的口號,那夕陽下的身影,是我逝去的青春。轉眼就要畢業了,個人軍訓彷彿就在昨天,歷歷在目。回首前面的兩年,本身並非不學無術,但也浪費了挺多時間。做爲一名學習Java web開發的程序員,應該具有完整開發網站系統的能力。css
做爲一個側重後端開發的專業,前端開發切實有必定難度,雖然以前也學校課程上也學習過HTML,css,js,但都只是簡單學習,浮於表面,上個學期也簡單學習也vue,主要時間和精力都放到了Java上了。以前已經在阿里雲服務器上部署一個網站了SpringBoot+Thymeleaf,那是別人提供的源碼,我只是對數據稍作修改,想要在那基礎上進行擴展很難,不如本身建一個吧。那樣也能夠進行一步掌握建站的總體開發流程,麻雀雖小,五臟具全,涉及到前端、後端以及部署等。也是對本身所學知識和技能的一個總結和檢驗吧。前端
暑假的時間就已經想將這個想法付諸行動了,奈何考駕照練車佔用了我很多時間,技術上也還不成熟,因此練車之餘有時間就進一步學習了vue.js、vuex、vue router、webpack、vue cli等前端技術,瞭解各個技術棧的功能做用及簡單入門。vue
這個學期的課程比較少,本身支配的時間比較多。萬事具有隻欠東風,那就來實戰一下吧。webpack
項目是打算用先後端分離的開發模式,先開發客戶端再開發服務器端代碼,一是對我來講客戶端開發難度較大,服務器端難度相對較小,開發起來效率更高。 二是客戶端須要什麼數據後端就能夠只開發相關的接口提供相應的數據,需求更加明確,否則就就算後端提供了數據,我客戶端沒能力渲染出來或者渲染出來致使頁面數據太多佈局太亂也很差。程序員
既然要先開發客戶端,那就要先明確開發目標:開發什麼樣的網站,達到什麼樣的效果及用戶體驗。web
首先我要開發的是一個我的網站,上面放一些本身寫的文章、學習筆記和心得,提供我在其它平臺學習筆記、分享代碼的跳轉連接及志同道合者想找我探討人生或技術的聯繫方式,其它用戶能夠註冊、登陸、退出登陸、註銷帳號但不能發佈文章,僅能夠在網站留言或者給文章評論、點贊、打賞,pc端和移動端須要可以很好的兼容和適配以提升用戶體驗。 接下來規劃開發流程及網站總體結構。vuex
1) 先來設計一下網站的總體結構和佈局後端
2)瀏覽器
模塊1就是一張圖片做爲背景圖,圖片寬度要能鋪滿瀏覽器的寬度,限制高度,結合頁面的美觀程序酌情設定,沒啥好說的。 模塊2我目前想到這四個導航入口,從左到右分別是首頁、動態、留言、關於,若是須要,還能夠在右邊加個搜索框 服務器
4.1)首頁
上部分是放置輪播圖,輪播圖下面就最新發文章列表,即做者最新發布的幾篇文章。文章列表裏的每一篇文章都有一張圖片做爲封面圖,有文章標題,展示部分文章內容(須要截取部份內容做爲摘要,點擊進入才能夠看完全部內容),展示文章做者、文章發佈時間、點贊數量、瀏覽數量、評論數量
直接就是全部文章列表,做者寫的全部文章都在這裏列出來。比首頁少了輪播圖,其它跟首頁差很少
4.3)留言
一樣也是分爲上下兩部分,上部分是留言輸入框,用來給用戶提交留言,下部分是展示全部用戶提交過的留言
進行文章詳情頁面是當用戶點擊文章列表裏的子項時進入的,而不是導航欄。這個頁面也大體分爲上下兩個部分,上部分是文章的詳細信息,有文章標題、文章內容、文章發時間、文章做者、訪問量、評論數量,此外還能夠打賞。當用戶點擊打賞按鈕,會彈出彈框,彈框裏能夠切換支付寶打賞或者微信二維碼打賞,實現原理和留言那裏的註冊登陸那差很少。文章評論和留言佈局差很少,只是數據不同。點贊和評論都須要先登陸,未登陸而進行點選或評論操做的會出現登陸註冊的彈框。
關於頁面目前我尚未想到放啥內容,暫時不作具體設計
移動客戶端的佈局要等到pc端完成了纔好根據具體狀況來寫樣式進行適配