利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）

前言

这篇文章实现的博客系统使用 Vue 做前端框架，Node + express 做后端，数据库使用的是 MongoDB。实现了用户注册、用户登录、博客管理（文章的修改和删除）、文章编辑（Markdown）、标签分类等功能。

前端模仿的是 hexo 的经典主题 NexT ，本来是想把源码直接拿过来用的，后来发现还不如自己写来得快，就全部自己动手实现成 vue components。

实现的功能

      1.文章的编辑，修改，删除

      2.支持使用 Markdown 编辑与实时预览

      3.支持代码高亮

      4.给文章添加标签

      5.支持用户注册登录

使用到的技术

前端

      1.Vue.js

      2.vue-cli

      3.vue-router

      4.vue-resource

      5.element-ui

      6.marked

      7.highlight.js

后端

      1.Node.js

      2.Express

      3.Mongoose

基本思路

前端使用 vue-router 操作路由，实现单页应用的效果。使用 vue-resource 从后台获取数据，数据的处理全部都在前端，所以后端要做的事情很简单——把前端打包好的数据存进数据库中和从数据库中取出数据。前后端使用统一的路由命名规则。

项目目录

| app.js  后端入口| index.html  入口页面| .babelrc  babel配置| .gitignore  git配置| package.json| webpack.config.js webpack配置||-dist  vue打包生成的文件||-node_modules 模块||-server  后端 | check.js | db.js  数据库 __| router.js 路由||-src   前端 |-assets  静态资源 |-components 组件 | App.vue | main.js

webpack 配置

webpack 大部分是 vue-cli 自动生成的，添加了让前后端http请求都转到node的3000端口，而不是前端的8080端口的配置。

devServer: { historyApiFallback: true, noInfo: true, //让前后端http请求都转到node的3000端口，而不是前端的8080端口 proxy: { '/': { target: 'http://localhost:3000/' } } }

这里涉及一个新手可能会不明白的问题（我之前就捣鼓了半天）。

开发的时候要先打开数据库 MongoDB ,使用命令 mongod。

然后打开后端服务器 node app，后端监听 3000 端口。

最后打开前端开发模式 npm run dev，前端启动了一个 webpack 服务器，监听 8080 端口用于热刷新。通过配置把前端的http请求转到 3000 端口。