Vue.js+Node.js+Mongodb+Express+Bootstrap搭建個人博客

1 概述

花了半年時間學習，然後開發的個人博客，目前我的博客正在使用。博客前端展示頁面見這裏，順便安利一波小站，嘻嘻。
文末會給出源碼哈，適合新手參考。
後臺管理部分如圖，實現最基礎的增刪改查。
後臺首頁。

後臺管理，包括博客的刪除、修改和是否隱藏。



寫博客。

2 參考資料

學習的課程是 邵山歡老師的前端課程，如果有需要的話，可以給我留言。
然後參考的教程有：N-blog
前端展示頁面參考：vue-bootstrap-blog
後臺頁面參考：startbootstrap-sb-admin-2

3 技術棧

前端使用到的技術有:

• vue
• vue-router
• vuex
• bootstrap-vue

前端用到的插件有:

• sweetalert2 (彈出框，注意有2，不是sweetalert，兩個用法有較大差別)
• mavon-editor (markdown語法編輯器)
• vue-axios (ajax)
• vue-backtotop (回到頂部按鈕)
• sha1
• @voerro/vue-tagsinput (標籤輸入)

後端用到的技術棧有:

• node.js
• express
• mongodb
• mongoose
• multer
• jsonwebtoken

後端用到的插件有:

• config-lite (方便配置)
• body-parser
• express-winston (記錄請求日誌)

4 技術點詳解

**注意，本博客源碼使用的是vue腳手架創建的項目。所以下面的部分都是針對腳手架項目而言的喲。**源碼文章末尾會給出鏈接。

4.1 技術圖譜

技術圖譜其實就是svg，當然這不是一個一個點用代碼寫出來的，使用svg編輯器繪製出來的。
是個體力活來的。我個人畫了兩個，一個用在移動端，一個用在電腦端。根據頁面寬度，具體來選擇使用哪一個。

4.2 axios開發環境請求跨域的問題

我們知道開發時前端使用axios請求的端口和node.js後端的監聽端口是不一樣的，所以開發環境下會有請求跨域的問題，
那麼開發環境下，解決跨域的問題的方案是使用代理，直接config文件夾下的index.js腳本中dev對象中添加如下代碼：
這個配置的作用就是隻要url是以/api開頭的，都轉發到http://127.0.0.1:3000那裏，比如http://127.0.0.1:8080/api/articles/5將轉發到http://127.0.0.1:3000/articles/5。詳細解釋可以參見這裏。

    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

但是如果是光配置proxyTable的話，那麼所有axios請求的時候就都要在url上加上/api，而發佈生產的時候又都把所有axios請求的/api給去掉，這顯然是不現實的。那麼該怎麼辦呢？
答案是強行設置axios的baseUrl，開發環境設置一個，生產環境又設置一個。
config文件夾下添加了一個配置文件api.config.js

var baseURL = ''

if (process.env.NODE_ENV === 'development') {//開發環境
    baseURL = '/api';
} else if (process.env.NODE_ENV === 'production') {//生產環境
    baseURL = 'http://laowangomg.com/';
}

export default {
  baseURL
}

然後在src文件夾下的axios.js(這個腳本用來攔截請求和回覆，具體見源碼)中添加如下代碼。

// 發佈時去除請求中的api
axios.defaults.baseURL = apiConfig.baseURL

這樣配置下來，我們在使用axios發送請求的時候就不用再在url前添加/api，按照正常的使用就行了。舉個例子，現在我們要請求/articles/5，那麼我們在寫代碼的時候就寫成/articles/5，不用寫成/api/articles/5了。上面的配置，在開發環境下會自動將請求到
http://127.0.0.1:3000/articles/5，而在生產環境下會請求到http://laowangomg.com/articles/5。
這樣，開發跨域和生產的問題就解決啦。

4.3 標籤輸入

標籤輸入是使用的插件@voerro/vue-tagsinput。bootstrap有內置的標籤輸入，但是沒得提示功能，所以就用了這個插件。

4.4 markdown語法編輯器

使用的是mavon-editor插件。有點要注意的就是這個插件和sweetalert2同時使用時會把sweetalert2的彈出框給擋住，原因是mavon-editor的z-index比sweetalert2的彈出框大，所以要寫個樣式把sweetalert2的z-index給提高。
還有就是隻顯示的配置如下：

<mavon-editor
  v-model="compiledMarkdown"
  :toolbarsFlag=false
  :editable=false
  :subfield=false
  codeStyle="atelier-dune-dark"
  defaultOpen="preview"
/>

4.5 webpack打的包太大解決

使用webpack-bundle-analyzer分析。
先安裝，然後在build文件夾下的webpack.dev.conf.js中引入並添加如下代碼。

//引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// plugins中添加
new BundleAnalyzerPlugin()

這樣每次打包後就會彈出打包大小的分析。
我第一次打包的時候發現包很大，總共差不多6MB，後來經過優化後只剩下1MB（雖然1MB仍然有點大，我那網站第一次加載仍然需要7到8秒）。
主要使用的方式是設置webpack的externals，具體見這裏。原理是把不常改變的包改用爲cdn加載，發佈打包的時候不把這些包打進去。
具體操作如下：
1.在build文件下的webpack.base.conf.js中添加externals

  externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'bootstrap-vue': 'BootstrapVue',
    'highlight.js': 'hljs'
  }

2.其他地方都不用改，只需在index.html中的head內引入對應的鏈接即可，如下

    <!-- 引入Vue.js -->
    <script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>
    <!-- 引入vuex.js -->
    <script src="https://cdn.staticfile.org/vuex/3.1.1/vuex.min.js"></script>
    <!-- 引入vue-router -->
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <!-- 引入Bootstrap Vue -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

4.6 jsonwebtoken

token驗證。具體細節見這篇文章。
上文中會涉及到Windows中使用OpenSSL生成密鑰，見這篇文章。

4.7 mongodb數據庫設置權限

沒啥說的，他們講得比我好。
官方文檔：
https://docs.mongodb.com/manual/tutorial/enable-authentication/
參考文章：
https://www.cnblogs.com/yulinfeng/p/10226977.html

$ mongo
$ show dbs
$ use admin
$ db.createUser({user:"admin",pwd:"admin",roles:[{role:"userAdminAnyDatabase", db:"admin"}]})
// 然後重啓數據庫
$ mongod --auth --dbpath c:\...
$ mongo
$ use admin
$ db.auth("admin", "admin")
$ use blog
$ db.createUser({user:"myTester",pwd:"123456",roles:[{role:"readWrite", db:"blog"}]})

//要刪除某個用戶，需要先登陸admin，然後切換到要刪除的數據，
$ mongo
$ use admin
$ db.auth("admin", "admin")
$ use blog
$ db.dropUser("myTester")

//查看所有用戶，需先登陸admin，然後查看
$ mongo
$ use admin
$ db.auth("admin", "admin")
$ db.system.users.find()

//總之角色的創建、查看、刪除都必須要在admin的權限下

剛剛纔發現上次上線的版本代碼有問題，我擦。等修改測試好了再上傳GitHub吧。

5 遺留問題

5.1 驚天大bug

由於用的是單頁面做的，結果上線後才發現點擊單篇文章的鏈接會直接跳轉到首頁，這就造成了文章根本沒辦法被分享出去！暫時還沒去想怎麼修改這個問題，emmm~~~所以各位如果想要有分享的功能的話，這個項目是不行的哦。

5.2 todo

• 後臺記錄訪問信息，如訪問量、訪問ip等
• 完善後臺日志記錄
• 首頁搜索功能
• 留言功能（註冊）

最後，期待已久的源碼。