基于 Vue+express 的博客项目

阅读 4272
收藏 200
2017-02-22
原文链接:www.jianshu.com

一个前端基于Vue2.0全家桶,后端基于Express+Mongodb的前后端分离博客。前端界面使用了flexbox+rem布局,后端界面使用了element ui。本项目可以作为一个前端进阶项目,从前端flexbox布局到前端框架的使用,再到后端以及数据库,是一个打通前后端流程的一个项目。由于最近刚换了域名,正在备案中,所以目前没有线上演示,不过可以看一下下面的动态图特效。欢迎大家前来star。如果有任何问题,可以给我留言,我们互相学习讨论,一起进步。

项目地址

特点

  • 支持 MarkDown 编辑

  • 支持代码高亮

  • 支持移动端浏览

功能展示展示

PC前台博客演示


移动端前台演示


后台管理演示


若图片无法显示则点击这里:

pc前端功能展示

移动前端功能展示

pc后端功能展示

前端工具

  • Vue2.0

  • Vue-Router

  • Vuex

  • axios

  • element ui

前端布局采用flexbox+rem布局,关于flexbox请阅读一个完整的Flexbox指南以及这篇最新的理解Flexbox:你需要知道的一切。下一篇文章我会把本博客中的flexbox布局作为示例来讲述

本项目还采用了手机端适配,关于移动端的学习资料请按照我下面罗列的资料按顺序仔细阅读。

  1. 移动端调试

  2. 介绍vieport

  3. 使用Flexible实现手淘H5页面的终端适配

后端工具

  • express

  • mongodb(mongolass)

后端的管理界面我直接使用了element ui这个基于vue的组件库,很强大.

关于mongolass请阅读为什么使用mongolass 以及从零开始写一个 Node.js 的 MongoDB 驱动库

Notice

  • 前后端启动时的路径不一样,前端在项目根目录,后端在servser根目录,其实可以把后端分离出来。

  • 因为是前后端分离项目,必然涉及到跨域,使用webpack的proxyTable,进入到config文件夹的index.js,将proxyTable配置成:

`proxyTable: {

'/api':{

target:'http://localhost:3009/api',

changeOrigin:true,

pathRewrite:{

'^/api':''

}

}

},`

  • 推荐Robomongo作为数据库的可视化管理工具

  • 推荐Postman作为验证restful API的工具,请参考这篇文章

  • 这里的主页界面有个小小的bug,主页只显示每篇具体文章的摘要,在这里我取了一个巧,就是将从后端返回的数据经过markdown解析以后,用了一个正则把第一个p标签以及其中的内容给提取出来渲染到页面。因此后端在添加文章的时候必须在编写每篇文章的开头写一段话。因为毕竟这个博客只是一个第一版,后面我会把这个问题解决掉。

Todo

  • 移动端优化,300ms

  • 添加评论功能

  • 密码修改功能

  • 用户权限分类

另外说明一下:这个项目我是先撸了vue全家桶的文档,又去学了express和mongodb.然后回来做的这个项目。如果你是一个不懂后端或者对前后端流畅不熟悉的前端,本项目非常适合你。

评论