利用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: { '/': { 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应用是如何运作的,包括服务器,数据库,前端是如何联系在一起的。
源码:可以或者
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。