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

简介: 此 blog-react-admin 项目是基于 蚂蚁金服开源的 ant design pro 之上,用 react 全家桶 + Ant Design 的进行再次开发的,项目已经开源,项目地址在 github 上。效果预览 https://preview.pro.ant.design/user/login1. 后台管理

前言


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


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


1. 后台管理


1.1 已经实现功能


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


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-node

blog:https://github.com/biaochenxuying/blog


本博客系统的系列文章:


  1. react + node + express + ant + mongodb 的简洁兼时尚的博客网站
  2. react + Ant Design + 支持 markdown 的 blog-react 项目文档说明
  3. 基于 node + express + mongodb 的 blog-node 项目文档说明
  4. 服务器小白的我,是如何将node+mongodb项目部署在服务器上并进行性能优化的

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 一起运行才行的,不然接口请求会失败。

相关文章
|
3月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
263 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
3月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
324 1
|
1月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
3月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
164 1
react项目配合diff实现文件对比差异功能
|
3月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
130 1
React项目input输入框输入自动失去焦点
|
3月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
45 1
本地运行打包好的React、Vue项目
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
792 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
3月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
4月前
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
644 3
使用vite搭建一个React项目!真香!
|
3月前
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
83 0