正文 

当前位置： 首页 > 代码 > java教程

利用vue.js+node.js+mongodb实现一个博客系统（附源码）

weijiangping weijiangping     2022-11-22     771

关键词：

前言

本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统，这个博客使用Vue做前端框架，Node+express做后端，数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能

实现的功能

      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 从后台获取数据，数据的处理全部都在前端，所以后端要做的事情很简单——把前端打包好的数据存进数据库中和从数据库中取出数据。前后端使用统一的路由命名规则。

项目目录

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 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端口的配置。

?
1
2
3
4
5
6
7
8
9
10
11
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 端口。

前端部分

命名视图

所有页面都用到的元素可以写在 App.vue 上面，也可以写成公共组件。我在 App.vue 中使用了命名视图，因为 sidebar 这个组件有的页面需要有的不需要，不需要的时候就不用加载。

?
1
2
3
4
5
6
7
8
9
10
<!--App.vue-->
<template>
 <div id="app">
 <div class="black_line"></div>
 <div id="main">
 <router-view name="sidebar"></router-view>
 <router-view></router-view>
 </div>
 </div>
</template>

router

路由的配置写在 main.js 中，分为前台展示和后台管理。后台管理统一以 ‘/admin‘ 开头。注册页和登录页写在一起了，上面有两个按钮“注册”和“登录”（我好懒-_-）。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
// main.js
const router = new VueRouter(
 routes: [
 path: ‘/‘, components: default: article, sidebar: sidebar,
 path: ‘/article‘, components: default: article, sidebar: sidebar,
 path: ‘/about‘, components: default: about, sidebar: sidebar,
 path: ‘/articleDetail/:id‘, components: default: articleDetail, sidebar: sidebar,
 path: ‘/admin/articleList‘, components: default: articleList, sidebar: sidebar,
 path: ‘/admin/articleEdit‘, component: articleEdit,
 path: ‘/admin/articleEdit/:id‘, component: articleEdit,
 path: ‘/admin/signin‘, component: signin
 ]
)

element UI

使用了 element 用于消息提醒和标签分类。并不需要整个引入，而是使用按需引入。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// main.js
// 按需引用element
import Button, Message, MessageBox, Notification, Popover, Tag, Input from ‘element-ui‘
import ‘element-ui/lib/theme-default/index.css‘
 
const components = [Button, Message, MessageBox, Notification, Popover, Tag, Input]
 
components.forEach((item) =>
 Vue.component(item.name, item)
)
 
const MsgBox = MessageBox
Vue.prototype.$msgbox = MsgBox
Vue.prototype.$alert = MsgBox.alert
Vue.prototype.$confirm = MsgBox.confirm
Vue.prototype.$prompt = MsgBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification

vue-resource

用于向后端发起请求。打通前后端的关键。

?
1
2
3
4
5
6
// GET /someUrl
 this.$http.get(‘/someUrl‘).then(response =>
 // success callback
 , response =>
 // error callback
 );

get 请求

前端发起 get 请求，当请求成功被返回执行第一个回调函数，请求没有被成功返回则执行第二个回调函数。

?
1
2
3
4
this.$http.get(‘/api/articleDetail/‘ + id).then(
 response => this.article = response.body,
 response => console.log(response)
)

后端响应请求并返回结果

?
1
2
3
4
5
6
7
8
9
10
// router.js
router.get(‘/api/articleDetail/:id‘, function (req, res)
 db.Article.findOne( _id: req.params.id , function (err, docs)
 if (err)
 console.error(err)
 return
 
 res.send(docs)
 )
)

post 请求

前端发起 post 请求，当请求成功被返回执行第一个回调函数，请求没有被成功返回则执行第二个回调函数。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 新建文章
// 即将被储存的数据 obj
let obj =
 title: this.title,
 date: this.date,
 content: this.content,
 gist: this.gist,
 labels: this.labels
this.$http.post(‘/api/admin/saveArticle‘,
 articleInformation: obj
).then(
 response =>
 self.$message(
 message: ‘发表文章成功‘,
 type: ‘success‘
 )
 // 保存成功后跳转至文章列表页
 self.refreshArticleList()
 ,
 response => console.log(response)
)

后端存储数据并返回结果

