一个 Vue + Node + MongoDB 博客系统
源码
耗时半载(半个月)的大项目终于完成了。这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB。实现了用户注册、用户登录、博客管理(文章的修改和删除)、文章编辑(Markdown)、标签分类等功能。
很早之前就想写一个个人博客。学了 Vue 之后,把前端部分写出来,然后 Node 一直拖拖拉拉的学了很久,中间又跑去实习了一段时间,所以直到回学校之后才列了个计划把这个项目实现了。
翻出之前写的前端部分,好丑啊,干脆推掉重写吧。前端模仿的是 hexo 的经典主题 NexT ,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成 vue components。
实现的功能
- 文章的编辑,修改,删除
- 支持使用
Markdown
编辑与实时预览 - 支持代码高亮
- 给文章添加标签
- 支持用户注册登录
使用到的技术
前端
- Vue.js
- vue-cli
- vue-router
- vue-resource
- element-ui
- marked
- highlight.js
后端
- Node.js
- Express
- 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 端口。
前端部分
命名视图
所有页面都用到的元素可以写在 App.vue
上面,也可以写成公共组件。我在 App.vue 中使用了命名视图,因为 sidebar 这个组件有的页面需要有的不需要,不需要的时候就不用加载。
<!--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’ 开头。注册页和登录页写在一起了,上面有两个按钮“注册”和“登录”(我好懒-_-)。
// 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 用于消息提醒和标签分类。并不需要整个引入,而是使用按需引入。
// 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
用于向后端发起请求。打通前后端的关键。
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// success callback
}, response => {
// error callback
});
get 请求
前端发起 get 请求,当请求成功被返回执行第一个回调函数,请求没有被成功返回则执行第二个回调函数。
this.$http.get('/api/articleDetail/' + id).then(
response => this.article = response.body,
response => console.log(response)
)
后端响应请求并返回结果
// 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 请求,当请求成功被返回执行第一个回调函数,请求没有被成功返回则执行第二个回调函数。
// 新建文章
// 即将被储存的数据 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)
)
后端存储数据并返回结果
// 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
运行服务器。
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 学的也是半吊子,所以暂时放着,等我搞清楚了再来填坑。
收获
- 学一个新模块,新框架第一步就是阅读官方文档。
- 不要觉得读文档费时间,认真的读一遍官方文档比你瞎折腾来得有效率。
- 阅读与你项目相关的优秀项目的源码,学习别人如何组织代码。
- 自己的解决方案不一定是最优解,不过在找到最优解之前不妨自己先试试。
- 框架模块的使用都不难,套API的活每个人都能干,只是快与慢的差别。
- 尝试思考这个API是如何实现的。
- 了解了完整的web应用是如何运作的,包括服务器,数据库,前端是如何联系在一起的。
博客首发地址:https://www.jianshu.com/u/13cd86311525
一个 Vue + Node + MongoDB 博客系统的更多相关文章
- Vue+node.js实现一个简洁的个人博客系统
本项目是一个用vue和node以及mysql实现的一个简单的个人博客系统,整体逻辑比较简单.但是可以我们完整的了解一个项目从数据库到后端到前端的实现过程,适合不太懂这一块的朋友们拿来练手. 本项目所用 ...
- 基于 node 搭建博客系统(一)
系统分为两端,分别实现. 管理员端: 功能 :个人信息,设置,发布随笔,随笔列表,删除随笔,查找,文章 等. 技术点:Boostrap + AdminLTE; 基于nodejs 实现的express ...
- 推荐一个简洁优雅的博客系统,farbox
这是我用farbox搞的一个博客:http://www.jsnull.com/ 特点: 1.无数据库,数据存在dropbox里,需要自己注册一个dropbox帐号 2.静态文本文件即是文章,可以在任何 ...
- vue+node+mongodb前后端分离博客系统
感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...
- 项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)
本章主要讲什么(一句话)? <项目实战:基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)> -- 基于MongoDB的MyBlog数据库知识技术储备(上 ...
- 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统
很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...
- Vue、Node全栈项目~面向小白的博客系统~
个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议 ...
- 使用Docker部署Spring-Boot+Vue博客系统
在今年年初的时候,完成了自己的个Fame博客系统的实现,当时也做了一篇博文Spring-boot+Vue = Fame 写blog的一次小结作为记录和介绍.从完成实现到现在,也断断续续的根据实际的使用 ...
- 欢迎阅读daxnet的新博客:一个基于Microsoft Azure、ASP.NET Core和Docker的博客系统
2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客.当然,我写博客也不是从2008年才开始的,在更早时候,也在CSDN和系统分析员协会(之后名为"希赛网" ...
随机推荐
- [HDUOJ1312]Red And Black (经典的DFS)
Hot~~招聘——亚信科技,巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Red and Black Time Limit: ...
- 【解题报告】VijosP1351 棋盘制作
思路: 1. 矩形:用f[i][j][1]表示右下角为(I,j),最大的,符合条件的矩形的长,用f[i][j][2]表示右下角为(I,j),最大的,符合条件的矩形的高,预设f内所有元素为1 If(a[ ...
- java Thread和Runable的深刻理解
线程(Thread)是指程序的运行流程,多线程机制指同时运行多个程序块. Java中实现多线程有两种方法:继承Thread类:实现Runnable接口. Thread类的run()方法的制定者:接口R ...
- [OpenGL] mac上运行NateRobin的OpenGL教程找不到 data file 解决方案
之前买的OpenGL编程指南第七版一直没看,最近开始看了,然后按照教程推荐的去指定网址下载NateRobin的OpenGL教程,但发现网址已经提示Error:404了, 然后谷歌搜索到可用的下载网址为 ...
- NDK(三方库引入、Mk文件)
NDK笔记-----第三方库引入 一.字符操作: 1 二.NDK*(JNI)对象操作: 2 1.C++调用java对象 3 三.Android.mk说明: 3 四.Application.mk说明 3 ...
- C++标准库之vector(各函数及其使用全)
原创作品,转载请注明出处:http://www.cnblogs.com/shrimp-can/p/5280566.html iterator类型: iterator:到value_type的访问,va ...
- 浅谈js中的浅拷贝和深拷贝
在js中如何把一个对象里的属性和方法复制给另一个对象呢? 下面举一个例子来说明: var person={name:'chen',age:18}; var son={sex:'男'}; functio ...
- echarts柱图自定义为硬币堆叠的形式
看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...
- 初识 Javascript.02 -- Date日期、Math对象、数据类型转换、字符串、布尔Boolean、逻辑运算符、if else 、三元表达式、代码调试方法、
Date()对象: Date对象用于处理日期和时间. 1.1 Math对象 ◆Math.ceil() 天花板函数 向上取整 只取整数,不足则进1 ◆Math.floor() 地板函数 ...
- 函数调用过程&生成器解释
摘自马哥解答,感谢. 函数调用过程: 假设程序是单进程,单执行流,在某一时刻,能运行的程序流只能有一个.但函数调用会打开新的执行上下文,因此,为了确保main函数可以恢复现场,在main函数调用其它函 ...