基于Umi搭建的个人Dva脚手架(一) - 框架说明

2023-11-12

1、基本概念阐述

  阅读本文前,你需要对react、dva、umi以及ant design的有一定的认识,具体的相关知识都可以参考官方文档。

  Umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架,是蚂蚁金服的底层前端框架。具体的可参考官方文档:https://umijs.org/zh/guide/ , 本质上来讲Umi是一个react的框架。

  Dva,也是有蚂蚁金服推出的一个react框架,它对react,react-router,redux的一个整合和封装,关于Dva的相关知识可以参考官方文档:https://dvajs.com/guide/。

  Ant design,是有蚂蚁金服推出的一个react UI组件库,关于Ant design的相关知识可以参考官方文档 https://ant-design.gitee.io/docs/react/introduce-cn (镜像地址,访问速度较快)。


2、框架说明

  使用Umi可以快速搭建Dva,无需手写路由router.js,桉目录约定注册model等等。在Umi官方脚手架基础搭建的个人Dva脚手架地址如下:https://github.com/zhengchangshun/myUmi ,引用的是Ant design 组件库,欢迎大家提出宝贵意见。该脚手架使用场景为应用后台,针对C端等网站还有待优化,主要实现了如下功能:

  1、优化了HTTP的封装。

    1.1、实现了常用的请求封装get请求、post请求form表单格式 、 post请求json格式;

    1.2、实现跨域请求jsonp;

  2、分模块实现多个Layout布局。可以应对不同的业务场景;页面基本布局,Header、Sider都组完整的封装;

  3、动态菜单配置。

    3.1、通过递归算法实现菜单,支持多层级菜单;

    3.2、完善了菜单选中,菜单展开等基础逻辑,开箱即用;

    3.3、无需额外代码,只需传入菜单的树结构即可;

  4、基础组件的封装。

    4.1、通过对Form组件的优化,可以通过传入表单的配置文件,即可动态生成表单组件GenerateForm;

    4.2、通过对Form组件的优化,在此基础上衍生了ListFilter(列表搜索)、弹窗组件GenerateModal;

    4.3、通过配置文件可以快速的生成页面View,节省大量的开发时间

  5、完善了favicon以及404页面的配置;

  6、包含完整的demo实例,可以快速参考自定义组件、可配置组件的使用;

3、框架分模块介绍

  后续会对框架说明中的6大功能实现,做详细的介绍。每一个模块我都会单独分析,并针对代码阐述个人开发思路,敬请关注。

  基于Umi搭建个人Dva脚手架Github地址:https://github.com/zhengchangshun/myUmi


下一篇:基于Umi搭建的个人Dva脚手架(二) - HTTP请求的封装


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于Umi搭建的个人Dva脚手架(一) - 框架说明 的相关文章

