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等
• 完善后台日志记录
• 首页搜索功能
• 留言功能（注册）

最后，期待已久的源码。