iBlog

環境準備

• Node.js v14.15.5
• MongoDB v4.2.17

安裝MongoDB資料庫

進入官網下載，版本是4.2.17，平台是Windows，安裝套件為msi格式

專案開發

1. 克隆項目至本地：

$ git clone [email protected]:miqilin21/vue-blog.git
$ cd vue-blog
$ pnpm i

2. 安裝前後台(admin、web)及後端(server)項目依賴：

$ pnpm install-all

3. 運行前後台(admin、web)及後端(server)項目：

$ pnpm serve-all

4. 開啟瀏覽器預覽：

http://localhost:8080 開啟前臺本地頁面；http://localhost:8088 開啟後臺本地頁面。

第一次後台admin登陸時請先註冊用戶，登入後可以將註冊按鈕隱藏以防登入帳號外洩。

後台管理系統

• 新增分類

• 分類列表(增刪改查)

• 新增文章

• 文章列表(增刪改查)

• 文章評論列表

• 新增友鏈

• 友鏈列表(增刪改查)

• 留言列表

• 留言用戶列表

• Markdown 編輯器集成

• 圖片上傳功能

• 新增用戶

• 用戶列表(增刪改查)

• 通用增刪改查介面實作(中介軟體resourceMiddleware)

• 登入註冊功能

• 登出功能

• 新增jwt 校驗（1. 使用者名稱查找2. 密碼校驗3. 返回token）

• 新增http 攔截器（request、response)

部落格系統

• 部落格首頁UI
• 部落格首頁介面實現
• 部落格歸檔頁面UI
• 部落格歸檔頁面介面實現
• 部落格標籤頁面UI
• 部落格標籤頁面介面實現
• 部落格文章頁面UI
• 部落格文章頁面介面實現
• 部落格友鏈頁面UI
• 部落格友鏈頁面介面實現
• 部落格留言頁面UI
• 部落格留言頁面介面實現

配置注意點

1. 評論頁面回覆他人評論採用的是你的QQ郵箱進行同步通知，需要在server/plugins/sendEmail.js中進行郵箱配置，如何取得QQ郵箱授權碼見下圖（在QQ郵箱的設定-帳號頁面）。

2. 評論主帳戶的配置（主帳戶用於郵箱回复，所以評論建立的帳戶郵箱要和上一步QQ郵箱授權碼的郵箱為同一個），同時需要在web/src/commentConfig.js中進行評論帳戶的設置（注意topNickName需要和評論建立的主帳號暱稱一致， topParentId可從後台頁面取得），主帳號被清除的話要重新進行設定。
3. 關於後台的圖片上傳：預設是上傳到本地，這種方式的話對於伺服器要求比較高，自然前端的載入速度會受影響，可以選擇用阿里雲的oss進行上傳及儲存，需要將server/routes/admin/index.js中關於阿里雲oss圖片上傳的程式碼註解解除，同時將本地圖片上傳的程式碼註解掉，最後將你的阿里雲oss配置填入即可。

專案打包部署

• web、admin 專案打包(根目錄下執行pnpm build-all指令)
• 域名購買
• 網域解析
• linux 雲端伺服器購買
• git 安裝, ssh key 新增
• pm2 行程管理
• ngnix 配置
• mongodb 配置
• mongodb 資料從本地遷移至伺服器
• 七牛雲cdn 全站免費加速

線上伺服器部署可參考這份指南。

部落格後台管理系統

部落格系統

歡迎Star，Issues

• 您的Star，是我不斷更新維護的動力！ ！ ！
• 若在使用過程中，存在某些問題，歡迎Issues

To Do List

• 效能優化，圖片需要壓縮處理，預先載入處理
• 為博文頁面加上搜尋功能
• 瀏覽器相容問題，行動裝置適配。只用了自己電腦的Googlechrome 瀏覽器開發和手機適配效果，其他種種都沒試，不過不建議行動裝置使用，電腦登陸效果更佳
• 解決vue 的seo 問題及刷新渲染頁面抖動問題。先暫時做vue 預渲染，不排除以後會做vue 服務端渲染或nuxt.js 服務端渲染
• 整理代碼，拆分出組件。讓結構更清晰，程式碼量更少
• 利用typescript 重構整個項目
• 想到有趣的功能也會慢慢加上，持續開發...