ant Design给人的感觉就是：很强大、很庞大（杂乱）。

它号称已经应用于多个生产项目了。或者看这里。或者看看dva官方首页吹的牛B。

官方的dva教程只是告诉你dva/dva-cli有多好用，然后带你做了一个用户列表界面的展示。

接下来的思路还是先找重型的脚手架。

进入官方的awesome-ant-design先，在Boilerplates中的前四个是star数超过100的，下面分别看它们。

（【扩展：什么叫awesome？ 和 只有awesome的才是awesome的。P.S.进入了awesome列表，都是些非凡的项目。你去这个列表上看一看，都是些什么！能被这个所谓的awesome收录，我觉得水准就是世界级的。】）

Ant-Admin

400+ stars。 Demo

特点：全面

React SPA

300+ stars。 Demo

特点：动效

React-antd-admin

180+ stars。 Demo

特点：简单

React-redux-antd

150+ stars。No Live Demo

试用报告

前三个跑起来以后和Live Demo一毛一样。
最后一个没跑起来，放弃。

进入 AntD Admin

项目的package.json解读：

关于依赖版本的定义，直接version，>,<=这种就不说了。

关键是^和~这种的。需要学习一下。

而依赖和dev依赖的区别也要有所了解。

看下dev依赖：

• atool ： ant封的webpack
• babel相关
• dora：配置管理
• eslint相关
• glob：路径匹配（模糊？正则？）的node组件
• mock
• 等等

至于dependencies就比较常规了，react、ant、dva什么的。

ant-Admin项目代码本身窥探：

• 结构比较清晰。
• 封装度不如admin on rest。因为dva就是直接用了antd的ui组件，是组件级别而不是框架级别，dva自己也说提供的api非常少。所以我们甚至在这个脚手架里面还看到less文件。不过说起来其实也还好，因为这样的话，我们可以自己做封装，而且样式也可以更灵活了。

初步体会：

• ant-Admin是利用dva实现的稍微复杂了一点儿的例子。
• Model是dva中的重要概念，事实上它自己也是这样说的。
• 不妨结合官方的开发指引高效地进行学习。

相关学习资料链接

• DVA首页
• 12步30分钟完成你人生中第一个DVA应用
• 做完人生的第一步，请继续看：DVA相关概念和课程入门

关于ant组件

总的来说非常强大，它的组件库丰富，配置灵活，样式也多变。我简单试用了一下，单从展示与页面功能上来说，适配我们的产品绝大部分功能绰绰有余。

在读脚手架代码时，发现一个问题，就是两个框架在组件相关目录文件内容组织时有些小区别：

• dva-cli的工程的做法是：routes目录中只放几大主要模块的Component（其他框架也这样做的），但是它不放样式，只是简单组织一下大体结构。主要的内容部分是直接引的Component目录下的模块组件。
• ant-admin的做法是：routes中每个主要模块的文件写的比较复杂，而在Component目录中的对应目录做的是这个模块的部分组件，在routes目录中的对应文件中对他们进行拼装，而且实现了一些dispatch/action/行为，而且还会引入样式。而在Component中，是不实现dispatch的。
• 个人窃以为dva的方式较好。当然，组件复杂的情况下，可以在dva的方式的基础上，按ant-admin的方式拆开嘛。

当然了，在Component目录中，做法基本是没区别的。你定义自己的业务组件，完成对ant组件的使用。

其他区别

发现一个就列一个

• dva用了路霸。aa用了dora。
• aa使用了动态路由，而dva并没有教我们用。
• dva有的eslint默认配置。

结论：dva/antDesign更新快，自我迭代，因此它代表的是最佳实践。我想后续的话，我们用其他脚手架指导和启发我们的思路，而整体框架则沿用dva。

关于登录认证

