antdesignpro 重定向到登录页面_Ant Design Pro实战入门

前言

前几天突然有个冲动，想要开始写公众号，分享一些自己在技术方面的学习经历。公众号注册好之后，写什么内容成了摆在眼前的第一个问题。这个号的定位主要是在前端相关的技术分享，最近在做一个后台管理系统，正好用到了AntDesign Pro这个框架，就暂且分享一下关于AntDesign Pro的使用心得吧。

介绍

首先我们讲一下AntDesign Pro到底是个什么东西。要想知道AntDesign Pro，我们首先要了解一下Ant Design是什么。根据Ant Design的官网slogan：

服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

其实，Ant Design就是一套组件库，是由阿里巴巴的蚂蚁金服团队开源的。它主要包括一些我们Web开发中最常用的一些组件。看Ant Design官网的文档，主要分为"设计语言"和"组件“两部分。

“设计语言”部分是给设计师看的(当然程序员也可以看)，主要讲Ant Design的设计思想以及设计规范。

“组件"部分就是给程序员看的组件的API文档了。

Ant Deisgn包含的组件非常多，基本做一个网站常用的组件都包括了，比较适合用来做一些后台系统等对UI的个性化要求不高的地方，不适合直接用来做前端产品。

好，说完了Ant Design，那么Ant Design Pro是什么东西呢？既然后边加了“Pro”，那应该是比Ant Deisgn更“高级”一点。根据Ant Design Pro的官网：

开箱即用的中台前端/设计解决方案

其实，Ant Design Pro相对于Ant Design主要特点就在于“开箱即用”，也就是它是建立在Ant Design(UI部分)+umi(数据逻辑部分)等框架之上的一个“高级框架”。不太严谨地说，Ant Deisgn Pro其实是一个网站生成器。使用一条命令就可以生成一个完整可用的后台网站，而我们接下来需要做的就是删掉没用的部分，然后把有些文案标题什么的改一下，然后根据自己的需要去组合自己想要的页面和功能。

用Ant Design Pro写代码有点像插积木，大的框架和组件都给你准备好了，你只需要取得自己需要的东西，然后在代码中组合起来即可。

不过需要注意的是，Ant Design Pro其实只是一个前端框架，如果需要后端API服务的话，需要自己另外写代码～

实战

在这一部分我会大概说一下我使用Ant Design Pro做开发的大致流程，但是不会写的太详细。因为我不想在一篇文章中写太多东西，这篇文章主要是给第一次接触Ant Design Pro的同学做一个大致的介绍。如果大家对哪一块有兴趣或者有疑问，可以在下方留言，我后续可以单独出文章介绍。

根据官网给出的介绍(https://pro.ant.design/docs/getting-started-cn)，执行指令即可生成一个Ant Deisgn Pro的项目目录(具体的指令大家可以去官网看一下，我不想在文章里原文复制文档中已有的东西)。Ant Design Pro会让你选择JavaScript或者TypeScript，根据自己的需要选择即可。不过如果选择使用JS的话，以后每次添加组件都需要加一个--js的参数，因为它的默认语言是TS。

安装好依赖之后，执行npm run start即可启动生成的网站。默认生成的网站是只有一个欢迎网页的。接下来我们就可以通过命令往网站中添加页面了。

这里我说一下如何添加页面。Ant Design Pro提供了一个示例网站，网址在：https://preview.pro.ant.design

这个网站不仅可以提供示例，而且在每个网页中都提供了如何添加这个网页的指令：

如上图所示，如果想为自己的网站添加一个登录页面，执行

npx umi block add UserLogin --path=/user/login

命令即可，但需要将--path的参数修改为你自己的路径。这个路径是比较重要的，决定了两个东西：

1. 这个页面在URL中的路径是什么。Ant Design Pro的每个页面都对应了一个独立的URL Path。
2. 这个页面在菜单栏以及面包屑中的位置和层级关系。

关于路径这一块我们先不细讲，以后可以单独写一篇文章来介绍。

通过上述命令，会在你的项目目录下的src/pages/{your-path}下生成所需的文件。{your-path}就是你在上面命令中指定的路径。

接下来要做的就是到src/pages/{your-path}下修改代码，达到自己所需要的页面结构。比如修改文案以及删除自己不需要的控件等。

大概介绍一下经常需要修改的几个文件：

index.jsx - 这个文件是页面的主文件，页面上直接可以看到的东西基本都是在这个文件中修改。

model.js - 这个文件是DvaJS定义models的地方，它主要基于redux-saga框架，用于管理前端状态。所以如果你有页面级的状态需要处理，都需要修改这个文件。

service.js - 这个文件主要用来编写API请求。默认生成了增删改查的四个方法，如果需要请求更多API或者修改API的格式就在这个文件中修改。

这里有一点需要注意，就是上边提到的model.js中存储的状态，只能在这个页面中被引用到。如果你需要一个页面中的状态被其他页面引用，那么就需要把它的models写到项目目录的src/models目录中。

另外全局文件中会修改的文件有：

config/config.js - 全局的配置文件，比如你要修改菜单的名字或者位置和层级关系，就需要修改这个文件中的exports.routes。另外webpack的配置也可以在这个文件中添加。

mock/* - 可以写一些前端自己的测试数据，这样可以在不添加后端的情况下单独测试前端的页面逻辑。

总结

除了以上提到的几个文件和目录，其他部分基本是很少需要改动的。我们用Ant Deisgn Pro做开发需要改动最多的就是pages下面的几个文件。各种后台系统常用的页面布局方式Ant Design Pro都给我们提供好了，我们只需要将他们添加到系统中然后稍作修改即可，可以说大大减少了我们在前端页面和样式部分的工作量。

这篇文章由于只是介绍性质，所以很多部分是一句话带过，并没有讲太细。大家对哪一部分有疑问可以在下方留言，以后如果有时间我可以单独出文章来介绍。

最后感谢蚂蚁金服团队~

​