基于Vue+express的博客项目

一个前端基于Vue2.0全家桶,后端基于Express+Mongodb的前后端分离博客。前端界面使用了flexbox+rem布局,后端界面使用了element ui。本项目可以作为一个前端进阶项目,从前端flexbox布局到前端框架的使用,再到后端以及数据库,是一个打通前后端流程的一个项目。由于最近刚换了域名,正在备案中,所以目前没有线上演示,不过可以看一下下面的动态图特效。

特点

  • 支持 MarkDown 编辑
  • 支持代码高亮
  • 支持移动端浏览

在线地址

功能展示展示

PC前台博客演示

image

移动端前台演示

image

后台管理演示

image

若图片无法显示则点击这里:pc前端功能展示 移动前端功能展示pc后端功能展示

前端工具

  • Vue2.0
  • Vue-Router
  • Vuex
  • axios
  • element ui

前端布局采用flexbox+rem布局,关于flexbox请阅读一个完整的Flexbox指南以及这篇最新的理解Flexbox:你需要知道的一切

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

  1. 移动端调试
  2. 介绍vieport
  3. 使用Flexible实现手淘H5页面的终端适配

后端工具

  • express
  • mongodb(mongolass)

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

目录结构

│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  index.html
│  package.json
│  README.md
│
├─build
│      build.js
│      check-versions.js
│      dev-client.js
│      dev-server.js
│      utils.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│      test.env.js
│
├─server                        后端文件夹
│  │  .env
│  │  app.js    后端入口
│  │
│  ├─api
│  │      index.js  后端api
│  │
│  ├─lib
│  │      mongo.js 数据库
│  │
│  ├─middleware
│  │      checkToken.js
│  │      createToken.js
│  │
│  └─routes                 后端路由
│          admin.js
│          article.js
│          classify.js
│          index.js
│          login.js
│          reg.js
│
├─src       前端文件夹
│  │  App.vue
│  │  main.js   前端入口
│  │
│  ├─api    前端api
│  │      index.js
│  │
│  ├─assets
│  │  ├─css
│  │  │      commen.css
│  │  │      default.css
│  │  │      default0.css
│  │  │      highlight.css
│  │  │
│  │  ├─img
│  │  │      bg.jpg
│  │  │      bgm.jpg
│  │  │
│  │  └─js
│  │          commen.js
│  │          highlight.pack.js
│  │          hljs.js
│  │
│  ├─components
│  │  │  NotFound.vue
│  │  │
│  │  ├─backEnd             后端界面
│  │  │      Admin.vue
│  │  │      ArticleCreate.vue
│  │  │      ArticleEdit.vue
│  │  │      ArticleList.vue
│  │  │      ClassList.vue
│  │  │      Login.vue
│  │  │      Reg.vue
│  │  │
│  │  └─fronted             前端界面
│  │          About.vue
│  │          Article.vue
│  │          Front.vue
│  │          Home.vue
│  │          Tags.vue
│  │          vfooter.vue
│  │          vheader.vue
│  │
│  ├─routes             前端路由vue-router
│  │      index.js
│  │      routes.js
│  │
│  └─store             前端vuex
│      │  actions.js
│      │  index.js
│      │  MsgAlert.js
│      │  mutations.js
│      │  states.js
│      │  types.js

Step

环境

克隆远程库

git clone https://github.com/elva2596/vueBlog.git

安装前端依赖

npm install

全局安装supervisor

npm install -g supervisor

启动mongodb服务器

在你安装的数据库文件中的bin目录中启动

mongod

安装后端依赖

进入到server文件夹下,安装后端依赖:npm install

启动后端服务器

npm start

启动前端项目

回到项目根目录下运行:npm run dev

生成发布

npm run build

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
  • 添加评论功能
  • 密码修改功能
  • 用户权限分类

License

MIT

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 124,614评论 16 534
  • 要爱你自己。 我告诉你,谁都不是自己。 在我面对众叛的时候,想来,这句话是没有错的。 纵使父母他们全心全意的爱我们...
    夜城老大阅读 95评论 1 7
  • 在算题的时候想起来当时许下的话,2016过完了要来汇报下的。 2016年,是我的觉醒年吧,感觉终于看清了周围的虚无...
    蜗牛贝塔蜜阅读 205评论 1 1
  • 益学堂QQ群:(用QQ扫一扫就行) 小yu老师个人联系方式:(同上) 邮箱:tsu.yubo@gmail.com
    小yu老师阅读 35评论 0 1
  • 文/易熙 如果生活是一台戏,那么从群众演员到主演,从摄像师到副导演,很多人都曾说过,"易熙,我觉得你可能拿错剧本了...
    倚南窗以寄阅读 126评论 0 2