Vue、Nuxt服務端渲染、NodeJS全棧項目~面向小白的完美系統~

Hello，你們好，我是李白～～

第一次發帖子，有點小緊張，不知道待會給我點讚的會是哪位帥氣的哥哥，仍是漂亮的姐姐呢，嘿嘿。

浪跡掘金之久，感謝各位大佬們的知識分享，感謝掘金這個平臺，讓我對本身的能力有了深度的認知，同時認識到諸位優秀、有趣的小夥伴們，請你們繼續保持前進！！！

這是一個入門全棧之路的小項目，從設計、前端、後端，一路狂飆的學習，不發水帖，出貼必屬精品。

❝

要麼沉默不語，要麼一語驚人。

❞

先後臺均爲絞盡腦汁的設計，總體風格爲簡約風，人的心靈到達必定階段，心思愈漸愈偏向於簡單，「大道極簡也許纔是最終的歸宿」。（前臺頁面有些部分是參考某開源站）

接觸過WordPress，Hexo等第三方網站系統，可是呢，感受太過於冗餘臃腫，顯得過於雜亂，各類限制和體驗很差等等緣由。

因此決定書寫一片屬於本身的天地，要什麼就有什麼，要長什麼樣就什麼樣。「我是創造者，也是追尋者」。

在線卑微，GitHub在這裏，求個star🥺

閒言細語

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

技術筆記有它存在的意義，紙質書認清了自個人價值，泳衣懂得本身的生存之道。

畢竟，無規矩不成方圓！

對於個人網站，不少網友問有沒有模板，確定沒有啊，這但是我本身手寫出來的啊。固然，我明白問這些問題的同窗，目前的能力或想法仍需經歷時間的磨練。

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

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

❝

只要心有所歸，沿途的風景無論好與壞，必定會成爲回憶中最美、最難以忘懷的存在，不枉此行。

❞

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

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

「不懂？？不會？？」 「不要緊，我能夠學」，學不會就要更加的努力，付出兩倍、三倍的時間和真心去學，早晚能有學會的那一天。

在線卑微，GitHub在這裏，求個star🥺

使用的技術棧

• 自主設計
• 前臺頁面

  • vue的服務端渲染框架Nuxt.js
  • 樣式均爲絞盡腦汁的手寫
  • 適配PC和Mobile端
• 後臺頁面

  • vue-cli、element-ui
• 後端

  • Node.js、MongoDB、Nginx、PM2

具體代碼實現就很少說了，如下主要對功能講解，有興趣同窗的可自行看源碼學習...

「前臺頁面」

前臺頁面就不貼圖了，你們能夠直接看個人網站

不少人看到網站，只要是本身弄的網站，都叫作「博客」

嗯？不是很喜歡這個詞，我比較喜歡稱之爲：「心情小鎮」

頁面提及來很簡單，功能也很簡單，簡單到可能只有首頁首屏，能讓人感覺到一絲絲的驚豔。

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

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

• 首頁
• 文章詳情
• 文章列表
• 短語列表
• 我的介紹
• 下雨天頁

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

不管何種產品，用戶體驗永遠是最前置的，不只僅是視覺上、交互上...

（若是你有本身特別想要的功能，能夠本身改源代碼，或者找我也能夠，可是要收錢，收多少看心情吧（通常都是十萬八萬的收😂））

最亮眼的功能，莫過於文章頁有獨有的背景音樂，書寫一篇心情文章，均可以根據本身的心情來選擇適合的背景音樂，通常心情文章以靜、溫柔、安詳爲主。（love you）

（你非要弄個蹦迪的音樂、史詩級的純音樂，我也不敢有意見啊👯~~）

❝

麻雀雖小五臟俱全，完整的展示出一我的的情感，心裏的所想所得

❞

• 前臺頁面就不貼圖了，你們能夠直接看個人網站
• 在線卑微，GitHub在這裏，求個star🥺

「後臺管理」

後臺只有管理員才能進入，因此只放後臺的頁面圖片🤔

「登陸」

第一次進入後臺需先進行註冊帳號，帳號只能註冊一次，避免被那啥，若有遺忘，自行操做數據庫🤣

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

「首頁」

全部數據的彙總，比如每月的生活費，若是不記帳，一年到頭來，你是否知道本身吃了多少，褲兜又剩幾張。

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

算了，我仍是直接給吧：1915398623@qq.com 😏

「發佈文章」

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

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

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

編輯器爲主流「Markdown」，若是還不會，真心建議你學一下，三個步驟就一分鐘學會：

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

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

❝

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

❞

「評論」

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

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

「設置」

• 後臺信息：暱稱頭像等等（頭像是先後臺統一的）
• 網站信息：網站暱稱，描述，SEO等等
• 前臺頁面：首頁信息、不一樣頁面的背景音樂、底部備案信息
• 我的介紹：前臺的我的介紹頁，讓你們認識你一下吧~~（ 可參考個人網站）
• 上傳文件：上傳圖片和音樂，可指定上傳位置，默認爲服務器（可選阿里雲OSS）
• 評論功能：暱稱、郵箱、管理員標識（前臺頁面突出管理員的標識）
• 評論通知：是否開啓評論郵件通知（需填寫QQ郵箱的PASS碼，郵箱需一致）
• 修改密碼：忘了你本身看着辦吧~~

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

