首页 学海无涯 杂文随笔 使用AntDesign Pro重写博客后台管理
使用AntDesign Pro重写博客后台管理
摘要 由于之前博客后台程序弄丢了,所以很久没有更新博客,最近学习React技术栈,然后顺便使用AntDesign Pro重写博客后台。

一、前言

由于之前把博客后台程序搞丢了,导致很长时间没有更新博客,最近正在学习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、终......

版权声明:本文由不落阁原创出品,转载请注明出处!

本文链接:http://www.leo96.com/article/detail/77

广告位

本文配乐
来说两句吧
最新评论
  • 不想知道!
    不想知道!
    等着开源