一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何页面,可以由路由引导到预设的 404 页面. 代码控制跳转到报错页面,比如根据请求返回的数据,将没有权限的用户引导到 403 页面. 2.1.2.实现 针对页面级的报错,我们提供了两个业务组件供你选择,可以很方便地实现一个报错页面: Exception 异常页 <Exception type="…

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们…

本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Design Pro是个什么玩意,同时也能通过小Demo提升学习信心. 一.Ant Design Pro简介 Ant Design Pro是一个开箱即用的中台前端/设计解决方案. Ant Design Pro官网地址:https://pro.ant.design/index-cn GitHub源码下载地址为:…

一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含components目录等等.每次在新建项目时,手动创建这些固定的文件目录.脚手架的作用就是帮助你完成这些重复性的工作,包括一键生成主要的目录结构.安装依赖等等. 1.2.参考地址 ant design参看地址:https://ant.design/docs/react/intr…

在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功能. 目录结构浅谈 首先,我们来简单了解一下整个项目的目录结构及其中每个文件的功能. 一个完整的目录结构如下:  其中,关于业务功能的代码都在src文件夹下. 而src中本身又包含着很多的子文件夹. 其中,我们最常用的应该了routes,services,models以及components. 下面…

前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard指示板 pages/Dashboard 目录下:Analysis.js分析页.Monitor.js指控页.WorkPlace.js工作台 用到的一些技术点:react v16.6 动态 import,React.lazy().Suspense.Error boundaries (来源:Postbir…

1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析.按照如下的步骤做即可 PS.如果想要给菜单配置icon,ant design pro有一些通用的icon图标,可以在上面配置路由的时候在每个路由处都加上 icon:'iconname' 即可,这是最简单的方法. 配置了路由以后再给它配置相关的语言预设即可,在这里我只配置了中文和英文. 这样页面上的菜单就会有相应的配置了. 2.使用mock模拟后台数…

脚手架搭建 git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project 然后 cd my-project 项目的目录结构: config umi配置,包含路由,构建等配置 mock 本地模拟数据 public favicon Favicon src assets 本地静态资源 components 业务通用组件 e2e 集成测试用例 layouts 通用布局 models 全局 dva model…

利用Ant Design pro开发的项目,如何用Nginx部署呢? 第一步:把项目打包,打包命令如下: npm run build 运行完毕会在项目目录下生成dist文件夹. 第二步:想要测试打包好的代码是否可以正常运行,安装serve,如下命令 npm i serve -g serve安装完毕,利用serve运行打包好的代码,运行命令: serve dist 测试完毕,代码可以正常运行. 第三步:用Nginx进行部署. 1.下载Nginx:http://nginx.org/en/downlo…

1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架.而ant design pro呢?就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架  . ant design pro官方文档:https://pro.ant.design/docs/getting-started-cn 2.安装 默认你本地已安装好node和git环境 $ gi…