Vue、Nuxt服務端渲染，NodeJS全棧項目，面試小白的博客系統~~

Holle，大家好，我是李白！！

一時興起的開源項目，到這兒就告一段落了。

這是一個入門全棧之路的小項目，從設計、前端、后端、服務端，一路狂飆的學習，發量正在欣喜若狂~~

接觸過WordPress，Hexo等第三方網站系統，雖說簡單，但是感覺太過於冗余臃腫，顯得過於雜亂，各種限制和體驗不好等等原因。

所以決定書寫一片屬於自己的天地，我是創造者，也是追尋者。

前后台均為絞盡腦汁的設計，整體風格為簡約風，人的心靈到達一定階段，心思愈漸愈偏向於簡單，大道極簡也許才是最終的歸宿。

「在線卑微，求個star https://github.com/wsydxiangwang/Mood 」

• 項目部署
• 本地開發
• 前台頁面
• 后台管理
• 閑言細語（肺腑之言，請一定要看）

項目部署

按照這個教程，就算你不懂代碼，也能擁有屬於自己的一個網站系統，后台設置均已完善，覆蓋了正常博客的功能！！

1. 在 GitHub 拉取項目 Mood

2. 修改config文件夾里面的nginx.conf文件，需要指定自己的域名，文件里面有注釋說明。

3. 在服務器目錄，創建data文件夾作為項目目錄

4. 上傳web、server、config 3 個文件夾和docker-compose.yml1 個文件。

5. 打開服務器終端，安裝docker（安裝教程參考：https://docs.docker.com/engine/install/ ）~~

6. 安裝成功后，進入剛才創建的data目錄，運行docker-compose up -d，進行部署

7. 運行docker-compose ps or docker ps -a 看看是否正常運行，完美~~

ok， 搞定， 就是這么簡單，「docker 牛逼」

前台網站：http://aa.com，后台則為：http://aa.com/admin，到這里就沒問題了~~

「划重點：先進入后台，設置基本信息，前台才能正常訪問，否則報錯，ok 完美，趕緊回家吃個飯慶祝慶祝~~」

❝
一句話搞定部署，docker 真香 😍
❞

（注：到第 5 步，如果提示此命令不存在的話，需要根據提示進行安裝docker-compose，我記得好像是需要的，在這兒我就不費時間去折騰了~~ ）

本地開發

1.首先，需要在電腦安裝數據庫mongodb，並且運行mongodb服務。

2.在本地的 hosts 文件添加以下內容：

127.0.0.1 web
127.0.0.1 server
127.0.0.1 mongodb

使用docker部署的時候，需要用不同的主機名進行互相連接容器，所以需要指定不同項目的名字！！

初學者目前還沒找到更好的方式，如有的話，歡迎給予建議~~

3.項目的啟動

npm install    ## 每個目錄必須
npm run dev    ## web
npm run serve  ## admin & server

4.開啟之后，需要先進入管理后台，填寫首屏的信息，才能正常訪問前台，否則前台就會報錯。

（額...這里偷懶了沒做處理，也沒必要處理 🧐）

5.到這兒就 ok 了，如果有「建議/優化/bug」的，可以隨時github「Issues」我，感謝支持！！

使用的技術棧

• 頁面設計
  • 下三流設計師，均為絞盡腦汁的設計
  • 前台些許借鑒於素錦（開源項目）
• 前台頁面
  • vue的服務端渲染框架Nuxt.js
  • 樣式均為絞盡腦汁的手寫
• 后台頁面
  • vue-cli、element-ui
• 后端
  • Node.js、MongoDB、docker
• 前后台：已適配PC和Mobile
  • 最近發現了有些手機瀏覽器不兼容的情況，我就一部小米，不好測試，所以請見諒..（PC模擬器無敵）..

「前台頁面」

「前台頁面就不貼圖了，大家可以直接看我的網站 https://raindays.cn」

很多人看到網站，只要是自己弄的網站，都叫做博客

嗯？不是很喜歡這個詞，我比較喜歡稱之為：心情小鎮 or 心靈驛站

頁面說起來很簡單，功能也很簡單，簡單到可能只有首頁首屏，能讓人感受到一絲絲的驚艷。

主要針對路人、游客、所有人開放的，無需注冊賬號、即可評論和查看。

來看你的網站，是給你面子，評個論也是對你有意思。難不成還想我注冊個賬號，才讓我評論和查看文章啊？？告辭（友好性滿分🤓）

這是我的「心情小鎮」or「心靈驛站」，覆蓋了主流博客應有的功能

# 首頁
# 文章詳情（可評論功能
# 文章列表（數據的匯總
# 短語列表（發個朋友圈
# 訂閱通知（第一刻知曉
# 個人介紹（天真的勇敢
# 下雨天頁（安詳或美好

一共 7 個頁面，算是比較簡單，正常的個人網站，上面該有功能都有，該有的動畫過渡也都有，花里胡哨的沒有。

麻雀雖小五臟俱全，完整的展現出一個人的情感，內心的所想所得

「后台頁面」

后台只有管理員才能進入，所以只放后台的圖片🤔

注意：圖片為第一版，后續更新的功能沒有去更新圖片

登錄

第一次進入后台需先進行注冊賬號，賬號只能注冊一次，避免被那啥，如有遺忘，自行操作數據庫🤣

輸入框效果模仿的掘金，人們總是對牛逼的事物，羡慕不已😏~~

首頁

所有數據的匯總，好比每個月的生活費，如果不記賬，一年到頭來，你是否知道自己吃了多少，褲兜又剩幾張。

