React个人博客开发

Youngster_yj'Blog详解

博客浏览通道： jsfan.net

项目结构目录

src目录下前台主体详解：

App.js //前台路由页面
Blog.js //详情页面
index.js (下面为index内容,转入到App.js,无太大意义)

---

     import React from 'react';
     import ReactDOM from 'react-dom';
     import App from './App'; 
     ReactDOM.render(<App />, 
     document.getElementById('root'));

---

 Life.js //生活分享页面
 Main.js //首页
 Movies.js //实战页面

 ps:
     1.config文件夹内为域名请求Api
     2.images文件夹内为本地资源
     3.style文件夹内为前台样式

实际样式

---

src目录下前台组件详解：

-components // 组件文件夹
     Advert.js //广告组件
     Author.js //作者介绍组件
     Comment.js //详情页评论人组件
     Drawer.js //响应式抽屉组件
     Footer.js //页面底部组件
     Header.js //页面导航条组件
     Pinglun.js //详情页评论组件
     Skills.js //作者技能介绍组件

实际样式

---

src目录下后台文件详解：

-admin //后台文件夹
     -style //后台样式文件夹
     AddArticle.js //文章增添管理页面
     App.js //后台路由页面
     ArticleList.js //文章列表管理页面
     ChangeArticle.js //文章修改管理页面
     Comment.js //评论管理页面
     Index.js //后台主页
     Login.js //登录页面
     SaveArticle.js //文章暂储管理页面
     Upload.js //文件上传管理页面

实际样式

后台功能介绍

1.资源上传页面

(1).支持文件上传(点击上传或拖拽上传)

(2).拥有上传进度

(3).上传成功后同时分类返回视频、音乐、图片(GIF)外链

(4).支持遍历服务器文件并返回符合要求文件的外链

2.文章管理页面

---

(1).支持添加文章

(2).支持修改(删除)文章

(3).支持暂存文章

(4).支持预期发布

(5).可查看文章浏览量(为真实不做修改功能)

(6).操作选项栏增加文章置顶功能(2020-4-3更新)

(7).操作选项栏增加文章加密功能(2020-5-1更新)

3.留言管理页面

(1).可控所有留言

(2).一二级评论分离显示

(3).可显评论所有信息(为真实不做修改功能)

(4).集成互动页留言管理(2020-6-1更新)

---

4.新添博客后台管理功能

(1).支持友链审核(2020-7-1更新)

(2).集成留言邮箱通知(2020-7-2更新)

(3).支持QQ登录管理(2020-7-20更新)

(4).支持QQ信息查看及权限分配(2020-7-30更新)

(5).后台集成session提高安全性能(2020-8-30更新)

---

5.新添ReactNative应用后台管理

(1).上传视频审核(2020-8-1更新)

(2).支持现有视频增删查改(2020-8-5更新)

(3).ReactNative应用留言管理(2020-8-8更新)

---

- -此后本Blog前后端将陆续开源至本人GitHub,如想参考本博客源码可留言索要或催促- -

Thanks to JSPang AntdUI