/react-blog

🔥基于react+egg+mongodb的全栈博客一把梭

Primary LanguageTypeScript

个人博客

icon icon

项目信息

项目背景

为了工作能更好的沟通交流，以学习为目从0到1上线一个个人博客网站，包括需求评审，交互评审，UI设计，前端编码，后端编码，测试联调，项目部署.

功能简介

  • 前端博客： 首页，归档， 文章， 关于。
  • 前端博客支持响应式，文章浏览与搜索，文章评论与回复，用户登录与注册（支持站内用户，github第三方授权登录用户），markdown展示。
  • 前端后台： 首页，文章管理，用户管理。
  • 前端后台支持登录， 文章新增（支持markdown，封面上传）， 文章修改，删除，设置或取消热门文章，文章搜索。

整体架构

技术栈

  • 前端：基于umi3框架，包含react，dva，router，antd3，hooks，typescript
  • 后端：基于egg框架
  • 数据库：mongodb

技术点

  • 前端：支持Oauth，highlight.js + marked展示markdown，路由守卫token页面级验证，请求拦截器请求携带token，优化包括：图片懒加载，externals按需引入第三方库的cdn，静态资源上传七牛云cdn，nginx压缩。动效：数字滚动。
  • 后端：提供相应接口，Jwt鉴权，七牛云CDN图片上传，cors跨域处理， mongoose数据库操作。

项目目录

.
├── package.json    包含插件和插件集
├── .umirc.ts       配置文件
├── dist            执行 umi build 后，产物默认会存放在这里
├── mock            存储 mock 文件
├── public          此目录下所有文件会被 copy 到输出路径
└── src
    ├── .umi                临时文件目录
    ├── components          全局公用组件   
    ├── pages               页面
    ├── models              全局状态
    ├── services            接口服务
    └── utils               工具类

项目部署

前端

后端

数据库

项目地址

博客地址： sellardoor.cn

后台管理地址： system.sellardoor.cn

项目参数

后台管理信息

  • 账号：admin，密码：admin

远程数据库信息

  • 账号，密码，ip，port，数据库名 => sellardoor:bigbang86@59.110.43.170:27017/admin

七牛云上传信息

  • accessKey = 'aZ_QrZ1Idx9U1Y7yTgugztYRnRBdNrujjDCqDaT3'

  • secretKey = 'bkMobvDIpM14IO-Y0SM-jKDlTOwGQUVFOJwGezDb'

  • bucket = 'sellardoor'

github oauth信息

  • client_id: 'd094df5206d99f67e373'

  • client_secret: '89540a292fec85c8c951882a8b7149b9f06907ed'

这些信息代码也有，就是真实参数，因为网站本就是学习目的，没做隐藏，让大家更直观学习，后台啥的，数据库啥的瞎搞没用，不重要。

页面UI

UI

UI