Vue + Node + Mongodb 开发一个完整博客流程

前言

前段时间刚把自己的个人网站写完， 于是这段时间因为事情不是太多，便整理了一下，写了个简易版的博客系统。

服务端用的是 koa2框架 进行开发。

技术栈

Vue + vuex + element-ui + webpack + nodeJs + koa2 + mongodb

目录结构讲解

说明：

• build - webpack的配置文件

• code - 放置代码文件

• config - 项目参数配置的文件

• logs - 日志打印文件

• node_modules - 项目依赖模块

• public - 项目静态文件的入口 例如: public下的 demo.html文件, 可通过 localhost:3000/demo.html 访问

• static - 静态资源文件

• .babelrc - babel编译

• postcss.config.js - css后处理器配置

build 文件讲解

说明：

• build.js - 执行webpack编译任务, 还有打包动画 等等

• get-less-variables.js - 解析less文件, 赋值less全局变量

• style-loader.js - 样式loader配置

• vue-config.js - vue配置

• webpack.base.conf.js - webpack 基本通用配置

• webpack.dev.conf.js - webpack 开发环境配置

• webpack.prod.conf.js - webpack 生产环境配置

code 文件

1.admin - 后台管理界面源码

src - 代码区域：

1. components - 组件

2. filters - 过滤器

3. font - 字体/字体图标

4. images - 图片

5. router - 路由

6. store - vuex状态管理

7. styles - 样式表

8. utils - 请求封装

9. views - 页面模块

10. App.vue - app组件

11. custom-components.js - 自定义组件导出

12. main.js - 入口JS

13. index.html - webpack 模板文件

2.client - web端界面源码

跟后台管理界面的结构基本一样。

3.server - 服务端源码

说明：

1. controller: 所有接口逻辑代码

2. middleware: 所有的中间件

3. models: 数据库model

4. router: 路由/接口

5. app.js: 入口

6. config.js: 配置文件

7. index.js: babel编译

8. mongodb.js: mongodb配置

其他文件

• config - 项目参数配置的文件

• logs - 日志文件

• public - 项目静态文件的入口

• static - 静态资源文件

• .babelrc - babel编译

• postcss.config.js - css后处理器配置

后台管理

开发中用的一些依赖模块

• vue/vue-router/vuex - Vue全家桶

• axios - 一个现在主流并且很好用的请求库 支持Promise

• qs - 用于解决axios POST请求参数的问题

• element-ui - 饿了么出品的vue2.0 pc UI框架

• babel-polyfill - 用于实现浏览器不支持原生功能的代码

• highlight.js / marked- 两者搭配实现Markdown的常用语法

• js-md5 - 用于登陆时加密

• nprogress - 顶部加载条

components

这个文件夹一般放入常用的组件， 比如 Loading组件等等。

views

所有模块页面。

store

vuex 用来统一管理公用属性， 和统一管理接口。

前台

前台用vue+webpack搭建，基本的结构都差不多，具体代码实现的可以直接在github下载便行。

通过 mongoose 链接 mongodb

1.  import mongoose from 'mongoose'

2.  import conf from './config'

3.  // const DB_URL = `mongodb://${conf.mongodb.address}/${conf.mongodb.db}`

4.  const DB_URL = `mongodb://${conf.mongodb.username}:${conf.mongodb.pwd}@${conf.mongodb.address}/${conf.mongodb.db}`; // 账号登陆

5.  mongoose.Promise = global.Promise

6.  mongoose.connect(DB_URL, { useMongoClient: true }, err => {

7.      if (err) {

8.          console.log("数据库连接失败！")

9.      }else{

10.          console.log("数据库连接成功！")

11.      }

12.  })

13.  export default mongoose

封装返回的send函数

1.  export default () => {

2.      let render = ctx => {

3.          return (json, msg) => {

4.              ctx.set("Content-Type", "application/json");

5.              ctx.body = JSON.stringify({

6.                  code: 1,

7.                  data: json || {},

8.                  msg: msg || 'success'

9.              });

10.          }

11.      }

12.      let renderError = ctx => {

13.          return msg => {

14.              ctx.set("Content-Type", "application/json");

15.              ctx.body = JSON.stringify({

16.                  code: 0,

17.                  data: {},

18.                  msg: msg.toString()

19.              });

20.          }

21.      }

22.      return async (ctx, next) => {

23.          ctx.send = render(ctx);

24.          ctx.sendError = renderError(ctx);

25.          await next()    

26.      }

27.  }

通过 koa-static 管理静态文件入口

注意事项：

1. cnpm run server 启动服务器

2.启动时，记得启动mongodb数据库，账号密码 可以在 server/config.js 文件下进行配置

3. db.createUser({user:"cd",pwd:"123456",roles:[{role:"readWrite",db:'test'}]})(mongodb 注册用户)

4. cnpm run dev:admin 启动后台管理界面

5.登录后台管理界面录制数据

6.登录后台管理时需要在数据库 创建 users 集合注册一个账号进行登录

1.  db.users.insert({

2.      "name" : "cd",

3.      "pwd" : "e10adc3949ba59abbe56e057f20f883e",

4.      "username" : "admin",

5.      "roles" : [

6.          "admin"

7.      ]

8.  })

10.  // 账号： admin  密码： 123456

7. cnpm run dev:client 启动前台页面

想撸的直接上手跟我来，

项目地址：https://github.com/cd-dongzi/vue-node-blog

也可以点击“阅读原文”

∞∞∞∞∞

IT派 - {技术青年圈}

持续关注互联网、区块链、人工智能领域

公众号回复“JS”，

邀你加入{JS前端技术圈}