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

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

前言

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

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

安装

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

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

功能介绍

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

  • 加载页
    基于React + Ant Design Pro的博客后台管理系统_第1张图片

  • 登录页

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

    基于React + Ant Design Pro的博客后台管理系统_第2张图片

  • 外框架

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

    基于React + Ant Design Pro的博客后台管理系统_第3张图片

  • 文章列表页面

    基于React + Ant Design Pro的博客后台管理系统_第4张图片

    • 查看文章

      基于React + Ant Design Pro的博客后台管理系统_第5张图片

    • 快速编辑文章

      基于React + Ant Design Pro的博客后台管理系统_第6张图片

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

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

  • 文章详情页

    • 编辑文章

      基于React + Ant Design Pro的博客后台管理系统_第7张图片

    • 添加新文章

      基于React + Ant Design Pro的博客后台管理系统_第8张图片

  • 标签列表页

    基于React + Ant Design Pro的博客后台管理系统_第9张图片

    • 快速编辑标签

      基于React + Ant Design Pro的博客后台管理系统_第10张图片

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

  • 友链列表页

    基于React + Ant Design Pro的博客后台管理系统_第11张图片

  • 管理页

    基于React + Ant Design Pro的博客后台管理系统_第12张图片

  • API列表

    基于React + Ant Design Pro的博客后台管理系统_第13张图片

    基于React + Ant Design Pro的博客后台管理系统_第14张图片

你可能感兴趣的:(react.js,javascript,前端)