Web-Blog我的博客搭建總結

歷經一個月的知識洗禮和代碼的摧殘，終於完成了本身的博客搭建，在此，我想總結一下本身的一路走來的辛酸苦辣，留下一點足跡，若是有正在搭博客的朋友，個人思路能對大家有點受用，我想本身也是莫大的欣慰。先附上本身的博客地址吧：http://139.199.77.244:3333/Web-Blog.html

 

1、前期思想準備

一、我須要什麼知識儲備？

就我的而言，由於也是各類百度，各類google，各類看書，而後一塊兒大雜揉，因此，可能所須要的知識，可能不會是最新潮的，畢竟網上不少教程和內容都是3年前的。可是大致所需的知識應該八九不離十。

　　ES6：阮一峯的ES6入門，這個很重要，裏面的異步思想及其重要，可能咱們以前在學前端的時候，除了Ajax異步請求外，不多在其餘地方使用到異步操做，所以異步編程思想被弱化，即便對回調函數這樣的知識點，理解得很透徹，但在後臺編寫javascript的時候，你仍然會由於一些異步操做讓你犯難。所以，Generator、promise、async要好好去理解，瞭解到他們各自的特點和基本的異步操做思想。其次，module這個模塊化思想很重要，我姑且把他理解爲拼接積木同樣的想法，一個一個的小積木拼接成了整個做品的頭、手、腳、身體，頭、手、腳、身體又構成了整個積木做品，這裏的一個一個小積木或是頭、手、腳、身體，均可以理解爲一個模塊（僅我的觀點，大神勿噴）。

　　Node：有了ES6的語法基礎和一些基本思想，那麼Node便誕生了，在之前，咱們跟後臺交流的時候，張口一個接口閉口一個接口，那麼Node做爲後臺，他的接口怎麼去給製造？網上各類學習，發現了一個專有名詞，叫作路由，我把他理解爲一箇中轉站，先後端須要的紐帶，但爲了迎合之前的思惟方式，我便私自把他理解爲接口，前端調用該接口（即路由）進行交互。知道了node，確定少不了npm這樣的管理包工具，這個很重要，我以前一直不是很懂這個npm，如今或許也不是很懂，可是至少知道了package.json的重要性和必要性，他能做爲你的項目依賴，以前ES6理解了模塊的概念，那麼npm即是管理node自帶核心模塊的工具，package.json即是告訴你有什麼安裝依賴項，具體npm使用本身百度。有了npm這種管理包工具，ejs這樣的模塊引擎也浮出了水面（如今又據說了更高級的模塊引擎，underscore.js 以及 backbone.js，我也不知道是什麼，不過能夠去了解一下，畢竟我學習的時候，教程都很古老，且本身暫時看官方文檔有點吃力）。總之，一個項目須要許多node的模塊，具體哪些有什麼做用，須要些什麼，本身在學習過程當中，一邊百度一邊進步吧。

　　mongodb：因爲大一大二純娛樂過去，數據庫又對我而言是一個新的挑戰，百度告訴我，node通常搭配mongodb使用，因此本身去了解mongodb吧，而後順帶npm提供了一個mongoose的模塊，方便咱們對數據進行增刪改查，本身能夠去百度學習。

　　bootstrap：在此以前，CSS和HTML都是本身純手工，不只頁面難看，並且代碼量具大，這個時候bootstrap和Semantic出如今了我面前，反正都是看成便利的一種UI框架來使用，因爲好像公司要求bootstrap是加分項，前輩們又說bootstrap是主流框架，因此我採用的是bootstrap來設計本身的頁面，沒有美工的天賦沒有關係，網上這麼多網頁模板，你看哪一個順眼就copy哪一個的設計樣式，再加點本身的想法和元素進去便可。

 

2、功能結構構思

有了思想準備，這個時候，魯莽的咱們可能忽略了一個很重要的步驟，功能構思啊！！！沒有這一步，直接上代碼，後期的代價是，我想加點新東西進去，發現不合適，代碼要通篇幅地去更改，很痛苦。因爲我以前一直覺得搭我的博客，要像博客園這樣，有登錄註冊功能，因此我寫的博客貌似不是我的博客，不過，都大同小異，如下是我本身大體列出的一些功能，具體還有不少能夠琢磨的地方，因此感受面向對象的思想仍是很重要，須要仔細去揣摩各個方法的做用，以及相互調用。我來用圖示的方法大體說出本身的一個寫代碼的思路吧。

最後，本身設計數據庫表的時候必定要謹慎謹慎再謹慎，由於這個跟你的功能息息相關，moogodb沒有主外鍵的概念，所以這一點也要注意。咱們設計查詢的時候，要保證數據的惟一性。

 

3、開始擼碼

這裏我就寫一下本身擼碼的思路和碰到的一些很頭痛的問題

　　一、頁面設計：首當其衝確定是先設計佈局好本身的頁面，這個須要本身精心根據本身的功能和審美去打磨。

