前端人員也能擁有自己的個人網站

現在來寫這篇文章看似有點遲了，因為我的個人網站伺服器沒有續費已經停掉了。但還是可以根據截圖來寫一寫，姑且當作回顧。

【歷史背景】

首先，簡要說下開發這個網站的背景，這是2017年12月份突發奇想想做一個網站，但是做什麼呢？想著最近好像今日頭條特別火，就想著做一個內容類的網站，這類網站內容通過爬蟲也很容易獲取，哈哈哈，所以最終就做了《金句貓》這個站點。網站採用了前後端分離的架構，前端框架用的vue，後端用的java+springboot，資料庫用的mysql。後來，我做了第一版後還只是在本地啟動了，主要功能是一個段子列表的顯示，資料還是在資料庫直接插入的。一次跟一個高中朋友聊天說起了這個東西，他是在杭州一個公司做java後端開發，他說他有一臺阿里雲的閒置伺服器，我說那要不給我用下，正好我現在在弄了一個東西，說幹就幹，那天中午他把伺服器ip和密碼給我，下午我就把網站部署上去了。那天晚上我就發了地址給他體驗了一下，大概過了十幾天，我那高中同學跟我說要不我也來參與一下，這我當然很開心，因為後端我也寫了第一版，大體的架構我自己也清楚了，這樣我就專心做前端，可以實踐得更多，兩個人都可以得到鍛鍊。就這樣，這個網站開發就這樣開始了...

【百度百科】

後來，我也為這個網站建立相應的百度百科，可以直接在百度裡搜“金句貓”，訪問連結-->金句貓

【網站pc版截圖】

1.金句列表頁

2.金句詳情頁

3.美文列表頁

4.美文詳情頁

5.聊天室 

聊天室採用websocket技術

6.登入註冊頁

7.頭部頭像區 

8.金句美文發表 

 【h5版截圖】

在nginx中更改配置檔案，監聽請求來自pc還是h5，來自pc時轉發至pc專案，來自h5時轉發至h5專案。

1. 登入註冊頁

 2.聊天室訊息頁

3.美文頁

 4.首頁

【管理後臺截圖】

管理後臺做金句、美文的稽核工作

 【域名伺服器】

1.域名

2.伺服器

 

 

 

說到伺服器，還遇到了一個坑，就是伺服器的備案問題，因為我是在上海工作，但又沒居住證，所以在上海備案備不了。上海工信部要我備湖南老家的， 但湖南工信部要求要湖南的手機號，然而我的是上海的，mmmmmppppp.....後來不得已辦了一個歸屬地湖南的手機號..

【資料統計】

資料統計同時採用了友盟資料統計和百度資料統計，因為友盟採用的早一點，所以這裡只貼了友盟的截圖。

 

 

【技術架構】

這裡我沒有講網站採用的具體技術架構，但我之前有過一張截圖可以參考一下。

1.技術圖譜（網站技術）

2.技術優化（訪問連結）

 【程式碼地址】

1.pc前端（訪問連結）

2.h5前端（訪問連結）

3.管理後臺前端（訪問連結）

4.後端程式碼（訪問連結）

 

以上，就是我做的這個網站的大體情況，雖然不是特別的高階大氣上檔次，但是從2015年實習接觸web開發開始，也算是成長路上的一種收貨了（其實這算是第二個個人網站了，第一個個人網站是畢業一年的時候做的）。而作為一名專業前端人員，在課外去學習和了解一些後端、運維等知識，也會給你平時的工作帶來一些方便，能更好的和後端人員溝通、聯調、提出自己的意見（以至於不會被匡，後端說這個後端做不了，得前端做...hahahha）。另外，從整體和大局來了解web開發，在學習和成長的路上也可以避免管窺蠡測了。