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

∞∞∞∞∞