土豪&&月光族另當別論，有富婆請聯系我一下，郵箱在底部 😂

算了，我還是直接給吧：[e-mail] 😏

發布文章

上傳背景圖和背景音樂，默認上傳到服務器，可在setting選擇

為了網站性能，建議壓縮圖片，並且上傳尺寸按照規定的來

隱藏文章，怎么說呢，開心就好~~

編輯器為主流Markdown，如果還不會，真心建議你學一下，三個步驟就一分鍾學會：

1. 拿出筆和紙，寫
2. 拿出手機拍，紙
3. 上傳到掘金，發

一分鍾從入門到放棄，改用手拿筆寫字，拍照發文章，懂得創新的人永遠走在最前沿 😂

別人笑我太瘋癲，我笑他人看不穿

評論

可刪除、回復評論，查看當前評論的文章，就是不允許編輯...

人家說的都是心里話，就算天王老子來了，也不給特權！！👻

設置

注意：首屏信息需要填寫完整，前台才能正常訪問（備案信息自選）

• 后台信息：昵稱頭像等等（頭像是前后台統一的）
• 網站信息：網站名，描述，SEO等等
• 前台頁面：首頁信息、不同頁面的背景音樂、底部備案信息
• 個人介紹：前台的個人介紹頁，讓大家認識你一下吧~~（可參考我的網站）
• 上傳文件：上傳圖片和音樂，可指定上傳位置，默認為服務器（可選阿里雲OSS）
• 郵件類型：目前僅支持QQ、163郵箱（其他需要的郵箱可自行擴展）
• 評論功能：昵稱、郵箱、管理員標識（前台頁面突出管理員的標識）
• 評論標識：也就是管理員標識，按照填寫的評論郵箱和昵稱進行確認
• 評論通知：發布評論時，發送郵件通知被回復者
• 訂閱通知：發布文章時，群發郵件通知已訂閱的郵箱
• PASS碼：開啟通知功能，需要填寫此碼，具體在郵箱設置（開啟SMTP服務器）可獲得，需跟填寫的郵箱一致
• 修改密碼：需要原密碼，忘了你自己看着辦吧~~
  （小竅門：瀏覽器已保存的賬號密碼，均可查看F12）

（基礎信息，務必填寫完整，以免出現無知的bug，解決bug找我一個十塊錢，不講價，除非給我介紹個女朋友🥺）

前台頁面LOGO

• 找到目錄，替換里面的圖片（需4張，可參考原有的圖片）（/web/static/image/logo/）
• 首頁logo兩張：456*200（一白一黑透明）
• 子頁面的logo：200*200
• 標簽欄的ico圖標：隨意

另：logo的尺寸類似即可，可自己調試，上傳五花八門的圖片當logo也是可以的，主要看個人愛好
注：logo支持iconfont圖標，具體可以看源碼（為了一些不懂操作的人，所以這里使用圖片）

這個設計沒想到吧，要不要來給我打個分啊，快來評論，啊哈哈哈~~

在線卑微，GitHub在這里，第一次發帖求個star🥺

閑言細語

俗話說：“做什么就要有個做什么的樣子，一刻都不能馬虎”。

技術筆記有它存在的意義，紙質書認清了自我的價值，永遠懂得自己的生存之道。

畢竟，無規矩不成方圓！

對於我的網站，很多網友問有沒有模板，肯定沒有啊，這可是我自己手寫出來的啊。當然，我明白問這些問題的同學，目前的能力或想法仍需經歷時間的磨練。

所以，我決定開源出來，讓那些即使是小白鼠、小白兔、小白菜都能上手操作的一個發文章、做筆記、個人介紹的簡單系統。

經過這段時間夜以繼日的折騰，終於結束了，以實際操作來鞏固過往所學，更加深入認識了JavaScript，其中問題最多的非nuxt莫屬，代碼的學習之路無非就是一路挖坑填坑。

只要心有所歸，沿途的風景不管好與壞，一定會成為回憶中最美、最難以忘懷的存在，不虛此行。

過於依賴某些事物，也許事事會有顧慮，不能任憑自我追尋，也許在某一天會一言不發，那么我存在的意義又是什么？？

我時常提醒自己，保持學習，不斷進步才是最終的歸宿，只有屬於自己的，才是最終的安全感來源。

不懂？？不會？？ 沒關系，我可以學，學不會就要更加的努力，付出兩倍、三倍的時間和真心去學，遲早能有學會的那一天。

最后

分享自己的一個全棧簡單項目給大家，感興趣的可以學習一下，有什么建議/bug/優化可以提一下，感謝！！。

最最最重要的一點，求個star🥺

到這兒應該沒啥問題了吧，如果有啥漏洞補缺的，請聯系我一下，謝謝啦~~

我能做到的事，你也可以；別人會的，我們一樣可以做到，請相信自己，這個世界上沒有什么事情是不可能的，加油！！

致迷途道路上的我們，感謝大家的支持，歡迎指點一二，接受指點和建議（不接受噴 /小心臟承受不住😩）

期待與有技術要求的同學一同共事，鄙人郵箱：[e-mail]

（一開始碼着碼着，感覺有點不對勁，這話好像有點多了，又不能算是心情文章，趕緊刪減一下，技術大佬估計最煩的就是長篇大論吧~~😂😂）

生命中的未知數總是千變萬化的，讓人不得不屈服於現實，在25天后，正式加入前端人才庫，開始尋找新的方向和機會。

———— 七月 25, 2020 12:30