antdesign pro 怎么使用 ant design pro 安装

admin2024-06-01  17

一、开门见山

     Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟数据的开发模式, 通过 Restful API 的形式和任何技术栈的服务端应用一起工作,技术组成主要是react+redux+dva+antd+fetch+roadhog,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro ,脚手架安装完成,运行起来的样子:

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_加载,第1张

 

二、云里雾里

 1、脚手架的安装步骤

     使用命令行工具

npm install ant-design-pro-cli -g

mkdir my-project

cd my-project

npm start

 2、目录结构分析

我们已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_控件_02,第2张

 3、src文件夹 轻描淡写

   而src中本身又包含着很多的子文件夹。 
   其中,我们最常用的应该了routesservicesmodels以及components。 
  下面,我们来依次了解一下这四个文件夹的作用。

  1. routes:每个路由对应的页面组件文件。主要定义具体页面的基本结构和内容。
  2. services:用于与后台交互、发送请求等。
  3. models:用于组件的数据存储,接收请求返回的数据等。
  4. components:组件文件夹。每个页面可能是由一些组件组成的,对于一些相对通用的组件,建议将该组件写入components文件夹中,并在routes文件夹中的文件引入来使用。

三、疑难杂症

   1、css样式的处理

            Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性。

           用 less 写样式好像没什么改变,只是类名比较简单(实际项目中也是这样),js 文件的改变就是在设置 className 时,用一个对象属性取代了原来的字符串,属性名跟 less 文件中对应的类名相同,对象从 less 文件中引入。

 使用:

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_antdesign pro 怎么使用_03,第3张

 编辑:

在上面的样式文件中,.title 只会在本文件生效,你可以在其他任意文件中使用同名选择器,也不会对这里造成影响。不过有的时候,我们就是想要一个全局生效的样式呢?可以使用 :global

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_加载_04,第4张

2、ant design pro数据流走向

  common 

  • menu.js
  • 主要设置导航栏的信息,如跳转链接和所显示的文字和图标。如下所示:
  • router.js

         这个文件很重要,里面涉及了路由,数据还有页面,主要将路由和页面关联,以及将数据和页面关联。如下所示:

 

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_加载_05,第5张

从上面代码可以看出,一个页面可以关联多个数据,这个根据页面的需求来决定,只要是关联的数据都可以在页面中拿到。dynamicWrapper 函数所做的工作就是将页面与model关联起来,其中第二个参数就是model的文件名。

  models

在第二部分框架的基本结构中就说了models是属于dva的,所以如果你之前就使用过dva的话,那这个框架就用起来非常得心应手,model是dva的核心部分,ant-design-pro就是针对dva的一次最佳实践。下面看下model文件的主要结构:

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_数据_06,第6张

  • namespace:该字段就相当于model的索引,根据该命名空间就可以找到页面对应的model;
  • effects: 处理所有的异步逻辑,将返回结果以Action的形式交给reducer处理;
  • reducers:处理所有的同步逻辑,将数据返回给页面;

补充:在effects中调用了service中所封装的后台接口,该调用方式是ES6中的generator函数,该函数使得异步操作如同同步操作一样。call就相当于一个执行器,在call内部对generator函数进行了处理

   routes

在routes中主要涉及两个操作,第一个就是如何拿到数据,第二个就是如何发送同步或异步请求来更新页面数据。

  • 如何拿到数据

在该模块中,就是每个路由所对应的页面,下面主要了解数据是如何在页面中取到的:

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_antdesign pro 怎么使用_07,第7张

  从上面的代码可以看到在页面中导入了dva框架,用dva的connect方法可以拿到所有的state,我们只需要在页面中获取需要的state即可。拿到之后所有的数据都是以props的形式嵌入页面的,也就是我们就像操作props来对待这些数据即可。

  • 如何更新页面数据

   在和model关联的页面中,都会给页面传入dispatch() 这个方法,该方法就是分发的意思,可以发出一个Action,Action是Redux中的概念,发出这个Action后就会找到页面所对应的model,然后做出相应的处理。如下:

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_控件_08,第8张

   dispatch中的参数就是一个Action。第一个type字段由两部分组成,前半部分是model的namespace(命名空间),后半部分是该Action的处理位置,对应model中的effects(处理异步逻辑),或reducers(处理同步逻辑)。

   services

   这个模块中的逻辑相对比较简单,就是模仿一下后台接口的实现,对请求进行了进一步的封装。

  

antdesign pro 怎么使用 ant design pro 安装,antdesign pro 怎么使用 ant design pro 安装_控件_09,第9张

  在该层将request的结果返回给model层,放在async内部的函数都是同步的。

  Mock

  Mock的功能就是可以在本地模拟后台的行为,在框架中主要涉及到.roadhogrc.mock.js文件。如果开启代理的话,当发起请求时就会被代理到本地来处理,根据请求方式和URL就可以返回不同的数据。

总结

  浏览器输入路径->脚手架获取路径->通过common匹配路径(分级匹配)->加载layouts页面->加载routes页面,调用

  dispatch()请求数据,加载->models模型接收,并调取services请求,并返回且封装->将请求到的参数传入components控件中->加载components控件,通过数据渲染,返回控件html。

        大概流程就是这样,antd pro框架已经集成了dva请求框架,和react-router路由框架,开发需要的只是去common中添加新页面的path,去routers中新增页面,如果有可复用的页面控件的话还可以去components中封装起来,然后去models中新增加一个模型,services中增加一个访问路径。

 



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!