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. })
  9. // 账号: admin 密码: 123456

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

想撸的直接上手跟我来,

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

∞∞∞∞∞

原文发布于微信公众号 - IT派(it_pai)

原文发表时间:2018-03-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

安卓开发-使用异步网络请求框架、多线程文件下载

相信对于前面的教程,大家已经很熟悉安卓网络编程了。这篇文章主要讲解一下异步网络编程和文件下载。学习编程重在写代码,只有自己的代码量上去了,自己才能完全理解。所以...

1494
来自专栏iOS开发笔记

iOS开发之-cordova环境搭建

目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App ? 今天就写一些关于hybrid APP的一些东西 环境说明: 操...

3275
来自专栏向治洪

Jar mismatch! Fix your dependencies

  在开发Android项目的时候,有时需要引用多个项目作为library。在引用项目的时候,有时会出现“Jar mismatch! Fix your depe...

1968
来自专栏刺客博客

艾特文件管理器 1.8

3185
来自专栏mathor

XSS攻击常识及实战

 XSS全称是Cross Site Scripting(为了和CSS进行区分,就叫XSS)即跨站脚本,当目标网站目标用户浏览器渲染HTML文档的过程中,出现了不...

9242
来自专栏别先生

搭建Java环境JDK,和运行环境JRE

1:想要学习Java第一步就是搭建Java环境,就是安装JDK,又因为JDK里面包含JRE,所以在安装JDK的过程中就安装了JRE,所以以下只是给出了JDK的安...

28210
来自专栏性能与架构

小程序示例 - 不同页面间的消息传递

场景 假设有两个页面:用户列表页、信息编辑页 在列表中点击后某条信息后,进入编辑页面 ? 修改了用户信息后,返回到列表页,列表中需要显示修改后的信息 例如把 “...

3887
来自专栏向治洪

svn插件安装

以下是一些关键步骤: ? ? 其中http://subclipse.tigris.org/update_1.0.x是SVN插件的下载站点【subclipse是E...

2105
来自专栏面朝大海春暖花开

springMVC+freemarker实现自定义标签

强烈建议2.3.20或其以上版本,注意还需要引入spring-context-support

1002
来自专栏张善友的专栏

使用MagicAjax 实现无刷新Webparts

介绍MagicAjax Web.config的配置如下: <?xml version="1.0"?> <configuration> <configSecti...

21410

扫码关注云+社区

领取腾讯云代金券