[前言] 找了很多Admin模板,最后还是看中了AntDesignPro(下文简写antd pro)这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/index-cn 该套模板是使用了React开发框架作为基础,AntDesign(蚂蚁金服开源UI组件库)作为UI库,集成了Dva,Umi,Mock等库,如果不是很了解这些内容,门槛还是比较高的. 我们今天需要实现一个需求:将Antd Pro模板中固定写死的菜单换成从服务器请

一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs.com/freely/p/10874297.html   Ant Design Pro 是一套开箱即用的中台前端/设计解决方案,是一个开发 中后台 系统的 脚手架.类似 vue-cli 一样,创建项目后,各种webpack配置.路由配置等,都已经弄好,直接开发就可以了. 2.Ant Design

一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞. 在 Ant Design Pro 中,因为我们底层的工具是 roadhog,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能. 二.详细 2.1.使用 roadhog 的请求代理功能 在通过配置 .roa

一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是纯粹的数据流,用作状态管理 使用React技术栈管理大型复杂的应用往往要使用Redux来管理应用的状态,然而随着深度使用,Redux也暴露出了一些问题.dva 是一种改良Redux的架构方案,是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装

ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的,遇到不常用的,学会查文档就可以了 因为ant design很强大,阿里有些大神就直接将ant design继续向上封装成一个完整的项目,这就是ant design pro,注意ant design pro已经是一个成形的项目,配置环境已经好了,我们做项目只需要在其上进行增删改就可以了,其就是个脚手架

ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以下简称Adp)打包成桌面安装使用,因为我的项目是一个企业业务计算系统,并不会常有需求的更新,因此打包成桌面应用,用户体验更好. 首先,Adp项目和Electron打包分开,就是不要把两者的依赖和配置文件放在一个项目里,这是保持项目的纯粹性,各自专注自己的事情.因此,我们就需要一个Adp项目,一个Elect

一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难点给阻塞住,从而保证项目进度. 在 Ant Design Pro 中我们已经有了一套比较完善的 mock 功能,而 roadhog-api-doc 工具,则能够从项目的 mock 数据中读取接口信息生成对应的文档,这样就能够更加清晰明了的展现项目的接口情况. 效果如下:Pro API Docs. 二

一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run build 由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build,构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js.***.css.index.

一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟数据的开发模式, 通过 Restful API 的形式和任何技术栈的服务端应用一起工作.下面将简单介绍和服务端交互的基本写法. 二.详细介绍 2.1.前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的

一.概述 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. 下面

脚手架搭建 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

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

ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant-design/ant-design-pro Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』

[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/index-cn 该套模板是使用了React开发框架作为基础,AntDesign(蚂蚁金服开源UI组件库)作为UI库,集成了Dva,Umi,Mock等库,如果不是很了解这些内容,门槛还是比较高的,下面我们梳理一下从零开始运行起来这个项目的过程. [准备环境] node js 安装最新版即可 我的node

首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 开箱即用的中台前端/设计解决方案,没有用过的小伙伴先撸一遍文档.基于React,需要一定的基础. 2. Ant Design 配套组件,另外Antd还设计了超级组件 ProComponents,看着有点麻烦,不过我猜用起来应该很爽. 3. v5是预览版默认ts,目前不可选js版本.前端ts是一个趋势

最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速上手写逻辑. 前端框架选用了 Ant Design Pro V5,前端已经很多很多年没有写过了,边学习边实践吧. Password 模式 建议采用 authorization_code 的方式.github 有一些开源的 oidc 库, 方便前端使用.Oidc 方式有时间会写一下. Abp 可以通过

本篇文章主要包含的内容有三个方面. 第一.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源码下载地址为:

一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提供了如下功能: pro new 新建一个脚手架,会自动将最新的 Ant Design Pro 脚手架下载到本地并安装 pro generate 新建一个模板,包含 model.service.page.component 二.使用过程 2.1.如何使用 使用 npm 安装到本地 npm instal

一.概述 原文地址: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 组件的表现.我们