Jimmy的专栏

MySQL8.0版本的加密方式和MySQL5.0不一样，由于mysql8.0以上加密方式，Node还不支持。修改调整MySql服务器的加密方式。2.初始化tsconfig配置文件，这会在项目下生成一个tsconfig.json的文件。在tsconfig.json文件的配置中添加配置，保存配置文件后重启vscode就可以了。3.配置tsconfig.json，更多的配置可以查看TS官网文档。无法写入文件“xxxx/xxx.js”，因为它会覆盖输入文件。1、config/routes.js里面添加路由示例。

ant design pro是摈弃font字体图标的，取而代之的是svg。这是一种好的做法，可以更加自由并且系统体积也更小了。但是amis采用font-awesome字体图标，这就有点问题，我们必须兼顾。

提示显示位置，可用’top-right’、‘top-center’、‘top-left’、‘bottom-center’、‘bottom-left’、‘bottom-right’、‘center’。踩坑记：axios改用umi的request之后，相同的mock给出的响应，用axios没问题，用request之后后显示Response is empty错误，跟踪数据后发现axios的响应会比umi多一个data,把mock的返回数据加上一层data包裹，就好了。data, // 请求数据。

我们可以改造一下，对菜单数据里面的每个菜单项增加一个指向amispage的前缀，这样运营人员设计菜单的json文档的时候，就可以在path里面直接书写文件名了。这个页面承载了我们的设计思想，就是根据不同的path加载不同的json文件，那么这个页面就会频繁的被调用，它在路由里面是需要设置参数的，这个参数就是我们的json文件名。这样做的好处是，运营的时候可以交给不懂编程的运营人员直接修改，修改后的json格式schema上传后就可以了。依赖列表一个数组，一个变量名称组成的数组，是触发影响函数的依赖变量。

而我们前面对菜单的改造是希望我们可以访问本地的json文件，这样我们就需要把这两种访问方式区分开来，并且amis的schema文档内部也有需要访问后端api的时候，为此我们需要简单的封装一下umi 的request。我们封装了request,项目里面需要访问api的地方都需要改代码，目前有两个地方有Api访问，一个是service里面，一个是amis 的schema里面，这里我们先解决service里面，关于amis访问api见我们下一篇文章设计amis组件。

因为我们使用amis，我们可以大胆的考虑我们日后可能实现整个系统交给不懂编程的人去维护甚至修改。那么我们对左边栏的菜单项目就要求更加自由的控制，如果这个菜单需要修改，我们不能够重新编译系统，我们要实现简单的修改某个json文档就可以了。那么我们就需要修改左边栏菜单的工作方式。

3、自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 scss\themes\cxd.scss 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。考虑到后面有可能会直接修改amis的样式，建议把依赖库里面的css文件copy到代码文件夹里面，这样可以不受amis升级影响，避免直接修改amis样式的时候，会被amis升级信息覆盖掉。，点击链接可以直接进入。

第一次采用ProLayout的时候也担心会不会不够灵活，比人我需要修改折叠按钮（collapsed）的位置能不能实现，带着这种猜疑，我进入官网，我的担心立刻解除，他们竟然直接就有了类似的demo: （可以进入以下网址，查看具体示例代码）https://procomponents.ant.design/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84-collapsed。

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

考虑到我们创建的管理后台是需要交付给我们的用户使用的，直接用Ant Design Pro的Title和Logo显然不合适，所以我们需要把它们改造成我们自己的。

零基础构建Ant Desing Pro 后台管理系统的前端