React搭建博客

个人博客搭建

前言

项目预览 lurenhong.top/blog

1. 登录页 (个人使用暂时未开发注册功能)

   

2. 添加标签（方便后期条件查询）

   

3. 添加博客内容以及标签选择 （草稿/发布）

   

4. 展示博客列表（编辑/删除/条件查询及分页）

   

5. 博客展示首页（后台添加博客不对外开放）

   

6. 博客详情页查看（目前已完成阅读量/评论功能开发中）

   

7. 分类查询

   

8. 后续功能更新中...

搭建个人博客方式

1. 使用第三方工具生成博客系统

优点 搭建简单(可直接部署在github)静态访问、不用考虑服务器配置

• hexo hexo.io/zh-cn/
• hugo www.gohugo.org/

缺点 需要自己编写Markdown 然后部署到github,不便于操作

2. 自己实现一个博客

博客搭建

1. 尽量长话短说、git clone 项目有问题联系我（暂时支持PC-后期支持响应式）

   • 开发环境
     • mac、window
     • node 8.x+
     • mysql 5.6.44(目前版本) 项目启动-->请安装mysql（可视化工具推荐navicat）
   • 使用技术
     • 前端： React+Hooks+TypeScript
     • 后台：Egg+Mysql(实现增删改查)
     • 觉得项目ok 留下你的 star

2. 项目地址： git clone github.com/aisagacious…

3. 项目总体模块分为3部分

   

4. 项目启动与运行（假设当前在blog目录下）

   cd blog && npm i && npm run start 启动项目

   启动eggBlog项目 按照操作步骤来

   1. 新建一个数据库（表创建好后）进入eggBlog/config/config.default.js 中配置数据库信息

   

   

   2. 以上操作都完成后（执行下面命令->eggBlog项目即可启动）

      cd eggBlog && npm i && npm run dev 启动服务(默认端口 7001)

5. 项目中有注释、项目跑起来看一遍就理解了

项目功能点

• 之前使用Koa2开发项目中、插件集成工作量太大了各种配置

• 此处使用Egg开发项目结构比较完善清晰、mysql也封装一层、简单逻辑更方便

• 谈谈此次功能点

  • 登录使用session验证、设置了默认时间为半小时、可通过接口调用更新session过期时间
  • 图片上传（由于没开通OSS）这里我把图片上传到服务器 在blogFile下（这就是为什么我没把图片放在项目下、部署有可能会误删图片、图片上传生成水印）
  • 其他的功能点都是增删改查
  • 对于这个项目设计点比较多我就不一一讲解（项目搭建->开发完成->项目部署）、从中设计到React+Hooks+TypeScript+Egg（node封装的）+mysql 部署使用nginx配置代理（博客搭建比较简单 勿喷）

完结