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

  • 2020 年 7 月 26 日
  • 筆記

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

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

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

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

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

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

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

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

項目部署

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

  1. 在 GitHub 拉取項目 Mood

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

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

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

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

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

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

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

前台網站：//aa.com，後台則為：//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模擬器無敵）..

「前台頁面」

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

很多人看到網站，只要是自己弄的網站，都叫做部落格

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

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

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

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

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

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

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

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

「後台頁面」

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

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

登錄

第一次進入後台需先進行註冊帳號，帳號只能註冊一次，避免被那啥，如有遺忘，自行操作資料庫🤣

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


首頁

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

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

算了，我還是直接給吧：[email protected] 😏


發布文章

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

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

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

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

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

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

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


評論

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

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


設置

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

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

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


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

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

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

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

閑言細語

俗話說：「做什麼就要有個做什麼的樣子，一刻都不能馬虎」。

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

畢竟，無規矩不成方圓！

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

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

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

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

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

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

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

最後

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

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

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

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

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

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

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

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

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

Tags:

VirMach 便宜 VPS