「前臺頁面LOGO」

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

另：logo的尺寸相似便可，可本身調試，上傳五花八門的圖片當logo也是能夠的，主要看我的愛好

（你一個偏心女孩子的女生，我總不能攔着你追尋本身的幸福吧😅）

❝

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

❞

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

「項目部署」

你要有一個屬於本身的服務器，或者免費的平臺，反正能上傳程序的都行。

我用的是阿里雲的服務器，鏡像:Ubuntu 18.04

「服務器安裝程序」

首先, 須要使用命令行進入操做，安裝如下程序：

nodejs   => 後端運行程序
mongodb => 數據庫 pm2 => 保持不間斷運行程序 nginx => 域名指向代理轉發  ## 安裝命令爲  apt install nodejs apt install mongodb-server -y apt install pm2 -g apt install nginx -y 複製代碼

你要接觸過服務器的話，不用我教，你也有辦法安裝，不然仍是挺麻煩的，能夠看下面這個視頻

具體安裝方法，可在b站上學習一下，或則直接找我也可，若是我有時間的話 www.bilibili.com/video/BV18t… (跳過git這一節，up主收益了記得找我😅)

「上傳項目文件」

白哥推薦（FileZilla）此工具，爲了區分環境, 咱們在根目錄新建文件夾data, 並上傳web和server兩個文件夾, 由於admin後臺項目是打包到server文件夾的, 因此在這裏不用上傳

接着分別進入web和server目錄, 各自npm install一下, 安裝成功後, 測試一下是否正常

• 在 server目錄, 執行命令 node index.js, 打印成功則你懂的, 按 crtl+c退出程序
• 在 web目錄, 執行命令 npm run start, 打印成功，能夠進入下一步

「開啓服務」

以上測試都ok的話，咱們可使用pm2來運行程序，進入指定的目錄，使用指定的命令行

pm2 start index.js --name="server pm2 start npm --name "web" -- run start 複製代碼

「Nginx配置」

最後一步，想要網站域名正常訪問的話，還得手動配置nginx, 具體也能夠跟着上面的視頻教學來

首先：安裝後，啓動Nginx，命令start nginx

如下爲必填的關鍵字段，打開nginx配置文件nginx.conf, 路徑通常是：/etc/nginx/nginx.conf。

server {
 listen 443;   server_name xxx.com; // 你的域名,,,,   ##  # SSL Settings  ##   ssl on;   ##  # 開啓https證書地址  ##  ssl_certificate /etc/nginx/xxxx.com.pem;  ssl_certificate_key /etc/nginx/xxxxx.com.key;   ssl_session_timeout 5m;  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;  ssl_prefer_server_ciphers on;   location / {  proxy_pass http://127.0.0.1:8000;  }   location /admin {  proxy_pass http://127.0.0.1:3000;  } }  server {  listen 80;  listen [::]:80;   server_name xxx.com; // 你的域名地址   // 經過rewrite方式把全部http請求也轉成了https請求  rewrite ^(.*)$ https://$server_name$1 permanent;   # reverse proxy  location / {  proxy_pass http://127.0.0.1:8000;  }   location /admin {  proxy_pass http://127.0.0.1:3000;  } } 複製代碼

Nginx上傳文件大小限制的問題, 因此須要加入如下字段, 方能正常上傳

1. 打開nginx配置文件 nginx.conf, 路徑通常是： /etc/nginx/nginx.conf。
2. 在http{}段中加入 client_max_body_size 20m; 20m爲容許最大上傳的大小。
3. 保存後重載一下nginx的配置文件，問題解決。(重載命令: nginx -s reload)

以上填寫的域名，須要解析到服務器，是否開啓https，看我的喜愛吧~~

好比你的域名爲：http://aa.com，那麼後臺則爲：http://aa.com/admin

# Nginx一些操做的命令
$ start nginx // 開啓nginx $ nginx -t // 檢查nginx配置文件 $ nginx -V // 查看版本信息 $ nginx -s reload // 從新加載配置 $ nginx -s quit // 關閉nginx $ nginx -s stop // 中止nginx $ service nginx stop // 中止 $ service nginx start // 啓動 $ service nginx restart // 重啓 複製代碼

到這裏就沒問題了，直接先進入後臺，設置基本信息，ok完美，趕忙回家吃個飯慶祝慶祝~~

「最後」

分享本身的一個全棧簡單項目給你們，感興趣的能夠學習一下，有bug/優化能夠提一下。

最最最重要的一點，GitHub在這裏，新人第一次發帖求個star🥺

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

我能作到的事，你也能夠；別人會的，咱們同樣能夠作到，請相信本身，這個世界上沒有什麼事情是不可能的，加油！！

致迷途道路上的咱們，感謝你們的支持，歡迎指點一二，接受指點和建議（不接受噴 /當心髒承受不住😩）

尋機會，期待與有技術要求的同窗一塊兒共事，鄙人郵箱：1915398623@qq.com

提醒：網站資源有限，請勿水評論，再三強調，請作個有素養的人，謝謝！！
說明：本人的網站，是來記錄心情的，只須要真心和有意義的評論，謝謝！！

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

~~