精华内容
下载资源
问答
  • 虽然按照antd pro/umi官网构建的项目, 执行添加模块操作时: $ umi block add EmptyPage 或 $ umi block add https://github.com/umijs/umi-blocks/tree/master/demo 报出异常类似: × error AssertionError [ERR...
  • antdPro-源码

    2021-02-25 06:26:57
    该项目是通过。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误。... 在交互式监视模式下启动...
  • StandAdmin is CRUD framework work perfectly with Antd Pro. 标准 CRUD 选取控件 多实例 批量操作 异形列表 异形查询 记录复制 多编辑 关联展开 新建初始值 数据转换-新建/编辑 数据转换-查询
  • Ant Design Pro提供了一些有用的脚本,可帮助您快速启动和构建Web项目,代码样式检查和测试。 package.json提供的脚本。 修改或添加其他脚本是安全的: 开始项目 npm start 建立项目 npm run build 检查代码样式 ...
  • 基于antd pro开发的 后台管理系统框架实例 antd pro 基于dva开发 首先要学习 dva,学习dva之前 要了解ES6的基本语法, 此教程较为全面,比较适合入门 prettier gitcommit 时检查 用 husky 和 lint-staged 构建代码...
  • microAppMain antd pro of vue + qiankun,子应用请参考 账号:admin/admin 安装依赖 npm install 开发模式运行 npm run serve 编译项目 npm run build Lints and fixes files npm run lint
  • 由于业务上有多页签需求,网上找了一圈,都是基于antd pro的模板,太重了,不喜欢:unamused_face:。 于是自己从以前的框架上改造,搭了这么一个精简版框架,用得也舒服,原创:zany_face:。 特性 :triangular_ruler::...
  • ant-design-vue-pro 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 整理和修复文件 npm run lint 自定义配置 请参阅。
  • English || | | 蚂蚁设计专业版 适用于企业应用程序的即用... 宣布Ant Design Pro 2.0.0 翻译招聘 :loudspeaker: 我们需要您的帮助: https : //github.com/ant-design/ant-design-pro/issues/120 特征 :gem_stone:
  • antd】蚂蚁金服前端框架antd pro点击气泡时报错时: 1.使用_NodeJS 14.4.0版本 2.下载node.zip并替换NodeJs文件夹中的node.exe
  • react中后台管理系统开发模板-antd-pro
  • restful前一级分离架构前端:基于ant design pro的Reacr web相关文章: 最初:基于hapijs的rest api服务器相关文章: 截图 用户列表编辑用户增加用户 查询用户删除用户 登录和验证 登录是采取令牌验证的方式 登录的...
  • antd pro路由

    2021-10-25 16:56:17
    antd design pro vue 的路由有两种方式 一种是前端定义好路由routes,由后端返回roles进行过滤 ; 另一种是后端返回 routes 列表 生成menu。 一、先看第一种方式前端定义好路由routes,由后端返回roles进行过滤 ...

    antd design pro vue 的路由有两种方式 一种是前端定义好路由routes,由后端返回roles进行过滤 ; 另一种是后端返回 routes 列表 生成menu。

    一、先看第一种方式 前端定义好路由routes,由后端返回roles进行过滤 

    1、在src/permission.js 路由守卫 首先在派发一个GetInfo的action  调取getinfo()方法 调后台的 用户接口  返回用户信息和roles用户权限

       在src/store/modules/user.js中 

    // 获取用户信息
        GetInfo ({ commit }) {
          return new Promise((resolve, reject) => {
            getInfo().then(response => {
              const result = response.result
    
              if (result.role && result.role.permissions.length > 0) {
                const role = result.role
                role.permissions = result.role.permissions
                role.permissions.map(per => {
                  if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
                    const action = per.actionEntitySet.map(action => { return action.action })
                    per.actionList = action
                  }
                })
                role.permissionList = role.permissions.map(permission => { return permission.permissionId })
                commit('SET_ROLES', result.role)
                commit('SET_INFO', result)
              } else {
                reject(new Error('getInfo: roles must be a non-null array !'))
              }
    
              // commit('SET_ROLES', result.role)
              // commit('SET_INFO', result)
              commit('SET_NAME', { name: result.name, welcome: welcome() })
              commit('SET_AVATAR', result.avatar)
    
              resolve(response)
            }).catch(error => {
              reject(error)
            })
          })
        },

    通过  role.permissionList = role.permissions.map(permission => { return permission.permissionId })

    把返回的权限role的permisssionList字段中 并将roles存储到vuex中
    然后继续看在src/permission.js 派发GenerateRoutes action 将 getinfo()的返回 作为 commit参数 传递给 GenerateRoutes
    这里注意 在antd pro vue 中 是分成两种路由方式的 默认用第一种前端写死路由方式  所以 在src/store/index.js 注释掉 代码如下
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import app from './modules/app'
    import user from './modules/user'
    
    // default router permission control
    import permission from './modules/permission'
    
    // dynamic router permission control (Experimental)
    // import permission from './modules/async-router'
    import getters from './getters'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      modules: {
        app,
        user,
        permission
      },
      state: {
    
      },
      mutations: {
    
      },
      actions: {
    
      },
      getters
    })
    

     然后重点看这个src/strore/modules/permission.js

    const permission = {
      state: {
        routers: constantRouterMap,
        addRouters: []
      },
      mutations: {
        SET_ROUTERS: (state, routers) => {
          state.addRouters = routers
          state.routers = constantRouterMap.concat(routers)
        }
      },
      actions: {
        GenerateRoutes ({ commit }, data) {
          return new Promise(resolve => {
            const { roles } = data
    		console.log('routerdata', data)
            const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
            commit('SET_ROUTERS', accessedRouters)
            resolve()
          })
        }
      }
    }
    
    export default permission
    

    依赖这个方法  参数为 asyncRouterMap 为 src/config/router.config.js 前端写死的路由表

     通过过滤 asyncRouterMap  那route对象里meta的permission字段判断是否包含permissionList数组中 的任何一项

    最后将静态路由合并到一起写到vuex中

    二、第二种方式 服务端返回routes列表 前端组装成menu树

    1、首先 找到src/store/index.js 
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import app from './modules/app'
    import user from './modules/user'
    
    // default router permission control
    // import permission from './modules/permission'
    
    // dynamic router permission control (Experimental)
    import permission from './modules/async-router'
    import getters from './getters'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      modules: {
        app,
        user,
        permission
      },
      state: {
    
      },
      mutations: {
    
      },
      actions: {
    
      },
      getters
    })
    

     2、还是找到src/permission.js

      派发的GenerateRoutes   commit 传token 

    const permission = {
      state: {
        routers: constantRouterMap,
        addRouters: []
      },
      mutations: {
        SET_ROUTERS: (state, routers) => {
          state.addRouters = routers
          state.routers = constantRouterMap.concat(routers)
        }
      },
      actions: {
        GenerateRoutes ({ commit }, data) {
          return new Promise(resolve => {
            const { token } = data
            generatorDynamicRouter(token).then(routers => {
              commit('SET_ROUTERS', routers)
              resolve()
            })
          })
        }
      }
    }
    
    export default permission

    在src/router/generator-routers

    /**
     * 动态生成菜单
     * @param token
     * @returns {Promise<Router>}
     */
    export const generatorDynamicRouter = (token) => {
      return new Promise((resolve, reject) => {
        loginService.getCurrentUserNav(token).then(res => {
          const { result } = res
          const menuNav = []
          const childrenNav = []
          //      后端数据, 根级树数组,  根级 PID
          listToTree(result, childrenNav, 0)
          console.log('childrenNav3333',childrenNav)
          rootRouter.children = childrenNav
          menuNav.push(rootRouter)
          console.log('menuNav', menuNav)
          const routers = generator(menuNav)
          routers.push(notFoundRouter)
          console.log('routers', routers)
          resolve(routers)
        }).catch(err => {
          reject(err)
        })
      })
    }

     通过listTotree动态生成menu

    /**
     * 数组转树形结构
     * @param list 源数组
     * @param tree 树
     * @param parentId 父ID
     */
    const listToTree = (list, tree, parentId) => {
      list.forEach(item => {
        // 判断是否为父级菜单
        if (item.parentId === parentId) {
          const child = {
            ...item,
            key: item.key || item.name,
            children: []
          }
          // 迭代 list, 找到当前菜单相符合的所有子菜单
          listToTree(list, child.children, item.id)
          // 删掉不存在 children 值的属性
          if (child.children.length <= 0) {
            delete child.children
          }
          // 加入到树中
          tree.push(child)
        }
      })
    }

    展开全文
  • shubao:antdpro-源码

    2021-02-22 05:36:31
    Ant Design Pro提供了一些有用的脚本,可帮助您快速启动和构建Web项目,代码样式检查和测试。 package.json提供的脚本。 修改或添加其他脚本是安全的: 开始项目 npm start 建立项目 npm run build 检查代码样式 ...
  • 官网文档:https://beta-pro.ant.design/docs/upgrade-v5-cn initialState 使用initialState代替自带的model,global,login,setting都并入了 initialState 中。当做一个默认的model,存储的是不需要频繁修改的数据...

    官网文档:https://beta-pro.ant.design/docs/upgrade-v5-cn

    initialState

    使用initialState代替自带的model,global,login,setting 都并入了 initialState 中。当做一个默认的model,存储的是不需要频繁修改的数据

    步骤:

    • 删除 src/models/global.ts、src/models/login.ts、src/models/setting.ts
    • 把请求用户信息和登陆拦截放到 src/app.tsx 中

    Layout

    antd5中把Layout当做插件使用,在app.ts中用layout来支持运行时配置

    • footer和menu的自定义迁移到app.ts中
    • v4中对layout的配置在model里,v5放到initialState中
    • 默认配置中的 layout  属性变为   'side' | 'top' | 'mix',默认是 mix

    权限

    • 在  src/access.ts  增加相应的权限标识
    • 删除原来的权限组件: src/utils/Authorized.ts、src/utils/authority.ts、src/components/Authorized/**
    • 在 config.ts 的 router 中删除 authority,修改为 access: '***' 

    请求

    • v4项目 request 定义在 src/utils/request.ts
    •  V5 中需要用 umi 中 import ,各项配置需要写在 app.ts 中进行实现
    • V5 中自带 useRequest hooks ,很多页面并不需要数据共享,可以用 useRequest 来快速的网络请求,并且内置了 loading 和 run 来指示状态和重新请求数据,使用方式极为简单.还有其他简单便捷的ahooks可以使用

    可删除的依赖

    因为将所有的逻辑做了拆离,很多依赖都不在需要了

    • path-to-regexp - 用来处理 url 中地址与参数
    • react-helmet-async - 路由优化
    • jsdom-global
    • enzyme - 用于react的js测试工具
    • chalk - 给输出添加颜色和背景
    • checkFiles - 检查文件

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 【React】antdpro开发指南

    千次阅读 2020-11-20 15:29:51
    antdpro用起来有一定学习成本,所以需要梳理一下。 快速上手 npx create-umi your-project 选择最新v5,antd4 启动 npm run start 即可看见页面。 登录页默认用户名密码是admin ant.design 。输入进去即可...

    前言

    • 后台管理系统用的非常多,如果比较复杂点的后台可能会多人开发,这时候可能导致各种样式不统一之类的问题。
    • antdpro用起来有一定学习成本,所以需要梳理一下。

    快速上手

    npx create-umi your-project
    
    • 选择最新v5,antd4

    • 启动

    npm run start
    
    • 即可看见页面。
    • 登录页默认用户名密码是admin ant.design 。输入进去即可进入后台。
    • 进入后右下角有个米饭一样的图标,那个就是umi-ui,可以非常方便的导入代码或者模板进行修改。
    • 注意!尽量别用umi-ui导入模板,容易引起各种问题。而且是一个不可逆的过程!同时,很多模板没有人维护,使用的是老的api或者写法,也容易导致各种bug!
    • 读者可以玩一下,这玩意就是我最初学前端非常想要的功能。不仅仅是复制代码,包括路由什么的都整好了。

    概念

    • 使用antdpro,首先默认你已经会了react dva ts umi antd(里面很多组件和antd关系比较大,没熟练用过antd的要花更多时间上手)

    配置

    • config文件夹下3个文件,相当于原umirc的配置:
    • 路由参考:https://beta-pro.ant.design/docs/layout-cn
    • defaultSettings主要用来配置主题
    • proxy主要就是devserver的代理。
    • antdpro整了react环境变量,你可以看见在proxy里分别配了3个环境,当然都是开发环境,对应着3个start脚本。

    主题

    • 优先使用官方提供的工具先看一下哪种主题好:https://preview.pro.ant.design/dashboard/analysis/
    • 然后复制粘贴到defaultSettings中。
    • 当然你也可以在自己的站点里使用它,需要将PageContainer, SettingDrawer, ProSettings从pro-layout里导出后自己实现。
    • 具体参考:https://pro.ant.design/blog/new-pro-use-cn#settingdrawer

    布局

    • 一般小项目不会用这玩意的,如果用了antdpro可能对样式什么的有需求,所以antdpro还整了个可视化配置样式插件。
    • 这个也是为啥在antd的基础上封了个proxxx组件,而且这些组件把常用的逻辑都写差不多了,只要修改对应的地方就行了,没人用的主要原因就是又大又重,他们称之为重型组件,有些地方想定制比较难下手,还是需要把所有代码以及配置都搞懂。
    • 参考官网:https://procomponents.ant.design/components/

    请求

    • 里面的很多loading都是使用umihook的useRequest:
    import React from 'react';
    import { useRequest } from 'umi';
    import services from '@/services/afs2demo';
    
    const YourComponent: React.FC = () => {
      const { data, loading } = useRequest(() => {
        return services.AccountController.addAccount();
      });
      if (loading) {
        return <>Loading...</>;
      }
      return <div>{data?.name}</div>;
    };
    
    export default YourComponent;
    
    • 这样避免写太多loading,同时可以配合table使用。useRequest的参数的函数的返回值是一个promise,一般是每个页面的serverice.ts下定义的请求:
    import { request } from 'umi';
    import { TableListParams, TableListItem } from './data.d';
    
    export async function queryRule(params?: TableListParams) {
      return request('/api/rule', {
        params,
      });
    }
    
    • umi-request在app.tsx下有个errorHandler已经写好了个异常处理。
    • 中间件处理需要加上配置:
    export const request = {
      middlewares: [
        async function middlewareA(ctx, next) {
          console.log('A before');
          await next();
          console.log('A after');
        },
        async function middlewareB(ctx, next) {
          console.log('B before');
          await next();
          console.log('B after');
        }
      ]
    }
    
    • 拦截器处理也是一样:
    requestInterceptors?: RequestInterceptor[];
      responseInterceptors?: ResponseInterceptor[];
    

    MOCK

    • 约定mock文件夹下的为mock数据,具体可以参考:https://umijs.org/zh-CN/docs/mock
    • 如果你不想用mock,可以配置关闭:
    export default {
      mock: false,
    };
    
    • 或者使用命令不开:
    MOCK=none umi dev
    

    数据流

    • antdpro5中使用了新的数据流可以代替dva,这样在纯hooks组件下更加轻量好理解,也容易方便管理并且没有学习成本。
    • 这个是通过plugin-model实现的功能,约定model下的文件为一个id,然后就像使用自定义hook一样使用它,但是这个状态是全局的,另外状态更新各个组件都可以更新 。
    • dva学习成本还是略高的,就算你学会了,别人不一定能很快学会,而这个就不一样了。
    • 初始数据:
    export async function getInitialState() {
      return {
        userName: 'xxx',
      };
    }
    
    • app中有个getInitialState方法用来做全局的初始数据,依靠 @umijs/plugin-initial-state插件完成。
    • 同样,这个也是个model,只是它自带的:
    import React from 'react';
    
    import { useModel } from 'umi';
    import { Spin } from 'antd';
    
    export default () => {
      const { initialState, loading, refresh, setInitialState } = useModel('@@initialState');
    
      if (loading) {
        return <Spin />;
      }
    
      return <div>{initialState.userName}</div>;
    };
    

    DVA

    • 5版本的model同样也支持dva,这是因为plugin-dva的获取文件后对导出进行了校验。
    /* eslint-disable no-param-reassign */
    import { Effect, ImmerReducer, Subscription } from 'umi';
    
    export interface IndexModelState {
      name: string;
    }
    export interface IndexModelType {
      namespace: 'index';
      state: IndexModelState;
      effects: {
        query: Effect;
      };
      reducers: {
        save: ImmerReducer<IndexModelState>;
      };
      subscriptions: { setup: Subscription };
    }
    const IndexModel: IndexModelType = {
      namespace: 'index',
      state: {
        name: '',
      },
      effects: {
        *query({ payload }, { put }) {
          yield put({
            type: 'save',
            payload,
          });
        },
      },
      reducers: {
        save(state, action) {
          state.name = action.payload;
        },
      },
      subscriptions: {
        setup({ dispatch, history }) {
          return history.listen(({ pathname }) => {
            if (pathname === '/testdemo') {
              dispatch({
                type: 'query',
                payload: 'yehuozhili',
              });
            }
          });
        },
      },
    };
    export default IndexModel;
    
    • 页面中使用需要connect后props获取:
    import React, { FC } from 'react';
    import { IndexModelState, ConnectProps, Loading, connect } from 'umi';
    
    interface PageProps extends ConnectProps {
      index: IndexModelState;
      loading: boolean;
    }
    const IndexPage: FC<PageProps> = ({ index, dispatch, loading }) => {
      const { name } = index;
      return <div>Hello {name}</div>;
    };
    export default connect(({ index, loading }: { index: IndexModelState; loading: Loading }) => ({
      index,
      loading: loading.models.index,
    }))(IndexPage);
    

    权限

    • 权限参考资料:https://beta-pro.ant.design/docs/authority-management-cn
    • 权限实质就是个高阶组件,思想有点类似于守卫的意思,src下有个access的文件,里面设置了权限以及判定。具体可以根据业务需要来,主要就是业务返回某个权限值,然后基于权限值判断:
    // src/access.ts
    export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) {
      const { currentUser } = initialState || {};
      return {
        canAdmin: currentUser && currentUser.access === 'admin',
        canGuset: currentUser && currentUser.access === 'guest',
      };
    }
    
    • 比如我加一个canGuest表明某个页面只能由guest进行访问。
    • 在mock文件夹里模拟着返回值,其中有句:
    'POST /api/login/account': (req: Request, res: Response) => {
        const { password, username, type } = req.body;
        if (password === 'ant.design' && username === 'admin') {
          res.send({
            status: 'ok',
            type,
            currentAuthority: 'admin',
          });
          access = 'admin';
          return;
        }
        if (password === 'ant.design' && username === 'user') {
          res.send({
            status: 'ok',
            type,
            currentAuthority: 'user',
          });
          access = 'user';
          return;
        }
        if (type === 'mobile') {
          res.send({
            status: 'ok',
            type,
            currentAuthority: 'admin',
          });
          return;
        }
    
    • 也就是以admin登录,是admin权限。
    • 可以试着在路由配置中对权限进行控制:
    {
          name: 'test',
          icon: 'smile',
          path: '/testdemo',
          access: 'canGuset',
          component: './testdemo',
        },
    
    • 此时,以admin身份登录/testdemo则会出现401页面。
    • 将mock文件的那句改为guest再次访问,即可出现想要的页面。
    • 组件中使用:
     const access = useAccess();
    
    • 即可拿到access.ts所定义的权限。

    国际化

    • 国际化参考文档:
    • https://beta-pro.ant.design/docs/i18n-cn
    • https://umijs.org/zh-CN/plugins/plugin-locale#%E4%BB%8B%E7%BB%8D
    • 约定 在 src/locales 中引入 相应的 js,例如 en-US.ts 和 zh-CN.ts,并且在 config/config.ts 中做如下配置:
    plugins:[
      ...,
      locale: {
        enable: true,
        default: 'zh-CN',
        baseNavigator: true,
      },
      ...,
    ]
    
    • 它使用的是react-intl :https://formatjs.io/docs/getting-started/installation/
    • 这个库有很多高级功能,比如动态导入什么的,所以还是比较大的。
    • layout中若设置了国际化,默认配置的route的name就是国际化的key值。
    • 如果你写了对应的zh-CN.ts,默认会

    重型组件PRO

    • 了解了上面的设定,基本可以玩了,下面还需要了解antdpro特有的重型组件,来使得样式保持统一。

    ProLayout - 高级布局

    • prolayout是高级布局,是一开始就自带的。
    • 可以通过context拿到布局上下文:
    import { RouteContext, RouteContextType } from '@ant-design/pro-layout';
    const Page = () => (
      <RouteContext.Consumer>
        {(value: RouteContextType) => {
          return value.title;
        }}
      </RouteContext.Consumer>
    );
    
    • routerContext里面还有个很常用的就是isMobile,如果需要对手机端支持,拿此参数判断。
    • plugin-layout将layout的代码写入.umi,所以用户可以完全不用管路由,我个人觉得这玩意相当好。其实确实这东西不需要怎么自定义。如果想自定义的可以关掉layout,手动引入ProLayout或者自己写layout。
    • https://procomponents.ant.design/components/layout#api
    • PageContainer是一个壳,它可以显示嵌入页面的底色,也可以显示白色,另外提供面包屑功能,这个面包屑,1级菜单是不显示的,如果想显示,需要修改app.tsx。

    ProTable - 高级表格

    • https://procomponents.ant.design/components/table
    • 这玩意配置项太多,因为不只是表格,会带着别的东西,所以还需要耐下心来先挑选满足自己要求的表格,然后自定义的地方再仔细看配置。

    ProForm - 高级表单

    • https://procomponents.ant.design/components/form
    • 这个主要是登录注册,或者是让用户填表单的地方,同样是一个组件一个页面。

    ProCard - 高级卡片

    • https://procomponents.ant.design/components/card
    • 如果你想让padding固定,有个比较美观的样式,那就需要使用它。
    • 卡片不仅仅是那种小的,它可以去承载别的之类。在一开始布局时可以调整好。

    ProDescriptions - 高级定义列表

    • 这玩意是按固定格式的白板,类似于antd的descriptions
    • https://procomponents.ant.design/components/descriptions

    ProList - 高级列表

    • 这组件是自带padding的,需要列表时可以使用。
    • https://procomponents.ant.design/components/list
    展开全文
  • antd Pro 系列之初识antd Pro

    千次阅读 2019-12-30 15:49:46
    初识antd Pro 原因 一只后端猿接到了一个全栈的活,要开发一个完整的独立平台。前端只会html,但又想把前端做的很漂亮,怎么办? 网上冲浪找办法 发现一基于react的开源的前端框架。 antd pro,前身好像是antd。这只...

    初识antd Pro

    原因

    一只后端猿接到了一个全栈的活,要开发一个完整的独立平台。前端只会html,但又想把前端做的很漂亮,怎么办?

    网上冲浪找办法

    发现一基于react的开源的前端框架。 antd pro,前身好像是antd。这只后端猿一下就被这高级的界面所吸引,差点惊呼一声一给我哩giao~,咳咳咳。

    想用不会怎么办 - 文档走起

    不得不说,antd Pro的文档,是相当的简洁啊,对这种只会html和js只会发请求的后端猿及其不友好啊。但是不友好咱也得用啊,文档看特喵的吧。

    文档链接:antd Pro

    第一步 安装环境

    • 安装node.js 安装方法:百度
    • 安装git 安装方法:百度
    • 安装yarn 安装方法:百度

    第二步 获得代码

    • 新建一个空的文件夹作为项目目录,并在目录下执行
    yarn create umi
    
    • 选择ant-design-pro
    • 选择 js/ts (ts玩不转 这只后端猿选的js)
    • 还可以git clone 直接下拉代码。地址:https://github.com/ant-design/ant-design-pro

    第三步 在本地跑起来

    • 安装依赖(等几首歌的时间)
    npm install
    
    • 激动人心的时刻 - 启动
    npm start
    

    看看这高级的界面

    图面呐~ 快留言作者,看不到图片了

    后续用法 - 持续更新中… …

    下一篇:antd Pro系列之 目录结构

    展开全文
  • antd pro v5

    千次阅读 2020-10-16 16:03:01
    antd pro v5 关于网络请求和路由设置相关 网络请求 antd在前段时间发布了v5版本,已经支持预览了,大家可以通过链接v5预览。 看完文档再对比v4,我个人感觉v5精简了不少,首先是弱化了dva,加强了hooks的使用,在...
  • Antd Pro的权限组件

    2021-01-12 04:36:40
    前端其实是很难有权限验证的,因为从安全的角度来说,前端没有绝对的安全,攻击者总是可以修改前端的代码。对于 API 的权限可以由服务端保证,但是对于页面的权限可能就比较麻烦了。...Antd Pro 权限路由这一块算...
  • antdpro代码分析

    2021-09-24 10:14:01
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示:这里可以添加本文要记录的... 总结 这个antdpro的登录逻辑
  • 2.1 antd pro介绍 2.2 antd pro安装 2.3 andt pro 项目目录介绍 2.4 函数式组件的扩展 2.4.1 函数式组件的state, 用React.useState() 2.4.2 函数式组件的props 2.4.3 函数式组件的ref,用React.useRef 2.4.4 ...
  • 在本项目中以 ant design pro 项目为测试项目,测试工具最终选型为 jest javascript的常用测试框架 enzyme 支持react的jest测试库 react-test-renderer 快照测试的常用测试库 puppeteer “布偶人” – E2E测试...
  • antdPro之路由菜单配置

    千次阅读 2021-04-23 10:05:36
    antdPro使用之路由前言配置案例最后 前言 antdPro v5 的router主要使用了umijs v2的路由routes 以及@umijs/plugin-layout,总的来说,非常好用。在快速搭建项目的过程中,我们不需要去关注菜单和面包屑等功能的细节...
  • antd pro 配置

    2021-01-13 10:34:35
    antd pro 安装连接 自动生成接口 跟目录创建api.js 对应公司swagger接口文档 const { codegen } = require('swagger-axios-codegen'); // const base = 'http://test.novel3d.com:8080/'; const base = '...
  • These dependencies were not found: * xml-but-prettier in ./node_modules/swagger-ui-react/swagger-ui.js * xtend in ./node_modules/property-information/lib/util/merge.js * zenscroll in ./node_modules/...
  • Antd Pro V4 权限管理详解

    千次阅读 2020-08-01 15:17:36
    Antd Pro V4 权限管理详解 在这篇文章中,你将了解到:(文末有彩蛋!!!) antd-design-pro v4 是如何在用户登录的时候,进行鉴权的 与权限管理有关的代码是如何作用的 如何实现动态菜单 + 动态路由 写这篇文章呢...
  • antd pro学习记录

    千次阅读 2019-08-21 17:38:33
    antd pro是一个后台模板,但上手之后还是有种劝退的感觉,要读懂代码还是得花点功夫。 把区块装好会自动生成路由对象,启动项目后为什么会重定向到/user/login? routes: [ { path: '/', component: '../layouts/...
  • 4 React 与 Antd Pro 如果借助react本身coding,无疑是从零开始,故这里借助Antd Pro脚手架实现 Ant Design Pro 是一套基于 React 的中后台管理控制台的脚手架,它可以帮助你快速搭建企业级中后台产品原型,出自蚂蚁...
  • AntD Pro Footer自定义

    2021-12-20 11:49:25
    import { DefaultFooter } from '@ant-design/pro-layout'; export default () => { const defaultMessage = '自定义信息' return ( <DefaultFooter copyright={`2021 ${defaultMessage}...
  • 需要修改Antd Pro标题和菜单字体的大小和样式。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,944
精华内容 2,377
关键字:

antdpro