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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前言

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

服务端用的是 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前端技术圈}



以上是 Vue + Node + Mongodb 开发一个完整博客流程 的全部内容， 来源链接： utcz.com/z/374849.html

回到顶部