随机推荐

  • 【JS组件篇】使用拖拽组件 react-beautiful-dnd 实现工作台自定义布局功能

    项目要求 制作工作台页面 模块可根据后端配置动态展示 各模块可根据个人喜好进行拖拽布局 并保存 大致效果如下 大致实现步骤 整体布局 首先需要对设计稿进行分析 大致分为左右两部分 可根据后端配置动态展示左右两模块的展示内容 各模块相对独立
  • C++内存管理(2)new、delete详解

    目录 new operator new操作 new类对象时加不加括号的差别 new工作任务 delete工作任务 new和delete 堆区空间操作 对比malloc和free new和delete操作基本类型的空间 new和delete操
  • Direct3D纹理映射

    借助纹理映射技术 我们可将图像数据映射到三角形单元中 这种功能可以显著地增加所绘制场景的细节和真实感 例如创建一个立方体然后为其每个面映射一个板条纹理 从而将该立方体变为一个板条箱 在Direct3D中纹理用接口IDirect3DTextu
  • python判断工作日,节假日

    python判断工作日 节假日 模块 chinesecalendar 爬虫式的方法 模块 pandas 实例 模块 chinesecalendar 针对中国的节假日 强烈推荐 https pypi org project chineseca
  • 王道考研计算机网络第二章--物理层

    目录 2 1通信基础 2 1 1物理层基本概念 1物理层基本概念 2 1 2数据通信基础知识 1典型的数据通信模型 2数据通信相关术语 3三种通信方式 4两种数据传输方式 2 1 3码元 波特 速率 带宽 1码元 2速率 波特 带宽 2 1
  • 被入侵了怎么办?暴力破解被篡改了数据,该怎么处理?主机安全不容忽视

    主机安全关系着整个服务器数据的一个安全性 那么主机安全具体指什么呢 指保证主机在数据存储和处理的保密性 完整性 可用性 它包括硬件 固件 系统软件的自身安全 以及一系列附加的安全技术和安全管理措施 从而建立一个完整的主机安全保护环境 我们进
  • Kubernetes: K8S 容器集群管理系统

    虚拟机 gt 容器技术 传统部署 直接将应用程序部署在物理机上 虚拟机 vmware openstack 可以在操作系统中模拟出多台子电脑 Linux 子电脑之间是相互隔离的 独立 但是虚拟机存在启动慢 占用空间大 不易迁移的缺点 容器化技
  • openCV与freetype解决图片叠OSD的问题

    一 移植OPENCV3 4 1库 opencv 3 4 1 tar gz 功能 实现对图片的处理 移植文档见 正点原子 I MX6U 移植 OpenCV V1 3 注意版本 注意 安装交叉编译工具 注意 这里不能使用 NXP yocto 所
  • Oracle 12 创建数据库

    安装完oracle数据库软件后 就可以创建oracle数据库了 具体步骤如下 1 打开命令行 输入命令 dbca 通过它 我们可以对数据库进行管理 2 之后便会显示如下图所示的界面 点击下一步 3 进入配置数据库的界面 需要注意的是 a 全
  • ARL(Asset Reconnaissance Lighthouse)资产侦察灯塔系统

    资产灯塔 不仅仅是域名收集 https github com TophantTechnology ARL 简介 旨在快速侦察与目标关联的互联网资产 构建基础资产信息库 协助甲方安全团队或者渗透测试人员有效侦察和检索资产 发现存在的薄弱点和攻
  • Notepad++查看hex文件

    一 打开插件 插件管理 二 找一下有没有一个hex开头的插件 有的话就安装它 然后重启软件 三 装完之后 插件里面就会出现下面这个东西 下面那张图百度上找的 我的里面找不到这个插件 四 如果找不到的话上github下一个 https git
  • 【Python网络爬虫与信息提取】Request+BeautifulSoup

    1 Request库 import requests r requests get https www baidu com print r status code print type r print r headers print r e
  • 使用R语言进行单因素方差分析(ANOVA)是一种常用的统计方法,它用于比较多个样本的均值是否存在显著差异

    使用R语言进行单因素方差分析 ANOVA 是一种常用的统计方法 它用于比较多个样本的均值是否存在显著差异 在R语言中 可以使用aov 函数来执行单因素方差分析 本文将详细介绍如何使用aov 函数进行单因素方差分析 并提供相应的源代码示例 假
  • Linux操作系统之mysql数据库简介

    文章目录 数据库的介绍 有关数据库的操作 有关数据表的操作 C语言访问mysql 事务 视图 索引 数据库的介绍 mysql数据库模型 关系型数据库与非关系型数据库 关系型数据库 指采用了关系模型来组织数据的数据库 关系模型就是指二维表格模
  • 爬虫实验笔记

    这里的爬虫实验害暂时没有遇到验证码等问题 步骤可以简单概括为 1 找到爬虫必要的信息 2 内容提取 3 将提取到的内容保存至xlsx文件 1 找到爬虫必要的信息 以zh为例 首先找一个自己感兴趣的贴 进入开发者模式 刷新 网络抓包 这个时候
  • HTTP请求头部Content-Type字段

    研究HTTP请求头部的 Content Type 字段 基于 Chrome 插件 DHC 1 GET 请求 GET 请求不存在请求实体部分 键值对参数放置在 URL 尾部 因此请求头不需要设置 Content Type 字段 非 ASCII
  • vscode 如何修改字体大小

    方法一 左上角的菜单栏 gt 查看 gt 放大 方法二 左上角的菜单栏 gt 首选项 gt 设置 gt 找到编辑器 gt 找到editor fontSize参数 gt 复制到右侧的编辑器中编辑editor fontSize 18 你想要的大
  • 微信小程序性能优化总结

    对微信小程序进行性能优化 主要可以从两大方面进行分析 性能扫描工具和代码优化 一 使用性能扫描工具 微信小程序提供了一个 体验评分 的工具插件 可以使用它获得微信小程序的一些性能数据和明显的缺陷 进而根据报告进行相应的优化 同时 为了方便开
  • Springboot实现发送邮箱

    Springboot实现发送邮箱 直接上代码了 简单粗暴 太简单 不要兴奋 一 pom文件
  • 基于Umi搭建的个人Dva脚手架(一) - 框架说明

    1 基本概念阐述 阅读本文前 你需要对react dva umi以及ant design的有一定的认识 具体的相关知识都可以参考官方文档 Umi 中文可发音为乌米 是一个可插拔的企业级 react 应用框架 是蚂蚁金服的底层前端框架 具体的