最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pro是权限菜单,权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户,比如管理员有给用户分配不同角色的权限,那管理员就可以看到系统管理等导航菜单,而用户A只有发布某些业务的权限,那用户A就不能看到系统管理的导航菜单等等.不过这不在我们本文的考虑范围内,有兴趣的同学可以自行去看它的API:Autho

概要 antd pro 路由简介 路由, 菜单和面包屑 页面之间的路由 带参数的路由 总结 概要 路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用的全局进行管理. 同时, 它的路由还和菜单和面包屑自动关联上了, 真的是给开发节省了大量的时间. antd pro 路由简介 首先创建一个 antd pro 的项目, 创建方法很简单, 参见 antd pro 的文档 antd pro 的路由配置文件在项目根目录下的 config 文件夹中: /co

概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表格操作信息(蓝色框内) 概述 如果用 react 开发前端, 建议基于 antd pro 来开发, antd pro 是 antd 的增强版, antd 是组件库, antd pro 则是前端框架, 基于 antd pro, 创建工程时不用再考虑: 路由的设置, 以及和菜单的联动 面包屑和路由的联动

前言 在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段.这里假定我们已经了解了react,redux和dva/umi相关的知识.并有做过相关练习. 如果还不了解以上相关的知识,建议去以下网站学习一遍,下面给出一个大概学习的路线吧. html/css/js 这里推荐大家去w3cschool稍作了解,不过看本篇文章的同学肯定都是有一定基础的.那么就当做巩固好了. es6 这里我没有系统看过教程,我是在一本叫做react学习手册的书上面看到的.这里还是放一

antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步 在dva中主要分为3层 services  models  components models层用于存放数据以及对数据进行操作,services层调用请求后台接口的方法,components层用于书写页面逻辑代码 services层 import request from '@/utils/request'; export async function doit(payload) { const {id}

1.前言 最近学习reactjs ,前些年用RN开发过移动端,入门还算轻松.现在打算使用 Antd Pro 实现前后端分离.要使用Antd Pro这个脚手架,必须熟悉 umi.dva.redux-saga 等相关知识. 基础知识及目录结构可以先看官方文档 : https://pro.ant.design/docs/getting-started-cn 官方介绍: Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 [Ant Design](http://ant.desi

Ant Design Pro 路由传值 了解Ant Design Pro组件间通讯原理的小伙伴肯定都知道,两个页面之间可以通过Models进行传值,在以往的传值过程中,我都是直接将需要的值直接一股脑的传给两一个界面: // 修改影像 handelUpdate = obj => { const { dispatch } = this.props; dispatch({ type: 'video/editDetail', payload: { id: obj.id, title: obj.title

概述 示例代码 列表页面 form 页面 model.js service.js 总结 概述 项目中经常会遇到在表格中展示图片的需求(比如展示用户信息时, 有一列是用户的头像). antd pro table 的功能很强大, 对于常规的信息展示只需参照示例配置 column 就可以了. 但是对于文件(比如图片) 在表格中的展示, 介绍并不多. 下面通过示例来演示 antd pro table 中图片的上传和展示. 示例代码 前端主要包含如下 2 部分: 列表页面: 通过 antd pro tab

概要 通用元素 修改的方式 主页面 标签上的图标 logo 和 系统名称 footer 的配置 loading 页面 最终效果 概要 使用 Antd Pro 来开发前端项目时, 生成的项目模板中, 一些基本的元素都是和 Antd Pro 项目相关的. 比如, 系统 title, 图标, logo, footer 等等. 这些基本的元素在实际的项目都需要替换. Antd Pro 由于大部分元素都基于配置, 想要替换这些通用的元素并不是那么直观, 这里把替换这些通用元素的方法做个总结. 通用元素 通

添加图片 这两种都可以 form表单问题 1 @Form.create() 这是绑定表单和组件,必须有,这样就能从this.props 中找到Form了 2 Select 要写initialValue 而且写在getFieldDecorator中 //处理请求失败问题: 加入请求失败了,就return出去,尽量在页面中处理失败逻辑,这个models里面只负责请求,更新数据,其他逻辑不应该在这判断 /// refs 这里是设置refs 和获取refs input 的值:

删除package.json 里 " pre-commit": "npm run lint-staged" 这个对象就可以.

概要 示例 后端 前端 直接显示图片 提供下载链接, 点击后下载 文件导出, 前端没有显示下载链接的位置 概要 前端上传文件的例子很多, 但是下载相关的例子不多, 主要是因为下载本身比较简单. 但是这次做了个文件导出功能, 接收文件流的时候弄了很长时间也没有成功, 就因为请求中缺了个配置- 示例 后端 后端比较简单, 不管有多少需要计算的业务, 最终只是返回文件流. 下面的示例是通过 golang gin 框架实现的. 1 package main 2 3 import ( 4 "strconv

loading为dva的插件,全局可用,它里面维护了一些布尔值,用于控制loading动画效果的显示与隐藏,通过@connect()来注入使用 官网介绍如下: https://dvajs.com/ 在AntD Pro里,官方示例了一些用法: @connect(({ list, loading }) => ({ list, loading: loading.models.list, })) class CardList extends PureComponent { ... } @connect(

1.控制反转(Inversion of Control)是一种「思想」,依赖注入(Dependency Injection)则是这一思想的一种具体「实现方式」 2.react 要注意全局 id相同 3.Component series.scatter not exists. Load it first. 是echart的引入问题,另外,dom 必须要指定  style={{ width: 400, height: 400 }} 4.因为框架总是会引入很多概念,框架文档,应该是最好的概念说明书 5

https://pro.ant.design/docs/authority-management-cn ant-design-pro 1.0.0 V4 最近需要项目需要用扫码登录,因此就使用antd pro提供的鉴权能力来做 Authorized.ts 提供初始化路由组件和重载路由的函数 import RenderAuthorize from '@/components/Authorized'; import { getAuthority } from './authority'; /* esl

ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的,遇到不常用的,学会查文档就可以了 因为ant design很强大,阿里有些大神就直接将ant design继续向上封装成一个完整的项目,这就是ant design pro,注意ant design 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

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

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

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

next 服务端渲染 实际上,next 一直都是执行的服务端渲染.npm start执行的是 next 自带的服务器来运行你的应用.next 是支持自定义服务器的,同时能够支持现有的路由和模式,你可以在此基础上添加一些自己的需求. 新建/server.js const express = require("express"); const next = require("next"); const dev = process.env.NODE_ENV !== &qu