?
1
2
3
4
5
6
7
8
9
10
11
// router.js
// 文章保存
router.post(‘/api/admin/saveArticle‘, function (req, res)
 new db.Article(req.body.articleInformation).save(function (err)
 if (err)
 res.status(500).send()
 return
 
 res.send()
 )
)

后端部分

后端使用 express 构建了一个简单的服务器，几乎只用于操作数据库。

app.js 位于项目根目录，使用 node app 运行服务器。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const express = require(‘express‘)
const fs = require(‘fs‘)
const path = require(‘path‘)
const bodyParse = require(‘body-parser‘)
const session = require(‘express-session‘)
const MongoStore = require(‘connect-mongo‘)(session)
const router = require(‘./server/router‘)
const app = express()
 
const resolve = file => path.resolve(__dirname, file)
 
app.use(‘/dist‘, express.static(resolve(‘./dist‘)))
app.use(bodyParse.json())
app.use(bodyParse.urlencoded( extended: true ))
app.use(router)
 
// session
app.set(‘trust proxy‘, 1) // trust first proxy
app.use(session(
 secret: ‘blog‘,
 resave: false,
 saveUninitialized: true,
 cookie:
 secure: true,
 maxAge: 2592000000
 ,
 store: new MongoStore(
 url: ‘mongodb://localhost:27017/blog‘
 )
))
 
app.get(‘*‘, function (req, res)
 let html = fs.readFileSync(resolve(‘./‘ + ‘index.html‘), ‘utf-8‘)
 res.send(html)
)
 
app.listen(3000, function ()
 console.log(‘访问地址为 localhost:3000‘)
)

给自己挖了一个坑。因为登录之后需要保存用户状态，用来判断用户是否登录，如果登录则可以进入后台管理，如果没有登录则不能进入后台管理页面。之前写 node 的时候用的是 session 来保存，不过spa应用不同于前后端不分离的应用，我在前端对用户输入的账号密码进行了判断，如果成功则请求登录在后端保存 session。不过不知道出于什么原因，session 总是没办法赋值。因为我 node 学的也是半吊子，所以暂时放着，等我搞清楚了再来填坑。

收获

      1.学一个新模块，新框架第一步就是阅读官方文档。

      2.不要觉得读文档费时间，认真的读一遍官方文档比你瞎折腾来得有效率。

      3.阅读与你项目相关的优秀项目的源码，学习别人如何组织代码。

      4.自己的解决方案不一定是最优解，不过在找到最优解之前不妨自己先试试。

      5.框架模块的使用都不难，套API的活每个人都能干，只是快与慢的差别。

      6.尝试思考这个API是如何实现的。

      7.了解了完整的web应用是如何运作的，包括服务器，数据库，前端是如何联系在一起的。

源码：可以点击这里或者本地下载

vue.js实践：一个node.js+mongodb+vue.js的博客内容管理系统

项目来源以前曾用过WordPress搭建自己的博客网站，但感觉WordPress很是臃肿。所以一直想自己写一个博客内容管理器。正好近日看完了Vue各个插件的文档，就用着Vue尝试写了这个简约的博客内容管理器（CMS）。嗯，我想完成的功能... 查看详情

老卫拆书009期：vue+node肩挑全栈！《node.js+express+mongodb+vue.js全栈开发实战》开箱

今天刚拿到一本新书，叫做《Node.js+Express+MongoDB+Vue.js全栈开发实战》，做个开箱。外观先从外观上讲，这本是全新的未开封的，膜还在。 这本书介绍从技术原理到整合开发实战，以丰富的项目展现全... 查看详情

Vue.js 在哪里？

...明白这是什么语言！我用Node.js和Jquery开发了一些网站....Mongodb我认为Web应用程序需要两个部分，例如（apache、Mysql、Node.js....等）但Vue.js真的很奇怪，因为vue.js只是一方面，但提供we 查看详情

尽管视图初始化，有时仍会显示已删除的项目-Vue，Node.js [重复]

...间】：2021-07-3015:26:51【问题描述】：我在Vue.js、Node.js和MongoDB中创建应用程序。我有一个项目列表，每个项目旁边都有删除按钮。通常它可以 查看详情

vue.js开发环境搭建

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入：npminstall-gcnpm–registry=https://registry.npm.taobao.org，回车，等待安装...3.安装全局vue-cli脚手架,用于帮助搭 查看详情

vue.js开发环境搭建

