一、前言

由于之前把博客后台程序搞丢了，导致很长时间没有更新博客，最近正在学习React技术栈，所以使用AntDesign Pro重写了一下博客后台管理系统的前端。

博客管理的核心（文章管理）已经做好了，使用了新的编辑器，发个文章试试，那就随便写点吧，先介绍一下AntDesign Pro，再展示一下效果图。

二、AntDesign Pro简介

在介绍AntDesign Pro之前，先来了解几个名词：React、蚂蚁集团、Ant、AntDesign、Umi。

• React：截止目前（2022年），三大主流Web前端框架（React/Vue/Angular）之一。
• 蚂蚁集团：蚂蚁科技集团股份有限公司的简称，又名蚂蚁金服，旗下有支付宝、花呗等知名产品。
• Ant：“蚂蚁”的英文，亦是蚂蚁集团的英文简称。
• AntDesign：蚂蚁集团的某个团队开发的一套企业级设计语言和React组件库。
• Umi：可插拔的企业级React应用开发框架，类似next.js的东西，应该也是蚂蚁集团的团队开发的。

下面简单介绍一下主角

AntDesign Pro是一个开箱即用的企业级中台/前端解决方案，集成了AntDesign、Umi以及其他工程化前端框架。使用AntDesign Pro可以快速搭建一个后台管理系统的前端，真正的开箱即用。也许对于专业前端来说，自己搭一个后台管理系统的前端框架很容易，也许使用AntDesign Pro太重量级，但是对于我们略懂前端的后端开发者来说，AntDesign Pro还是使用起来还是非常方便的。

简介即是简介，不必多说，下面看效果图。

三、博客后台管理系统效果图

目前完成的栏目：

文章列表：

发表文章：

新版编辑器：

四、新编辑器的代码高亮效果

随便放一段JS代码：

  async function handleTableRequestAsync(params: any) {
    const { current: page, pageSize: limit } = params;
    const { code, msg, data, count } = await getAnnouncementGetList({ page, limit });
    if (code === 0) {
      return {
        success: true,
        data,
        total: count,
      };
    }
    message.error(msg);
    return { success: false };
  }

End、终......