基于Vue+express的博客项目

╰+哭是因爲堅強的太久メ 2022-02-22 11:00 188阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

# 特点 #

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

[在线地址][Link 1]

# 功能展示展示 #

PC前台博客演示

![Image 1][]

image

移动端前台演示

![Image 1][]

image

后台管理演示

![Image 1][]

image

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

### 前端工具 ###

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

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

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

1.  [移动端调试][Link 3]
2.  [介绍vieport][vieport]
3.  [使用Flexible实现手淘H5页面的终端适配][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 ##

环境

*  Node.js v6
 *  mongoDB [下载地址][Link 4]  
    [安装方法][Link 5]  
    安装完成后启动数据库  
    `mongod`

克隆远程库

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

# Todo #

*  移动端优化，300ms
 *  添加评论功能
 *  密码修改功能
 *  用户权限分类

## License ##

MIT

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://link.jianshu.com?t=http%3A%2F%2Fwww.dailu.site
[Image 1]: 
[pc]: https://link.jianshu.com?t=http%3A%2F%2Fp5fgm085n.bkt.clouddn.com%2Fyanshi.gif
[Link 2]: https://link.jianshu.com?t=http%3A%2F%2Fp5fgm085n.bkt.clouddn.com%2Fyanshi1.gif
[pc 1]: https://link.jianshu.com?t=http%3A%2F%2Fp5fgm085n.bkt.clouddn.com%2Fyanshi3.gif
[Flexbox]: https://link.jianshu.com?t=http%3A%2F%2Fwww.w3cplus.com%2Fcss3%2Fa-guide-to-flexbox-new.html
[Flexbox 1]: https://link.jianshu.com?t=http%3A%2F%2Fwww.w3cplus.com%2Fcss3%2Funderstanding-flexbox-everything-you-need-to-know.html
[Link 3]: https://link.jianshu.com?t=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000002565572
[vieport]: https://link.jianshu.com?t=http%3A%2F%2Fwww.css88.com%2Farchives%2F6410
[Flexible_H5]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Famfe%2Farticle%2Fissues%2F17
[element ui]: https://link.jianshu.com?t=http%3A%2F%2Felement.eleme.io%2F%23%2F
[Link 4]: https://link.jianshu.com?t=https%3A%2F%2Fwww.mongodb.com%2Fdownload-center%3Fjmp%3Dnav%23community
[Link 5]: https://link.jianshu.com?t=https%3A%2F%2Fdocs.mongodb.com%2Fmanual%2Finstallation%2F
[Robomongo]: https://link.jianshu.com?t=https%3A%2F%2Frobomongo.org%2F
[Link 6]: https://link.jianshu.com?t=http%3A%2F%2Fwww.cnblogs.com%2Fmafly%2Fp%2Fpostman.html