基于React + Ant Design Pro的博客后台管理系统
2022-08-03 09:57:03
222
{{single.collect_count}}

一个简易的基于React + Ant Design Pro的博客后台管理系统

前言

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案

React是一个用于构建用户界面的 JavaScript 库。其中主要使用了React Hooks + 函数组件

安装

// 安装依赖包npm i// 运行npm start

打开浏览器,输入http://localhost:8000

功能介绍

博客拥有博客后台的基础功能,如下图所示

  • 加载页
    image-20211120154418803

  • 登录页

    • 管理员 账号:buchiyu 密码:buchiyu
    • 用户 账号:user 密码:buchiyu

    image-20211120160705524

  • 外框架

    • 首先,跳转到欢迎页,目前为空

    image-20211120161314229

  • 文章列表页面

    image-20211120161436649

    • 查看文章

      image-20211120161520207

    • 快速编辑文章

      image-20211120161618696

    • 编辑文章,跳转到文章详情页

    • 点击【+新文章】,跳转到文章详情页

  • 文章详情页

    • 编辑文章

      image-20211120161819840

    • 添加新文章

      image-20211120161851836

  • 标签列表页

    image-20211120161934158

    • 快速编辑标签

      image-20211120162026625

  • 接下来的 分类/建站日志 列表页和标签列表页功能类似

  • 友链列表页

    image-20211120162344587

  • 管理页

    image-20211120162427505

  • API列表

    image-20211120162510857

    image-20211120162534230

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}