都SPA了，登录认证不建议使用老的那一套。因为前后分离了，后端不应该管页面渲染的事情。如果有个请求被拒绝了，由后端直接扔给浏览器一个默认的404的html，那我认为这是前后分离不彻底（同样的，登录页面后端也不要管，也由前端框架来负责。）。
这不是有偏执的牛角尖狂热症，同时我认为后端应该转变或者抛弃传统的一些思路。
试想，如果我前端又开发了一个手机app版本的，界面是用原生应用生成，数据和web前端一样，同样是基于后端。那么，后端发现认证失败的时候，是还扔给我404的html吗？
因此，后端只管做好数据提供者就好，任何展示部分不要插手。如果一个后端开发人员就是想插手展示部分，请你学习一下前端开发技术，并转型成为前端开发人员。算我求你。
前端SPA认证的基本思想，请参考这篇React SPA登录与身份认证。

基本思想我来解读一下：

1. 请求首页/登录页，不考虑认证。
2. 登录时，后端生成token，response给前端，前端保存。（后端逻辑：接受登录请求，生成token，response出去。前端逻辑：登录提交后，等待接受登录的response，接收到以后成功登录，保存token。）
3. 每次数据请求时，前端在http-header中包含token。（前端逻辑：请求后端数据，并在这个请求中附带上token）
4. 后端可以根据token，决定是返回数据，还是返回拒绝信息。（后端逻辑：先判断token，如果没问题就返回数据了。如果不行，返回一些信息，并附带401或者403状态码。）
5. 前端根据状态码做数据展示或者路由。（前端逻辑：如果是200,201状态码，处理并展示数据，总之该怎样怎样。如果状态码是401或403，那就直接路由到/login，并清空之前的token就好了。）

总结：后端根据token进行认证（安全性有待讨论，肯定有加固方式）。由返回码通知前端认证结果。前端每次请求数据带token，并且根据返回码判断请求成功或者被拒绝。

看似啰嗦的逻辑或者流程，其实并不难做。后端库是成熟的。
Spring的看这里，SpringMVC的RESTful API中就带token处理的相关类/API/注解。你只管写好你的CRUD接口就好，认证这块公共模块就给你做好了啊。

前端也是成熟的。
就算是自己封一下也蛮简单的啊。【请看一下admin-on-rest关于登录认证的说明，加深理解】

**【TODO】继续了解JWT的概念，并学习使用react和jwt的结合，以及相关的库 **

关于Icon

在开发前端工程时，很多地方需要使用一些小的logo图片。对界面美化、整体风格塑造等等方面都会有用。

主流的方式是使用一些svg等格式的矢量图。

有没有现成的图片？如果有的话，我们如何引用？

当然有现成的！而且在antd admin中，对图标使用都有现成的例子。

antd admin 直接引用了iconfont的图标解决方案。这也是ant Design的Icon组件的图标使用方式。

具体的使用方法是：

1.在iconfont的网站上，众多开发者发布了非常多的免费使用的图标库。
2.使用者在iconfont网站上注册一个账号，并在自己的工作空间中创建一个项目。
3.对自己的项目生成一个在线访问的超链接，这个链接可以是一个公开的链接，公网访问，而且无需登录也可访问。
4.将喜欢的图标添加到自己的项目中。
5.常规开发前端工程代码，并在你的代码中使用Icon组件。
6.将步骤3生成的超链接配置到我们的前端工程代码中，即可在工程中用Icon组件使用步骤4中添加的所有图标。
7.上面的步骤要求前端工程运行后必须能在线访问iconfont。因此iconfont即是一个在线的图标托管系统。如果需要离线使用步骤4中的所有图标，iconfont也提供打包下载然后本地使用的解决方案。

然而，antd默认使用它的基础在线的icon组件。每次都会在线向alicdn.com请求图标。【TODO 如果用了本地图标解决方案，这种事情还会发生吗？讲道理的话应该不会】

如果你的chrome装了qq电脑管家插件，它会发生向qq.com某地址请求的事情。我搞了一会儿才搞明白是这个插件的问题。我还以为我用的js库被企鹅厂搞了。

全局设置

utils/config.js 中可以改一些全局设置。感谢antd admin作者。

关于样式

可参考阮神的 CSS Modules

iconfont本地化

参考这个issue
如果想引用自己的图标库，还有这个issue