vue全家桶+koa2+mongoDB打造全栈社区博客

背景

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

简介

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

成品演示地址

http://82.157.55.15/#/

API接口文档地址

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

源码地址

前端：https://github.com/xingxi521/community-pc
后端：https://github.com/xingxi521/community-api

技术栈

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  # 路由-各模块接口的入口

部署方法

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

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

打开后端项目用npm i安装依赖
打开后端项目的config文件夹下的index.js根据自己数据库和redis情况设置好对应的参数
使用npm run serve启动服务，至此后端项目就完成启动了
接下来打开前端项目同样使用npm i安装依赖
然后打开config目录下的index.js文件进行各参数配置
最后使用npm run serve启动项目就好了

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

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

项目展示

盖楼回复

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

最后

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

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

vue全家桶+koa2+mongoDB打造全栈社区博客相关推荐

React+Egg.js实现全栈个人博客
React+Egg.js实现全栈个人博客这是一个个人博客软件,前台和后台使用的都是React,后端使用egg.js,地址前台文章列表 1.png 文章详情 2.png 后台管理系统添加文章 3 ...
vue全家桶+Koa2开发笔记(3)--mongodb
1. 安装 momgodb brew install mongodb 安装成功后执行 which mongod 启动:mongod 2. 下载可视化操作数据库的软件 https://robomongo ...
vue全家桶+Koa2开发笔记(5)--nuxt
1. nuxt项目初始化报错下面是使用 koa 模板方法初始化一个项目,使用该方法需要将 nuxt 的版本降至1.4.2: 官方 https://zh.nuxtjs.org/guide/instal ...
vue全家桶+Koa2开发笔记(2)--koa2
1. 安装koa脚手架的时候执行命令 koa2 -e koa-learn 注意要使用-e的方式,才会生成ejs的模板 2. async await的使用方法:存在的意义:提高promise的可读性 ...
React与Koa一起打造一个仿稀土掘金全栈个人博客（技术篇）
前言我的个人博客样式布局是仿的稀土掘金 ,个人博客线上网址为https://www.maomin.club/ ,也可以百度搜索前端历劫之路 .为了浏览体验,可以用PC浏览器浏览. 本篇文章将分为前台 ...
Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...
Vue全家桶+Socket.io+Koa2打造一个智能聊天室接口已开放
Vue.js+Socket.io+Koa2打造一个智能聊天室 Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室. 已经开源啦!为了方便大家学习,智能机器人.IP定 ...
Vue全家桶+Mint-Ui打造高仿QQMusic，搭配详细说明
Vue-QQMusic 简介: http://www.tuicool.com/articles/jQfEJzq 最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个QQ音乐的简易版. ...
视频教程-Vue全家桶前后台分离实战案例（含资料）-Vue
Vue全家桶前后台分离实战案例(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业.拥有 ...