1、安装node.js，忽略2、基于node.js，利用淘宝npm镜像安装相关依赖在cmd里直接输入：npminstall-gcnpm–-registry=https://registry.npm.taobao.org，回车，等待安装...3、安装全局vue，用于帮助搭建所需的模板框架在cmd里，1).输入：cnpminstall-gvu... 查看详情

vue.js开发环境搭建

1、安装node.js，忽略2、基于node.js，利用淘宝npm镜像安装相关依赖在cmd里直接输入：npminstall-gcnpm–-registry=https://registry.npm.taobao.org，回车，等待安装...3、安装全局vue，用于帮助搭建所需的模板框架在cmd里， 1).输入：cnpminstall-g... 查看详情

1vue.js开发环境搭建

来源是:http://www.cnblogs.com/ganmy/p/6029774.html1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入：npminstall-gcnpm–-registry=https://registry 查看详情

如何使用其他字段进行文件上传，例如：使用 Vue.js 在 Node.js 中的标题、名称、图像、image2

...称、价格、颜色、图像、图像2的产品我如何将其保存在mongoDb中？ 查看详情

Node.js 和 Vue.js，为啥 Refresh 让 vue.js 的 store 清晰？我如何在 vue.js 中使用上传的图片？

】Node.js和Vue.js，为啥Refresh让vue.js的store清晰？我如何在vue.js中使用上传的图片？【英文标题】：Node.jsandVue.js,whyRefreshmakevue.js\'sstoreclear?Andhowcaniuseuploadedimageinvue.js?Node.js和Vue.js，为什么Refresh让vue.js的store清晰？我如何在vue.js中使... 查看详情

在 Node.js 和 Vue.js 之间共享 TypeScript 代码

】在Node.js和Vue.js之间共享TypeScript代码【英文标题】：SharingTypeScriptcodebetweenNode.jsandVue.js【发布时间】：2021-09-1803:43:50【问题描述】：我很难弄清楚如何做到这一点。我的环境是：Node.js16.1.xVue.js3.xTypeScript4.2.4我的目录结构是这样... 查看详情

windows10安装node.js，vue.js以及创建第一个vue.js项目(代码片段)

【工具官网】Node.js: http://nodejs.cn/淘宝NPM: https://npm.taobao.org/一、安装环境1、本机系统：Windows10Pro（64位）2、Node.js：v6.9.2LTS（64位）二、安装Node.js步骤1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/2、选安装目录... 查看详情

node创建一个vue项目

...好的和webpack等打包工具配合使用。首先Vue的安装依赖于node.js，要保证你的计算机上已经安装过node.js。如何查看node是否安装或者node版本呢 查看详情

端口错误：heroku 中的 vue.js+node.js 项目

】端口错误：heroku中的vue.js+node.js项目【英文标题】：Errorwithports:vue.js+node.jsprojectinheroku【发布时间】：2018-08-2507:53:27【问题描述】：尝试部署我的全栈项目。它在本地构建并运行良好，但在Heroku中，在“gitpushherokumaster”命令和... 查看详情

Vue.js：使用新数据操作数组并发布表单

...我的Vue.js应用程序中，我想将表单数据发布到我的Node.js/MongoDB后端。这是我的源代码：https://github.com/markusdanek/t2w-vue/blob/master/src/compone 查看详情

在 Node JS 应用程序中实现单例 mongoDB DB 对象

】在NodeJS应用程序中实现单例mongoDBDB对象【英文标题】：ImplementingsingletonmongDBDBobjectinNodeJSapplication[duplicate]【发布时间】：2018-10-1816:56:59【问题描述】：目前正在使用express,socket.io的nodeJS后端开发，并使用MongoDB作为其数据库。我... 查看详情

不要争了！技术选择没那么重要

...比Vue.js更好？Node.js能否取代Java？究竟应该选择MySQL还是MongoDB呢?认真对比不同技术之间的优劣是非常有价值的事，可以加深我们对技术的理解，根据业务场景选择更合适的技术。但是，对技术选择过于较真，争得面红耳赤，对于... 查看详情

将 PHP 会话与 Vue/Node.js 集成

】将PHP会话与Vue/Node.js集成【英文标题】：IntegratePHPsessionswithVue/Node.js【发布时间】：2018-08-1122:32:08【问题描述】：我有一个PHP应用程序，它对用户进行身份验证、执行MySQL查询并依赖于$_SESSIONcookie。一切正常，但我意识到我需要... 查看详情