/vue-blog-community

vue社区博客-vue全家桶-koa2-mongoose-mongoDB

Primary LanguageVue

背景

一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客。

简介

这是一个基于VUE全家桶+AntdForVue+koa2+mongo实现的一套社区交流源码,前端页面是响应式的,适合想往全栈发展,ko2学习,mongoDB学习的同学,废话不多说。

QQ图片20220327105600.gif

成品演示地址

http://82.157.55.15/#/

API接口文档地址

http://82.157.55.15:4999/web/#/7/50

掘金对应帖子地址

https://juejin.cn/post/7079638553386287134

源码地址

技术栈

  • vue2.6全家桶+antdforvue+dayjs+websocket
  • koa2+mongoose+redis+websocket+nodemailer

功能列表

  • 登录
  • 注册
  • 邮箱找回密码
  • 个人中心
  • 签到模块
  • 文章周热议
  • 增删改查文章
  • 增删改查评论
  • 评论点赞
  • 采纳最佳评论
  • websocket实时消息-断线重连机制

目录结构

前端SRC目录结构

├── assets
├── components # 公共组件
    ├── Custom # 自定义组件
    ├── Home # 首页公用组件
        ├── Link.vue,Sign.vue ... # 签到 友情链接等公用模块 
├── api # 各模块请求的API
├── config # 项目的参数配置
├── plugins # antd按需引入   
├── router  # 路由
├── store   # vuex
├── utils   # 工具类
    ├── const   # 各模块的变量
└── views   
    ├── Center # 个人中心模块
    └── Post # 文章模块
    ├── Home   # 首页
    ├── Login   # 登录
    ├── ReSetPassWord   # 重置密码
    ├── User   # 个人主页

后端SRC目录结构

├── api # 各模块Controller层-接口逻辑
├── config # 项目的参数配置
    ├── index # 基础配置
    ├── MailerConfig # 邮件服务配置
    ├── MongoDB # mongoDB数据库配置
    ├── RedisConfig # Redis配置
    ├── WebSocket # WebSocket配置
├── model # 各模块mongo的Schema表
├── router  # 路由-各模块接口的入口

部署方法

  1. 先把前后端两个项目源码clone到本地
  2. 然后安装好mongoDB和redis(这里我用的是redis6.2.6版本的,mongoDB是5.0.5)
  3. 在在后端项目里有个DateBse文件夹里面有7个数据库文件,自己去根据文件名创建7个数据库集合

image.png 然后把对应7个文件里面的数据copy到对应的集合表里即可!

  1. 打开后端项目用npm i安装依赖
  2. 打开后端项目的config文件夹下的index.js根据自己数据库和redis情况设置好对应的参数

image.png

  1. 使用npm run serve启动服务,至此后端项目就完成启动了
  2. 接下来打开前端项目同样使用npm i安装依赖
  3. 然后打开config目录下的index.js文件进行各参数配置

image.png

  1. 最后使用npm run serve启动项目就好了

前端config配置文件部分参数说明

isMock为true时则开启整个项目走mock请求 想要置顶某个接口走mock也可以

image.png

项目展示

image.png

image.png

image.png

image.png

image.png

image.png 更多情况自行克隆下来看吧~

最后

本项目适合向往全栈发展的同学,比较适合入门,觉得项目对你有用的话可以github上给他Star星星

QQ图片20220327125021.png

注:UI布局以及部分逻辑是参考慕课网某个社区项目的进行重构的