ant design 初探

Posted 2021-04-24 一剑杂谈

https://github.com/zuiidea/antd-admin

项目介绍：A excellent front-end solution for enterprise applications built upon Ant Design and UmiJS 

一套优秀的中后台前端解决方案

目前这版用UmiJS重构过了。里面一些目录结构是默认约定。

https://umijs.org/zh/

在线演示 - https://antd-admin.zuiidea.com

运行条件：node.js，添加淘宝注册源：

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org/

加载依赖 npm install

启动服务 npm run start

打开浏览器访问 http://localhost:7000

对接到自己的api服务：

\antd-admin-master\src\utils\config.js

  apiPrefix: 'http://192.168.18.78:9081/api/v1',

还有一个方案是通过nginx部署，代理。

服务提供Controller写法：

public JSONObject userLogin(@RequestBody  JSONObject user) 

需要跨域的话，得添加 filter,加入允许跨域：

response.setHeader("Access-Control-Allow-Origin", "*");

菜单：树状结构，数组输出。

{'id':'61','icon':'dashboard','name':'dayin','zhName':'报表','route':'/dayin'},

'breadcrumbParentId':'1', 'menuParentId':'-1',

有2个父节点，分布支持 面包屑和菜单树。

页面pages：目录路径就是页面路径。默认读取index.js 然后就靠里面内容去加载了。

模型：默认名model.js; 通过 namespace进行区分。

state,存储区

subscriptions监听,

effects异步, 

reducers同步，

页面与模型的关联 connect,类似注解的写法@；

@withI18n()

@connect(({ loading }) => ({ loading }))

@Form.create()

class Login extends PureComponent {

yield表示同步调用，这个是generator提供的功能

yield put({ type: 'hideModal' })  

const data = yield call(removeUser, { id: payload }) 

ajax调用，antd-admin-master\src\utils\request.js

哪里调用的还没看清，所有的请求是走的这里。使用axios库。

页面输出，都是react的内容，对state内容的渲染。依赖强大的控件库。