个人博客搭建 koa2+vue+mongodb

651 阅读2分钟

博客2.0更新啦!

博客地址:mangoya.cn

image.png

整体样式基本没有变化,主要变化是前后端重构,之前的1.0版本后端为php,并非博主所开发,这次重构调整了数据结构和所熟悉的语言,采用koa2+mongodb。

废话不多说,下面介绍博客的搭建教程和思路。

技术栈:

  • 博客主页:vue2
  • 管理后台:vue3
  • 后端:koa2+mongodb

博客主要功能:

  • 文章:列表、分类、详情、点赞、收藏、评论
  • 用户中心:登录/注册、收藏列表、点赞列表、设置友链
  • 其他:静态信息展示、留言板、点赞、最受欢迎文章排行榜、友链

前端模块拆分:

博客主页主要为展示信息和用户留言等信息模块,其中评论和留言板可以复用一个组件,首页列表和点赞收藏列表也可以复用一个的组件,页面整体为头部、左侧 和右侧,其中只有左侧内容为页面切换内容,头部和右侧则固定不变。

管理后台包含文章、分类、标签、用户、留言等管理功能。

后端数据文档划分:

  • 文章
  • 文章分类
  • 文章标签
  • 留言
  • 点赞
  • 收藏
  • 浏览
  • 网站点赞
  • 用户
  • 资源

主要功能点介绍:

用户登录注册: 使用github oauth 实现第三方认证登录,可能会遇到接口请求慢的情况,可以通过翻墙软件设置代理访问。

浏览量: 由时间戳+ua+随机数 加密生成log_id设置2个小时有效期的cookie,访问页面详情时,通过log_id和文章id去重存储浏览表。

留言和评论: 留言关于我等设置为固定的留言文章id,和文章一样存储用户信息,并添加回复的父级id存储,查询时递归获取并返回数据。

收藏和点赞: 分别存储收藏表和点赞表,包含用户id/文章id。

资源: 使用koa-body 实现文件上传功能,将资源保存在某个目录,并设置对应的url,存资源列表。

源码:

博客前端:github.com/Aimee1608/m…

管理后台:github.com/Aimee1608/m…

服务端:github.com/Aimee1608/m…

版本要求:

  • node>=12
  • koa2
  • mongodb4
  • vue2.0/3.0

安装mongodb后,启动服务,即可运行。

欢迎点赞和评论~