摘要:前言使用有一段时间了也想用去写点什么,平时接触最多的就是了,于是乎借助这个框架设计出了一个极其简约风格的博客。体验博客完整的功能。合适的项目架构可以提高开发效率和更好的后期维护。
前言
使用 react 有一段时间了, 也想用 react 去写点什么,平时接触最多的就是 blog 了,于是乎借助 antd 这个 UI 框架设计出了一个极其简约风格的 spa 博客。
目的也是将 react 的生态圈的工具梳理一遍,后端则采用了 koa + sequelize + mysql 的技术选型(我司用的就是这个技术栈啦,所以笔者也用这个了)
前后台分离式开发(项目中也包含博客的后台管理系统),为了方便记录后端开发过程,笔者将后端也一起放在同个项目文件夹中。
博客样式几乎借助于 antd 这个优秀的 UI 框架,主打简约风格,是笔者借鉴了 antd 官方的风格所设计~
分出了几个分支便于学习和查看开发记录,相信这个项目会让刚接触 react 的伙伴学到一些的
博客地址 - 联系我可以 email gershonv@163.com | QQ 434358603 | 博客关于页面留言~
项目地址
预览地址
用户名 admin/admin 最高权限,求小伙伴不要乱删数据,乱删数据其他伙伴会没什么数据看的。
给最高权限是为了让大家看到博主的权限。体验博客完整的功能。
后台访问路径 /admin
技术栈
前端 (基于 create-react-app eject 后的配置)
react v16.8.1
redux redux-thunk
react-router4
axios
marked highlight.js
后端 (自构建后台项目)
koa2 + koa-router
sequelize + mysql
jwt + bcrypt
实现功能[x] 主页 + 列表页 + 搜索页 + 后台增删改查文章等
[x] 博客标签、分类
[x] 评论与回复功能模块
[x] 用户登录注册,以及权限管理 (jwt + localStorage)
[x] markdown 代码高亮
[x] 锚点导航 回到顶部
[x] 响应式开发
分支为了方便查看开发记录笔者分了几个分支
client-chore: 记录前端项目的构建过程
配置 react + antd + less + babel-plugins-import
配置 redux + redux-thunk + redux-logger (开发和生产环境)
配置 装饰器 + axios 封装 + 路由配置(主博客路由 和 admin 管理系统)
server-chore: 记录后端项目的构建过程
配置 koa + koa-router + 中间件
项目结构划分(mvc结构)
配置 sequelize 以及数据库的设计
...
client-markdown: 配置 markdown 语法高亮
dev: 开发分支
效果预览地址在这
概览 评论功能与其他 响应式 后台管理 表结构 开启项目 前端git clone https://github.com/gershonv/react-blog.git cd react-blog npm i --registry=https://registry.npm.taobao.org npm start后端
创建一个 blogdev 的 mysql 数据库,修改 server/config/db.js 去连接你的数据库。
运行 server/config/blogdev.sql 文件导入数据
cd server npm i --registry=https://registry.npm.taobao.org npm start总结
从零开发个人博客,整个过程感受就是不动手就不知道自己还有多少知识没了解到或者说好好运用到。麻雀虽小五脏俱全吧。
要点在于
前端
如何组织项目架构。合适的项目架构可以提高开发效率和更好的后期维护。
第二 router 4 如何封装才更好拓展,维护。这里部分借助了 rekit 目录结构
如何利用 react 新特性去组织你的代码
如何利用工具提高效率,装饰器,热加载,(redux、…)
当然权限的管理 jwt, 对 antd 的使用
后端
koa 各类中间件使用
登录注册权限,jwt 加密,处理权限的方式
sequelize 的使用 模型定义 多表~
错误的统一处理,如何优雅的处理
项目结构如何搭建等等
源码地址:https://github.com/gershonv/react-blog
项目结构:
后台
项目地址
模块设计
博主 auth = 1 具备最高权限 文章、评论和回复的增删改查权限(root用户只能在注册后在数据库改权限)
普通用户 auth = 2 具备评论和回复的功能
注意 关于页面引用 articleId = -1 新建文章后自改库吧
PS : 觉得不错的伙伴可以给个 star ~~~ 或者 fork 下来看看哦。如果有什么建议,也可以提 issue 哦
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/48532.html
摘要:前言由于一直在用写业务,为了熟悉下开发模式,所以选择了。数据库一开始用的是,后来换成了,一套下来感觉也挺好上手的。 前言 由于一直在用 vue 写业务,为了熟悉下 react 开发模式,所以选择了 react。数据库一开始用的是 mongodb,后来换成 mysql 了,一套下来感觉 mysql 也挺好上手的。react-router、koa、mysql 都是从0开始接触开发的,期间遇...
摘要:前端打造了前端网站和后台管理系统。根目录都是开发源代码,根目录下的文件夹下都是前端网站项目源代码,根目录下的文件夹下都是后台管理系统的源代码。后台管理系统使用在根目录下进入项目,安装包,执行命令,启动服务浏览器打开即可以访问。 showImg(https://segmentfault.com/img/remote/1460000019603918); 这是个什么的项目? 使用 Node...
摘要:前端打造了前端网站和后台管理系统。根目录都是开发源代码,根目录下的文件夹下都是前端网站项目源代码,根目录下的文件夹下都是后台管理系统的源代码。后台管理系统使用在根目录下进入项目,安装包,执行命令,启动服务浏览器打开即可以访问。 showImg(https://segmentfault.com/img/remote/1460000019603918); 这是个什么的项目? 使用 Node...
摘要:因为路由层面受业务影响很大,经常修改一些功能的行为,所以后来大部分测试都是针对层面的单元测试。在我了解的过程中,我发现中文网络上对的讨论非常分散,于是我创建了中文社区,到年末已经有个注册用户和个帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 从 2014 年末开始开发的一个互联网金融项目终于在今年三月份上线了,这是一个 Node...
摘要:因为路由层面受业务影响很大,经常修改一些功能的行为,所以后来大部分测试都是针对层面的单元测试。在我了解的过程中,我发现中文网络上对的讨论非常分散,于是我创建了中文社区,到年末已经有个注册用户和个帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 从 2014 年末开始开发的一个互联网金融项目终于在今年三月份上线了,这是一个 Node...
阅读 2574·2023-04-25 18:46
阅读 467·2021-11-19 09:40
阅读 1884·2021-09-28 09:36
阅读 3092·2021-09-10 11:11
阅读 3227·2019-08-30 15:55
阅读 1634·2019-08-30 15:54
阅读 2472·2019-08-29 16:16
阅读 3387·2019-08-29 15:08