项目文档说明:react + Ant Design 的 blog-react-admin

前言

此 blog-react-admin 项目是基于 蚂蚁金服开源的 ant design pro之上,用 react 全家桶 + Ant Design 的进行再次开发的,项目已经开源,项目地址在 github 上。

效果预览 https://preview.pro.ant.design/user/login

1. 后台管理

1.1 已经实现功能

  • 登录
  • 文章管理(支持 MarkDown 语法)
  • 标签管理
  • 留言管理
  • 用户管理
  • 友情链接管理
  • 时间轴管理

1.2 待实现功能

  • 点赞、留言和评论 的通知管理
  • 评论管理
  • 个人中心(用来设置博主的各种信息)
  • 工作台( 接入百度统计接口,查看网站浏览量和用户访问等数据 )
2. 主要项目结构
- pages
  - Account 博主个人中心
  - article 文章管理
  - Category 分类
  - Dashboard 工作台
  - Exection 403 404 500 等页面
  - Link 链接管理
  - Message 留言管理
  - OtherUser 用户管理
  - Tag 标签管理
  - TimeAsix 时间轴
  - User 登录注册管理

文章管理、用户管理、留言等 具体业务需求,都是些常用的逻辑可以实现的,也很简单,这里就不展开讲了。

3. 使用

使用详情请查看 Ant Design Pro,因为本项目也是在这个基础之上,按这个规范来构建的。

4. 缺点

开发时,程序出错后,修改正确后,webpack 有时不会及时查觉到内容已经更改,从而不能及时编译,要重新运行命令打包。

5. 项目地址

开源不易,如果觉得该项目不错或者对你有所帮助,欢迎到 github 上给个 star,谢谢。

项目地址:

前台展示: https://github.com/biaochenxuying/blog-react管理后台:https://github.com/biaochenxuying/blog-react-admin后端:https://github.com/biaochenxuying/blog-nodeblog:https://github.com/biaochenxuying/blog

本博客系统的系列文章:

6. Build Setup ( 构建安装 )
# install dependencies
npm install 

# serve with hot reload at localhost: 3000
npm start 

# build for production with minification
npm run build 

如果要看完整的效果,是要和后台项目 blog-node一起运行才行的,不然接口请求会失败。

7. 最后

全栈开发有兴趣的朋友可以扫下方二维码关注我的公众号,我会不定期更新有价值的内容。

微信公众号:BiaoChenXuYing分享 前端、后端开发等相关的技术文章,热点资源,全栈程序员的成长之路。

关注公众号并回复 福利便免费送你视频资源,绝对干货。

福利详情请点击: 免费资源分享--Python、Java、Linux、Go、node、vue、react、javaScript

原文链接:segmentfault.com

上一篇:rst-selector-parser
下一篇:enzyme

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    10 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 飞冰 - ICE Design Pro 使用指南

    写在前面: 目前在飞冰中,我们提供了 21 套模板(后续会持续的增加),可以在 Iceworks 的模板界面根据需求选择合适的模板进行初始化项目,然后基于区块快速搭建页面进行二次开发,减少各种环境...

    2 年前
  • 项目实战-在Vant的基础上封装下拉日期控件

    需求分析 在实际项目中,表单里面的日期选择是常用的组件。Vant有提供日期组件,但是居然没有提供下拉形式的日期组件,不过该有的元件都有,就自己封装一个。 封装组件过程中我们要解决: 和表...

    2 年前
  • 项目实战-在Vant的基础上实添加验证框架

    Vant(https://youzan.github.io/vant/) 一套基于Vue的移动端UI框架,有赞出品。 因为UI设计的够漂亮,源码结构也比较清晰,插件定位也比较明确,重要是实战过程中的...

    2 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    1 年前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    5 个月前

官方社区

扫码加入 JavaScript 社区