利用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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP的全局错误处理详解
2016/04/25 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
浅谈es6中的元编程
2020/12/01 Javascript
Python字典简介以及用法详解
2016/11/15 Python
python生成excel的实例代码
2017/11/08 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
编程输出如下图形
2013/11/24 面试题
家长会演讲稿范文
2014/01/10 职场文书
公司寄语大全
2014/04/10 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS