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


Posted in Javascript onApril 24, 2017

前言

这篇文章实现的博客系统使用 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 端口。

前端部分

命名视图

所有页面都用到的元素可以写在 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 学的也是半吊子,所以暂时放着,等我搞清楚了再来填坑。

收获

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

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

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

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

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

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

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
理解JS绑定事件
Jan 19 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
浅析Angular2子模块以及异步加载
Apr 24 #Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 #Javascript
详解AngularJS 路由 resolve用法
Apr 24 #Javascript
详解AngularJS ui-sref的简单使用
Apr 24 #Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 #Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 #Javascript
angular中实现控制器之间传递参数的方式
Apr 24 #Javascript
You might like
NT IIS下用ODBC连接数据库
2006/10/09 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
介绍一下Linux中的链接
2016/06/05 面试题
期末总结的个人自我评价
2013/11/02 职场文书
普通员工辞职信
2014/01/17 职场文书
违反学校规定检讨书
2014/01/18 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书