ant design pro 初试

项目地址：https://pro.ant.design/zh-CN

介绍

①为什么是ant desgin pro？他是一个基于react的开箱即用的中台前端/设计解决方案，对于初学者（我）来说确实比较易用。对于前端小白可以学习阿里这种大厂是如何写前端的。比如，如果你现在去B站看React的学习视频会发现他们讲的代码和antd的代码差别比较大。视频里面讲解的都是类组件的代码，而antd的代码和我认识的在职前端使用的都是函数式组件的代码。当然，作为深入学习你需要了解这些知识。但是对于我这种非专业程序员来说，我需要的只是解决问题，我只需要学习一个方便的，能跟上时代的工具而已，也不会有人检查我的代码，所以我觉得antd是一个很好的代码学习园地和工具。
②为啥是react，react是世界上最流行的三大前端框架之一。react是比较多大厂的前端选择，短期内不会被市场淘汰。
③为什么需要前端框架？我不是一个职业程序员，依我的经验来看，曾经的手撸HTML让我痛苦万分，前端的工程化能够让你更快更优雅的建立前端界面，何乐而不为呢？而且这些框架在市场上大规模应用，你不太需要担心他们的稳定性。

初始化项目

①安装nodejs
nodejs是前端工程化的根基，npm是他的打包管理工具，类似python的pip。区别是pip装完包后你需要直接运行对应包的指令来执行，而npm更像是一个大总管，指令执行都可以通过他来执行。
②安装yarn
由于npm的速度太慢了，所以我们一般用yarn。

npm install -g yarn

由于ant的包是在是太大了，第一次下载非常费时，所以你可以用它推荐的tyarn或cnpm。那我用的是tyarn

npm install yarn tyarn -g

③初始化脚手架
这一步会帮你新建一个antd pro工程，生成系统的基础骨架结构，方便你后续的开发，所以叫做脚手架。

yarn create umi myapp

④安装antd pro环境
根据初始化的选择生成好项目后，你需要进入项目的目录运行

tyarn
或
tyarn install

这两个是一样的，指令是为了安装antd pro所有的依赖包。指令运行全部结束后你会看到项目目录中多了一个node_modules文件夹，这个文件夹就是放着所有的依赖包。
⑤启动项目
运行指令

yarn start

指令输入后yanr会编译项目，然后会自动帮你启动项目。
但这时候你访问他提示的网页你还没办法看到结果，因为antd应该说antd依赖的umi用了一个叫MFSU的技术，他会异步去下载你需要的一些资源文件，要等他全部加载完且打钩之后你就可以访问他给你的地址，就可以看到我们新建的工程了。

修改登录界面及接口

页面的代码都在src/pages目录下面，里面的user/Login就是登录界面。
antdpro的登录有自己的一套规则，你当然可以自己写一个，那就不是开箱即用了对吧。那我们要如何把后台对接他的接口和页面呢？

修改登录接口

登录需要两个接口
①login 用来进行账号密码验证
②currentUser 用来查询登录用户信息

本地测试可以到config/proxy.js里面修改访问服务器的地址
比如原proxy:

修改后：

'/slyl_vip/': {
      // 要代理的地址
      target: 'http://127.0.0.1:8000/',
      // 配置了这个可以从 http 代理到 https
      // 依赖 origin 的功能可能需要这个，比如 cookie
      changeOrigin: true,
    },

你可以在console和后端查看一下你访问的url有没有问题。

接口的配置在services/api.js里面，
把原本的login、outLogin、currentUser
替换成我们自己的url，至于返回值，你可以参考一下mock/user.js文件，mock是啥？是测试的代码，我们根据官方的测试代码的结果格式，不就可以做好我们自己的登录后端了吗？
登录接口有个比较重要的参数，需要设置，不然你后面那些data都没办法生效。

success: true,

修改登录界面

修改完接口后我们回来看看界面要怎么修改。
react函数组件的代码结构其实很简单，如下图：
我们定义了一个Login对象，这个Login对象就是我们这个组件，所以我们下面需要通过export default Login;将组件暴露出去供app或其他组件调用。

组件内部分为这么几块：

其他的不说，单说state。顾名思义，就是组件内部的状态，用于重新渲染组件，这个是非常重要的一个东西，需要你单独利用搜索引擎学习。我们看到jsx的部分，他很像html但是他并不是html，具体的区别也需要利用搜索引擎学习，这两块是react的核心内容。

看看这段代码和他的效果，你能够很快得将代码中的设置和页面上的组件对应起来，多调调代码，你就可以改出你自己的登录界面了。

这里有一段代码

subTitle={intl.formatMessage({
            id: 'pages.layouts.userLayout.title',
          })}

这个代码是i18n的代码，也就是根据你选择的语言，他可以返回对应的字符。
如果你的网页并不是全球性的，你可以直接把这个设置成字符串就行了。

subTitle={'副标题'}