修改登录页面Login

Ant Design Pro的前端路由都在config/config.ts里面，因为系统布局采用ProComponents中的ProLayout,ProLayout 与 umi 配合使用，umi 会把 config.ts 中的路由帮我们自动注入到配置的 layout 中,所有要修改Login页面，需要到config.ts里面去查找login页面所在位置，观察代码发现登录页面组件的文件位置是src/page/user/Login里面。

LoginForm

打开login/index.tsx，发现登录页面直接采用ProComponents的pro-form,登录表单也不是自己写的，直接采用LoginFrom,关于LoginForm的详细使用文档可以进入ProCcomponents 网站查看

修改登录页面

我们只是需要去除一些暂时不用的功能，修改页面的title和subTitle,这个步骤比较简单，直接修改LoginForm组件的title和subTitle就可以。

1、intl.formatMessage：是umi集成的多语言模块，如果VsCode有安装umi pro扩展，可以把输入焦点放到’pages.layouts.userLayout.title’ 上面，按下Ctrl+F12就可以跳转到对应语言id上面，然后就可以修改了。
2、注释其它登录方式：因为暂时不需要采用第三方登录，我们需要注释其它登录方式，主要注释掉上图红色方框里面的代码。另外有一个<FormattedMessage>里面的“其它登录方式这几个字”，跟踪发现它是umi多语言里面的，修改或注释需要把defaultMessage=“其它登录方式"改成defaultMessage=” "，并且还有找到src/locales/zh-CN/pages.ts里面对应id的内容，注释如下：
//‘pages.login.loginWith’: ‘其他登录方式 :’,
3、修改页脚：页脚是由一个Footer组件提供的，整个项目的页脚都是整个。找到src/components/Footer/index.ts文件，把里面<DefaultFooter>组件的links代码注释掉即可。另外通过修改多语言配置文件src/locales/zh-CN.ts里面的id为"app.copyright.produced"对应内容，就可以实现版权信息的修改。
4、修改<ProFormText>组件里面关于用户账号密码等信息提示，包括placeholder等。这些都可以通过修改多语言文件实现。

修改Mock

本项目采用Mock模拟数据，默认的用名和密码分别是admin和ant.design，登录的时候模拟api的是项目根目录下面mock里面的user.ts文件，在第120行可以看到模拟api/login/account里面直接根据输入的用户名密码是否amdin和ant.design进行登录判断，如图所示

这里我们可以把默认登录密码修改成我们认为合适的，当然修改后，记得把登录页面上面的placeholder进行相应的修改。

最终修改后的呈现效果如下：