{"id":15048695,"url":"https://github.com/biaochenxuying/blog-react-admin","last_synced_at":"2025-04-05T13:09:56.533Z","repository":{"id":96706831,"uuid":"156714012","full_name":"biaochenxuying/blog-react-admin","owner":"biaochenxuying","description":"基于 pro.ant.design 的 react + Ant Design 的博客管理后台项目","archived":false,"fork":false,"pushed_at":"2020-09-23T14:57:05.000Z","size":377,"stargazers_count":487,"open_issues_count":5,"forks_count":140,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T12:11:19.898Z","etag":null,"topics":["ant","markdown-editor","react"],"latest_commit_sha":null,"homepage":"https://preview.pro.ant.design/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biaochenxuying.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-08T13:50:47.000Z","updated_at":"2025-03-23T14:59:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"9ea15d81-528a-4212-855a-5cee6589db15","html_url":"https://github.com/biaochenxuying/blog-react-admin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaochenxuying%2Fblog-react-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biaochenxuying","download_url":"https://codeload.github.com/biaochenxuying/blog-react-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant","markdown-editor","react"],"created_at":"2024-09-24T21:15:23.691Z","updated_at":"2025-04-05T13:09:56.513Z","avatar_url":"https://github.com/biaochenxuying.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![效果图1.gif](https://upload-images.jianshu.io/upload_images/12890819-226f48af9087c3cf.gif?imageMogr2/auto-orient/strip)\n\n![文章列表效果](https://upload-images.jianshu.io/upload_images/12890819-470c8996b8ebdfaf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n![评论审核效果](https://upload-images.jianshu.io/upload_images/12890819-80ae92fc0e493805.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n## 前言\n\n此 blog-react-admin 项目是基于 [蚂蚁金服开源的 ant design pro](https://pro.ant.design/index-cn) 之上，用 react 全家桶 + Ant Design  的进行再次开发的，项目已经开源，项目地址在 github 上。\n\n效果预览 [https://preview.pro.ant.design/user/login](https://preview.pro.ant.design/user/login)\n\n\n## 已实现功能\n\n- [x] 登录  \n- [x] 文章管理\n- [x] 标签管理  \n- [x] 留言管理\n- [x] 用户管理\n- [x] 友情链接管理\n- [x] 时间轴管理\n- [x] 富文本编辑器（支持 MarkDown 语法）\n- [x] 项目展示\n- [x] 评论管理\n\n## 待实现功能\n\n- [ ] 个人中心（用来设置博主的各种信息）\n- [ ] 工作台（ 接入百度统计接口，查看网站浏览量和用户访问等数据 ）\n\n## 主要项目结构\n\n```\n- pages\n  - Account 博主个人中心\n  - article 文章管理\n  - Category 分类\n  - Dashboard 工作台\n  - Exection 403 404 500 等页面\n  - Link 链接管理\n  - Message 留言管理\n  - OtherUser 用户管理\n  - Project 项目\n  - Tag 标签管理\n  - TimeAsix 时间轴\n  - User 登录注册管理\n```\n\n文章管理、用户管理、留言等 具体业务需求，都是些常用的逻辑可以实现的，也很简单，这里就不展开讲了。\n\n## 添加富文本编辑器，同样支持 markdown 语法 \n\n添加的编辑器为 [simplemde-markdown-editor](https://github.com/sparksuite/simplemde-markdown-editor)\n\n效果图\n\n\n![效果图1](https://user-images.githubusercontent.com/24362914/49021611-01c45080-f1ce-11e8-988a-8c1064a448de.png)\n\n\n参考的文章为 [react 搭建博客---支持markdown的富文本编辑器](https://segmentfault.com/a/1190000010616632)\n\n\n## 搭建\n\n使用详情请查看 [Ant Design Pro ](https://pro.ant.design/docs/getting-started-cn)，因为本项目也是在这个基础之上，按这个规范来构建的。\n\n\n## 缺点\n\n开发时，程序出错后，修改正确后，webpack 有时不会及时查觉到内容已经更改，从而不能及时编译，要重新运行命令打包。\n\n笔者的文章里面的图片都是上传到简书上的，创建文章时，只是写个图片链接而已，你们也可以上传到简书或者七牛云，或者其他第三方。\n\n\n## Build Setup ( 构建安装 )\n\n``` \n# install dependencies\nnpm install \n\n# serve with hot reload at localhost: 3000\nnpm start \n\n# build for production with minification\nnpm run build \n```\n\n如果要看完整的效果，是要和后台项目  **[blog-node](https://github.com/biaochenxuying/blog-node)** 一起运行才行的，不然接口请求会失败。\n\n\n## 项目常见问题\n\n\n### 管理后台登录\n\n管理后台登录是用 **邮箱加密码** 进行登录\n\n\n### 管理员账号创建\n\n![](https://upload-images.jianshu.io/upload_images/12890819-67861a912768e646.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n管理后台的登录账号并不是 admin/user ，也不是搭建 mongodb 数据库时创建的 user 用户，这里的账号和密码要自己创建，至于怎样创建呢？\n\n### 用 postman 调接口注册\n\n如果是本地的可以像这样子创建，如果是服务器上的，请把 url 修改一下，\n\n\n![注册](https://upload-images.jianshu.io/upload_images/12890819-3772744f72b8ed3e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n- 1.  url \n\n```\nhttp://127.0.0.1:3000/register\n```\n\n- 2. param\n```\n{\n \"name\": \"BiaoChenXuYing\",\n \"password\": \"888888\",\n \"email\": \"admin@qq.com\",\n \"phone\": 1380013800,\n \"type\": 0,\n \"introduce\":\"加班到天明，学习到昏厥!!! 微信公众号：【 BiaoChenXuYing 】，分享 WEB 全栈开发等相关的技术文章，热点资源，全栈程序员的成长之路。\"\n}\n```\n这里的 type 为 0 是管理员账号，为 1 时，是普通用户。\n\n### 权限\n\n注册了管理员账号，并用管理员账号登录，还不能正常登录管理后台的，会被重定向加登录页面。因为权限管理的限制，要把自己注册的管理员账号的 **名字** 加在 config/router.config.js 的 authority 里面。\n\n详情请看：\n\n```\nhttps://pro.ant.design/docs/authority-management-cn\n```\n\n### 登录\n\n登录博客管理后台是用 **邮箱** 加 **密码** 登录。\n\n## 项目地址与文档教程\n\n开源不易，如果觉得该项目不错或者对你有所帮助，欢迎到 github 上给个 star，谢谢。\n\n**项目地址：**\n\n\u003e [前台展示: https://github.com/biaochenxuying/blog-react](https://github.com/biaochenxuying/blog-react)\n\n\u003e [前台展示: https://github.com/biaochenxuying/blog-vue-typescript](https://github.com/biaochenxuying/blog-vue-typescript)\n\n\u003e [管理后台：https://github.com/biaochenxuying/blog-react-admin](https://github.com/biaochenxuying/blog-react-admin)\n\n\u003e [后端：https://github.com/biaochenxuying/blog-node](https://github.com/biaochenxuying/blog-node)\n\n\u003e [blog：https://github.com/biaochenxuying/blog](https://github.com/biaochenxuying/blog)\n\n**本博客系统的系列文章：**\n\n- 1. [react + node + express + ant + mongodb 的简洁兼时尚的博客网站](https://biaochenxuying.cn/articleDetail?article_id=5bf57a8f85e0f13af26e579b)\n- 2. [react + Ant Design + 支持 markdown 的 blog-react 项目文档说明](https://biaochenxuying.cn/articleDetail?article_id=5bf6bb5e85e0f13af26e57b7)\n- 3. [基于 node + express + mongodb 的 blog-node 项目文档说明](https://biaochenxuying.cn/articleDetail?article_id=5bf8c57185e0f13af26e7d0d)\n- 4. [服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的](https://biaochenxuying.cn/articleDetail?article_id=5bfa728bb54f044b4f9da240)\n- 5. [github 授权登录教程与如何设计第三方授权登录的用户表](https://biaochenxuying.cn/articleDetail?article_id=5c7bd34e42b55e2ecc90976d)\n- 6. [一次网站的性能优化之路 -- 天下武功，唯快不破](https://biaochenxuying.cn/articleDetail?article_id=5c8ca2d3b87b8a04f1860c9a)\n- 7. [Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记](https://biaochenxuying.cn/articleDetail?article_id=5c9d8ce5f181945ddd6b0ffc)\n- 8. [前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题](https://biaochenxuying.cn/articleDetail?article_id=5cfcc6798090bd3c84138a08)\n\n\n## 服务器\n\n笔者觉得每个开发者都应该拥有自己的网站和服务器，这可是很酷的事情，学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。\n\n因为笔者就有自己的服务器，而且有两台了，用于平时的学习，还搭建了自己的网站。\n\n有不少读者问过我，为什么我学的那么快的呢 ？ 怎么在一年内学了那么知识的...\n\n其实也没什么秘决，就是平时有自己的服务器了，就爱折腾，学到的知识能很快得到验证，所以学起来兴致高一点。\n\n特别是大三和大四的学生，买了服务器，搭建个项目给面试官看也香，对找工作和面试都加分，还可以熟悉技术栈。\n\n[想学得快，就得有自己的服务器来折腾才行（低于 1 折、89/年、229/3年，比学生机还便宜）](https://biaochenxuying.cn/articleDetail?article_id=5de65dd90283dc742f8f633a)\n\n比如笔者的两个网站：\n\n\u003e https://biaochenxuying.cn/\n\n\u003e https://www.kwgg2020.com/\n\n\n\n## 最后\n\n如果您觉得本项目和文章不错或者对你有所帮助，请给个星吧，你的肯定就是我继续创作的最大动力。\n\n\u003c!-- 鉴于问问题的人有点多，笔者时间有限，处理不过来，大家可以加入 QQ 群：**186045338**，加群暗号：**全栈修炼** ，一起相互交流学习。 --\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaochenxuying%2Fblog-react-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiaochenxuying%2Fblog-react-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaochenxuying%2Fblog-react-admin/lists"}