慢時光

原地址：簡書

前言：

從自己決定辭職，到報名飢人谷進行學習，兩個月了。在這兩個月里，心無旁騖，專註於前端的學習，看飢人谷任務班的教學視頻，動手敲代碼，調試，看文檔，查資料，問老師和同學，完成任務班的任務。兩個月過去，我也學完了入門，進階，高級模塊，了解前端工作模式，學習一些前端工具，比如webpack，gulp和requirejs等等，做出自己的第一個網站，算是對自己的學習有一個階段性的總結，順便了解後端的工作流程。

下一步準備深入學習前端框架，react，vue，進一步提高自己。

網站簡介

慢時光----我的第一個網站

我建的第一個網站，類似學生時代學校外面奶茶店的留言牆，使用github登錄之後，可以在上面留言。

慢時光

點擊左邊的「添加按鈕」，會出現一個新的留言條，輸內容後，留言條就會在按照瀑布流形式排布。雙擊釘子刪除，刪除後瀑布流重新排布。

點擊留言文本區，可以修改留言內容。在導航條右邊是用戶信息，可以登錄和註銷。遊客只有訪問的許可權，沒有修改許可權。

以上就是網站的全部功能。

網站建設之思想

網站功能簡單，相應的邏輯也很簡單，主要是用戶登錄後留言條信息的存儲，查詢和修改，用戶許可權也可以通過在信息中加入用戶ID實現。用戶進行相應操作時，會先進行相應的判斷，用戶ID符合才可以進行相應操作。如果匹配不上，就會彈出「您沒有許可權」的提醒。

在網站建設開始之前，前後端默認分離，前端負責頁面的互動和效果展示，後端負責數據處理，前後端通過請求進行數據交流，因此要先約定好請求的埠，發送數據類型及數據的含義，很重要！！！

網站建設之工具

建設這個網站整體框架采有express搭建，後端數據採用sequelize，github登錄採用passport，這是後端。然後，網站前端，也就是頁面，整體採用瀑布流布局，採用jQuery編碼，組件化思想，將每個功能組件分開，然後採用面向對象編程，用webpack進行打包，ajax進行數據請求。

在前端工作中，我認為最核心的思想，就是組件化。將每個功能分開，模塊化，工具化，需要時在通過require進行調用，前端工作將變成組裝模塊，前端工作將大大減少，從而有更大的時間和精力進行開發，新功能的普及速度也會大大提高。

網站建設之實戰

Step1

新建項目文件夾，初始化：

$npm instal express --save；//安裝express，並生成依賴

$ npm install express-generator -g;//安裝express應用生成器

$ express myapp;//當前工作目錄下創建一個命名為 myapp 的應用

$ cd myapp ；//進入myapp文件夾

$ npm install;//安裝所以依賴

初始化網站框架

到這一步，一個網站的框架就已經完成啦，通過$ node ./bin/www就可以本地開啟伺服器，瀏覽器打開http://loaclhost:3000就看到了網頁。（通過package.json設置命令「start」為「 node ./bin/www」，就可以直接通過npm start開啟）

Step2

這個網站的模板引擎採用ejs，主要語法和HTML一樣，不過也支持JavaScript語言，通過<% %>將JavaScript語言包裹就可以運行。我的主要思路是先寫好html頁面（可以用瀏覽器打開，便於修改），然後將不變的內容複製 進去模板引擎中，需要修改的地方再加入JavaScript修改。

模板引擎和HTML頁面

模板引擎中修改的部分

然後就是頁面的互動，note的增刪改查，瀑布流布局，登錄註銷，彈窗提示，這對於專業前端的我（手動邏輯）來說，小case啦，啪啪啪搞定。

JavaScript代碼文件

至此，我們的網站主頁就完成啦。

坑點：

1.public是網站的靜態目錄，在app.js中設置，因此，模板引擎中引用只需從public文件下開始。

2.webpack.config.js設置文件中，入口和出口採用「path」模塊，定位文件所在目錄，不然gitbash在其他目錄下打開webpack會報錯。

webpack設置

3.登錄按鈕採用a標籤，而不是ajax發送請求，因為oauth2.0協議需要頁面跳轉進行登錄，ajax發送請求不會進行頁面的刷新，也就是說引起瀏覽器報錯，因為不同源。

