vue node mysql博客_利用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: {

'/': {