　　二、登錄註冊：登錄註冊post請求便碰到了一個難題，node解析json格式的時候，沒有準確解析出正確的json格式，緣由是前端咱們要更改一下傳送數據的默認格式xhr.setRequestHeader("Content-Type", "application/json")，接下來便涉及到了一個安全性的問題，咱們提交數據的時候不可能把用戶密碼暴露在控制檯啊，所以，sha1()和md5()加密算法便向咱們走來，前端傳送過去的時候加密保存，驗證的時候也加密驗證，保證客戶的密碼安全（我只考慮到比較基礎的問題，可能還有不少問題，畢竟是前端的小白來初來乍到後臺，因此不少安全問題沒有考慮周到，大神勿噴）。

　　三、發表文章：細心的我發現，若是我發表文章的時候有一些javascript的特殊字符，會報錯的，因而轉義和反轉義字符串的概念深刻我心。

　　四、顯示文章：咱們發佈文章了以後，要顯示出來，promise等關鍵詞便讓我扎心了好久，單線程的JS異步編程思想很重要，有時候須要解決異步編程帶來的問題更重要！只有本身親身體會了才知道那種痛苦。其次用戶登錄狀態能夠編輯、刪除本身發佈的文章，且不能夠對本身的文章進行點贊、反對。提及點贊反對的功能，不得很少說一句，這個問題有點艱深，由於細心的咱們發現QQ點讚的功能，一個ID只能點贊同一篇文章一次，且反覆刷新頁面也不能重複點贊，可是，我思考要實現這樣的效果，只能再創建一張表，匹配一個用戶對應的某一篇非本身的文章，添加一個字段是否點贊，可是問了一下後臺的同窗，認爲這個表的意義不大，所以，不必再去新建一張表達到這樣的效果，因此我只能實現當前頁面只能對一篇文章點贊，若是刷新頁面，則至關於從新加載JS等文件，依然能夠繼續點贊。這些功能本身要理清邏輯順序，才能很輕鬆地達到互相調用，否則相互影響，也會讓你頭痛。編程邏輯必定要清晰。

　　五、發佈評論：同理發佈文章的一些問題外，登陸狀態下，纔可發佈評論

　　六、刪除評論：同理，也須要登陸狀態下，該文章的主人擁有刪除評論的功能。

　　七、個人文章：這裏是顯示我的發表的文章，以分類的形式顯示出來，前端現實界面因爲要顯示你發表的文章數量，涉及到要屢次查詢而後再將每一個分類文章的數量返回給前端，因此promise要嵌套許多層，當時想了很久。

　　八、模糊搜索：利用oninput事件，實現這個一功能，匹配的是文章標題。而後即可以搜索出全部匹配的文章。

　　九、日曆：一個插件，這個感受是最簡單的東西，固然，本身也要對HTML和CSS很敏感才能調試出合適的尺寸大小。

　　十、分頁：此次沒有采用瀑布流式加載博客全部內容，在個人博客隨即裏面，本身曾經也作過瀑布流式的加載，此次分頁是採起的前端分頁，因此仍是相對比較簡單暴力。

 

以上我是根據功能記錄了一下可能會遇到的問題，下面我根據本身經驗之談，來講一下node搭建博客可能會遇到的問題。

　　一、先後端交互時，後臺獲取你前端傳來的數據時，要用到body-parser這個中間件，才能得到前端穿來的JSON數據，一樣，前端要xhr.setRequestHeader("Content-Type", "application/json")改變默認傳輸數據的格式。

　　二、咱們習慣了html格式的文本格式，因此採用ejs引擎模板的話，要設置.html格式讀取文件，否則是不行的。

　　三、moogoose模塊，定義保存數據的格式的時候（即：var schema = new mongoose.Schema({..............})），同一張表不能重複定義，否則會報錯，咱們須要引用require來屢次調用它

　　四、每次登錄的時候，咱們設置一個全局變量user來保存設置cookie，這樣能夠實現記住帳號和密碼的功能，加密算法，sha1()是不可逆的喲

　　五、文章的我我是根據文章發表時間（精確到秒）+用戶名（註冊時不可重複）進行查找，同理評論也是根據這兩個因素再外加一個評論時間進行查找，以便達到惟一性。

　　六、最後，就是使用騰訊雲服務器的時候，咱們安裝node環境的系統時，最後使用webstorm上傳到服務器時，路徑必定要選擇/boot路徑上傳，由於我也不是很懂會騰訊雲服務器，可是經過各類報錯，我知道了，他默認是從/boot路徑下去讀取文件，若是你知道怎麼在騰訊雲服務器上像本身的windows系統那樣經過cd C:/boot 那樣去定位到某個指定文件夾位置的話，但願留下你的方法，我也想學習一下。

 

 

最後，若是有什麼問題，留言一塊兒交流交流。github源碼：https://github.com/Shmily-HJT/MyProject/tree/master/MyBlog