Step3

到這一步，前端的工作已經完成80%，後面只需要進行調試和增加許可權設置，主要進行後端的工作。

網站的入口是bin目錄下www文件，就是監聽loaclhost：3000埠，一發現請求就轉入app.js文件，app.js才是整個網站的真正入口。

app.js---網站真正入口

內容很多，引入各種模塊，進行各種初始化設置。網站入口就是上圖所示，當接收到/請求時，轉入index文件，就是在routes文件下的index.js（app.js中設置idnex的位置）。

在index.js中，我們就可以開始我們的設置啦。登錄請求，刪除請求，增加請求等等一系列請求，針對不同的請求，進行不同的數據反饋。

index.js---網站核心邏輯

到這裡，前後端已經連接起來，可以運行啦！

不對，還是少了些神馬，忘記了，還沒有建立資料庫，用戶的信息沒有報保存，這才是真正的後端呀。

通過sequelize模塊，建立資料庫，還需要安裝sqlite3模塊哦。建立一個note表，存儲用戶數據，只需要建立text和username行，數據自帶的有ID和createAt，updateAt。

note.js---後端的後端：資料庫

index.js通過引入note模塊，增刪改查資料庫里的數據，從而實現用戶數據的保存和刪除。

到這一步，網站的前後端完成，網站算是完成啦！！

坑點：

因為網站比較簡單，邏輯清晰，不存在什麼其他的坑點，唯一的就是登錄了。引入passport模塊和passport-github模塊，申請github的oauth app，然後再設置id和密碼，特別主要callbackURL不能錯，index.js設置和github裡面必須一致才可以登錄驗證。

再說一句，前後端埠必須先約定好，最好是記錄下來，不然就很容易變坑。

Step4

網站已經全部建成，最後一步就是上線啦，我使用的是飢人谷的伺服器，域名申請的是阿里的。

到這一步了，只需要把文件上傳伺服器，然後輸入npm start就可以打開啦。但是，但是，怎麼上傳呀？這遠程伺服器又不能像自己電腦一樣，原諒我，我就是這樣無奈的在這一步卡住了。ftp的client端上傳，主機沒有設置，scp遠程拷貝，原諒一下。最後，受谷里同學提醒，先上傳github，然後從github上clone下來，正好還可以複習下github操作。一番操作猛如虎，git add .， git commit -ma 「add files」， git push origin master 上傳成功。然後主機登錄，git clone，添加秘鑰，再git clone 完成啦。

npm start，網站正式開啟。

網站主頁---未登錄

最後一個坑點，其實也算不上坑點，就是長期開啟伺服器，使用pm2命令，讓nodejs 應用命令行持久化，關閉gitbash也可以訪問網站啦，這，才是真正的完成。

網站建設之感受

建立這個網站，前前後後差不多花了一個星期時間，查看每個模塊的文檔，一步步調試，到最後上線，看著心裡還是挺自豪的。在此要特別感謝下飢人谷的老師們和同學，提出的問題都可以耐心回答，少走了很多彎路。

老實說，這個網站不夠漂亮，還存在很多問題，後續我會繼續對它進行改進，在做網站時就有的一些想法，由於時間關係而沒有加入進去，後期通過學習，慢慢添加進來。

Idea1：做一個網站進入的動畫效果，進入時間隧道，回到初中學校胖的奶茶店裡，最後聚焦在這片充滿回憶的留言牆上。思路是添加一段視頻，進入時展示，然後就刪除。

Idea2：留言牆背景換成牆的圖片，留言條樣式也換成紙條形式，通過css實現。

Idea3：留言條不拘泥於留言，應該還可以是照片。

Idea4：刪除和添加增加動畫效果，更加溫馨，彈窗也更加人性化。

Idea5：增加查詢功能，可以找到自己想看的人的留言，也給用戶添加許可權，設置僅自己可見和他人可見；

Idea5：留言條下面增加點贊，隨著用戶增多，留言牆第一頁只展示點贊最多的留言。

Idea6：增加qq登錄和微信登錄，畢竟國人專屬。

ps：最後放一張一直陪我學習的小夥伴。

它就這樣默默的監督我學習

提醒我休息

推薦閱讀：