使用UmiJS和DvaJS完成用户管理系统

前言

对React温习差不多了，是时候尝试制作个小项目。目前使用UmiJS + DvaJS来构建项目。

UmiJS是一个可插拔的企业级 react 应用框架，具体可查看官网文档

DvaJS是dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。官网地址：https://dvajs.com

创建项目

创建UmiJS项目很简单，根据文档的通过脚手架创建项目步骤就行了，这里不多描述。

提示安装类型：
Select the boilerplate type 选择 app
Do you want to use typescript? 选择 No
What functionality do you want to enable? 空格键选择 antd和dva回车确定

antd是蚂蚁金服的React UI框架，它的设计非常精美，其官网地址：https://ant.design/index-cn。这里加个UI框架只是为了项目数据展示美观些。

配置代理

下面插点数据，既然是用户管理系统就需要一些用户信息，利用mock制造一些json数据：http://jsonplaceholder.typicode.com/users，由于跨域等问题，还是将这个地址反代自己地址吧。根据UmiJS问题的Proxy配置，需要在项目目录下的.umirc.js或者config/config.js添加编辑：

"proxy": {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}

然后启动项目yarn start访问地址：http://localhost:8000/api/users是否成功。

生成路由

编写路由前有必要先了解下UmiJS路由运行方式：