code学习

快速学习Ant Design Pro-快速入门

3.2、快速入门

3.2.1、部署安装

下载地址:https://github.com/ant-design/ant-design-pro

我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zip

第一步:将ant-design-pro-master.zip解压到任意目录,我的目录是F:\code
快速学习Ant Design Pro-快速入门

Ant Design Pro提供的目录如下:

快速学习Ant Design Pro-快速入门
第二步,导入项目到Idea中
快速学习Ant Design Pro-快速入门
快速学习Ant Design Pro-快速入门
快速学习Ant Design Pro-快速入门
第三步:进行初始化以及启动
tyarn install #安装相关依赖
tyarn start #启动服务      

测试:

快速学习Ant Design Pro-快速入门

可以看到,系统已经启动完成。

3.2.2、菜单和路由

默认的菜单是不能直接投入到项目开发的,所以,我们需要搞清楚如何自定义菜单和路 由。

在pro中,菜单和路由,在router.config.js配置文件中进行管理:

快速学习Ant Design Pro-快速入门

打开​

​router.config.js​

​后,可以看出,pro提供了有2套路由(布局),分别是/user和/

快速学习Ant Design Pro-快速入门

/user的布局:

快速学习Ant Design Pro-快速入门

接下来,我们先重点关注,/路由:

routes: [
    // dashboard
    {
      path: '/',
      redirect: '/dashboard/analysis'
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      icon: 'dashboard',
      routes: [{
          path: '/dashboard/analysis', //请求路径name: 'analysis',
          component: './Dashboard/Analysis', //组件位置
        },
        {
          path: '/dashboard/monitor',
          name: 'monitor',
          component: './Dashboard/Monitor',
        },
        {
          path: '/dashboard/workplace',
          name: 'workplace',
          component: './Dashboard/Workplace',
        },
      ],
    },      

所以,可以得出结论,菜单是有路由的配置生成的。

接下来进行实验,新增一个路由:

// new
{
  path: '/new',
  name: 'new',
  icon: 'user',
  routes: [{
      path: '/new/analysis',
      name: 'analysis',
      component: './Dashboard/Analysis',
    },
    {
      path: '/new/monitor',
      name: 'monitor',
      component: './Dashboard/Monitor',
    },
    {
      path: '/new/workplace',
      name: 'workplace',
      component: './Dashboard/Workplace',
    },
  ],
},      

测试:

快速学习Ant Design Pro-快速入门

可以看出,新的菜单以及添加到页面中,只是显示的文字不对。那么文字在哪里配置呢?

其实,文字是在国际化文件中进行配置的:

快速学习Ant Design Pro-快速入门
快速学习Ant Design Pro-快速入门

新增配置如下:

'menu.new': 'New Dashboard', 
'menu.new.analysis': 'New 分析页', 
'menu.new.monitor': 'New 监控页', 
'menu.new.workplace': 'New 工作台',      

进行测试:

快速学习Ant Design Pro-快速入门

发现,已经正常显示了。

3.2.3、新增页面

上面我们添加了新的菜单,但是页面依然使用的是模板中的页面,那么如何新增页面呢?

所有的页面依然是保存的src/pages中,在pages目录下,以功能为单元创建目录,如:

快速学习Ant Design Pro-快速入门

创建文件 NewAnalysis.js:

快速学习Ant Design Pro-快速入门

修改路由中的路径:

快速学习Ant Design Pro-快速入门

测试:

快速学习Ant Design Pro-快速入门

可以看到,一个新的页面就创建好了,并且已经加入到菜单中。

3.2.4、pro中的model执行流程

在pro系统中,model是如何执行的,下面我们以表格为例,探究下在Pro中的执行流程。

快速学习Ant Design Pro-快速入门

进入TableList.js代码进行查看:

生成表格的主要逻辑在这里:

快速学习Ant Design Pro-快速入门

在StandardTable中,使用Table组件生成表格,其中数据源是data:

快速学习Ant Design Pro-快速入门

TableList.js中,data数据从构造方法中获取到:

快速学习Ant Design Pro-快速入门

this.props中的rule数据,是通过@connect()修饰器获取:

需要注意的是:{ rule, loading }是解构表达式,从props中获取数据

快速学习Ant Design Pro-快速入门

数据从model中获取,在models下的rule.js中:

快速学习Ant Design Pro-快速入门

在TableList.js中,组件加载完成后进行加载数据:

快速学习Ant Design Pro-快速入门

在rule.js中,进行加载数据:

快速学习Ant Design Pro-快速入门

queryRule是在/services/api中进行了定义:

快速学习Ant Design Pro-快速入门

数据的mock是在mock/rule.js中完成。

快速学习Ant Design Pro-快速入门

继续阅读