精华内容
下载资源
问答
  • 2021-08-03 13:08:22

    后台管理系统用的非常多,如果比较复杂点的后台可能会多人开发,这时候可能导致各种样式不统一之类的问题。
    antdpro用起来有一定学习成本,所以需要梳理一下。
    快速上手
    npx create-umi your-project
    1
    选择最新v5,antd4

    启动

    npm run start
    1
    即可看见页面。
    登录页默认用户名密码是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;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    这样避免写太多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,
      });
    }
    1
    2
    3
    4
    5
    6
    7
    8
    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');
        }
      ]
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    拦截器处理也是一样:
    requestInterceptors?: RequestInterceptor[];
      responseInterceptors?: ResponseInterceptor[];
    1
    2
    MOCK
    约定mock文件夹下的为mock数据,具体可以参考:https://umijs.org/zh-CN/docs/mock
    如果你不想用mock,可以配置关闭:
    export default {
      mock: false,
    };
    1
    2
    3
    或者使用命令不开:
    MOCK=none umi dev
    1
    数据流
    antdpro5中使用了新的数据流可以代替dva,这样在纯hooks组件下更加轻量好理解,也容易方便管理并且没有学习成本。
    这个是通过plugin-model实现的功能,约定model下的文件为一个id,然后就像使用自定义hook一样使用它,但是这个状态是全局的,另外状态更新各个组件都可以更新 。
    dva学习成本还是略高的,就算你学会了,别人不一定能很快学会,而这个就不一样了。
    初始数据:
    export async function getInitialState() {
      return {
        userName: 'xxx',
      };
    }
    1
    2
    3
    4
    5
    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>;
    };
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    页面中使用需要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);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    权限
    权限参考资料: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',
      };
    }
    1
    2
    3
    4
    5
    6
    7
    8
    比如我加一个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;
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    也就是以admin登录,是admin权限。
    可以试着在路由配置中对权限进行控制:
    {
          name: 'test',
          icon: 'smile',
          path: '/testdemo',
          access: 'canGuset',
          component: './testdemo',
        },
    1
    2
    3
    4
    5
    6
    7
    此时,以admin身份登录/testdemo则会出现401页面。
    将mock文件的那句改为guest再次访问,即可出现想要的页面。
    组件中使用:
     const access = useAccess();
    1
    即可拿到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,
      },
      ...,
    ]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    它使用的是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>
    );
    1
    2
    3
    4
    5
    6
    7
    8
    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
    ————————————————
     

    更多相关内容
  • antdPro

    2021-02-25 06:26:57
    该项目是通过。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误。... 在交互式监视模式下启动...
  • StandAdmin is CRUD framework work perfectly with Antd Pro. 标准 CRUD 选取控件 多实例 批量操作 异形列表 异形查询 记录复制 多编辑 关联展开 新建初始值 数据转换-新建/编辑 数据转换-查询
  • ant-design-vue-pro 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 虽然按照antd pro/umi官网构建的项目, 执行添加模块操作时: $ umi block add EmptyPage 或 $ umi block add https://github.com/umijs/umi-blocks/tree/master/demo 报出异常类似: × error AssertionError [ERR...
  • shubao:antdpro

    2021-02-22 05:36:31
    Ant Design Pro提供了一些有用的脚本,可帮助您快速启动和构建Web项目,代码样式检查和测试。 package.json提供的脚本。 修改或添加其他脚本是安全的: 开始项目 npm start 建立项目 npm run build 检查代码样式 ...
  • restful前一级分离架构前端:基于ant design pro的Reacr web相关文章: 最初:基于hapijs的rest api服务器相关文章: 截图 用户列表编辑用户增加用户 查询用户删除用户 登录和验证 登录是采取令牌验证的方式 登录的...
  • English || | | 蚂蚁设计专业版 适用于企业应用程序的即用... 宣布Ant Design Pro 2.0.0 翻译招聘 :loudspeaker: 我们需要您的帮助: https : //github.com/ant-design/ant-design-pro/issues/120 特征 :gem_stone:
  • 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 ...

    目录

    1. antd

    1.1 进入ant.design官网做初步了解

    1.2 安装antd

    1.3 动手实际操作

    2. ant design pro

    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 函数式组件的componentDidMount(), 用React.useEffect替代

    2.4.5 函数组件的componentWillUnmount()

    1. antd

    1.1 进入ant.design官网做初步了解

    (1)什么是antd:

    antd是基于Ant Design设计体系的React UI组件库,主要用于研发企业级中后台产品。

    React:用于动态构建用户界面的JS库,只关注于视图。由facebook开源。

    (2)一些常用组件:

    ProComponents,

    ProTable(高级,属性多,样式复杂,直接使用,提升了开发效率) 。

    (3)官网:Ant Design of React - Ant Design

    1.2 安装antd

    说在前面

     具体的操作命令,可能会随着官网的更新而更新,一切以官网的为准。

    步骤:

    (1)VScode里面创建一个antd项目:create-react-app antd

    (2)cd antd

    (3)npm install -g yarn

    (4)yarn add antd

    (5)yarn

    (6)yarn start

    说明:其实,这里的启动的页面,类似之前React其他案例。只是这里安装了antd组件库之后,在后面就可以直接使用antd的很多组件, 比如<Button > </Button>。

    1.3 动手实际操作

    试着在App.js中直接引用antd组件库的一些组件,具体组件的效果,代码,每个组件的API属性等,都可以在https://ant.design/ 页面上查找

    2. ant design pro

    2.1 antd pro介绍

    (1)antd首页下拉,找到antd pro

    (2)官网详细介绍:ProComponents

    2.2 antd pro安装

    (1)yarn create umi auto-platform (这个名称自己定义)

    (2)依次选:Ant Design Pro, Pro V4, TypeScript,  simple, antd@4

    (3)cd auto-platform

    (4)yarn

    (5)yarn start

    补充:

    (1)要先安装git然后重启,否则(2)失败

    (2)切换yarn镜像

    yarn config get registry 查看当前源

    yarn config set registry https://registry.npm.taobao.org 切换为淘宝源

    yarn config set registry https://registry.yarnpkg.com 切换为自带的

     

    2.3 andt pro 项目目录介绍

    (1)上述安装启动后,在VScode中生成一个项目目录,目录下包含很多文件。

    (2)src/pages目录:下存放很多代码,重要!!!我们编写的页面代码,也放在该目录下。

    (3)mock目录:可以做模拟接口返回,针对前后端分离的情况, package.json下有Mock信息。

    listTableList.ts

    notices.ts

    route.ts

    user.ts

    (4)config目录

    config.dev.ts

    config.ts

    defaultSettings.ts

    proxy.ts  后续前后端联调的时候,要配置后端的ip和端口等信息

    routes.ts  路由中的信息,对应到src下的具体每个页面的信息 !!!非常重要!!!

    (5)怎么加一个页面?

    首先,在config/routes.ts下加信息:

    然后,要去加一个页面,怎么加?

    去src/page/下加一个目录CreateCase, 然后new一个index.tsx, 接下来编程实现创建一个类组件或者功能组件。

    (6)补充:

    1)BEJSON网页,可以格式化校验页面的response结果:JSON在线校验格式化工具

    2)实际开发时,更多的是在封装好的组件上选择使用哪些属性,选好,拼装,然后往里面写变化的参数等。

    2.4 函数式组件的扩展

    (比如如何使用类似state...)  hooks

    2.4.1 函数式组件的state, 用React.useState()

    (1)返回的是一个数组,数组中有2个元素。

            第一个是值,是state的key, 比如count.

            第二个是函数,用来修改第一个值, 比如setCount (这俩名字都可以自己起)

    (2)括号里可以设默认值。

    (3)示例代码。

    多个变量要定义为多个const [count, setCount] = React.useState(0)。

    补:类式组件中state可以写成JSON的形式(键值对)

    函数式组件开头可以写成 const Welcome: React.FC = () => {}. 官方写法,规范使用

    function Welcome(){
             const [count, setCount] = React.useState(0)  //括号里可以设默认值0
             const [name, setName] = React.useState("Sheryl")  //初始化name
             
            const add = () => {
                   setCount(count + 1)
             }
    
             const changeName = () => {
                   setName("Lily")
             }
    
            return (
                   <div>
                       <h2> 当前数值为{count}, 名字为{name}</h2>
                       <button onClick={add}>+1</button>
                       <button onClick={changeName}>change name</button>
                    </div>
            );
    }

    2.4.2 函数式组件的 props

    其实就是函数定义时传的参数,形参

    const Welcome: React.FC = (a) => { //a就是参数,从外部传进该函数组件类似props
        .......
    }

    2.4.3 函数式组件的ref,用React.useRef

    function Welcome(){
        myRef = React.useRef()   //声明 ref
        
        show = () => {
              alert(myRef.current.value)   //通过ref获取它所对应的标签的内容
        }
        
        return (
            <div>
                <input type="text" ref={myRef} />  //用ref表示该标签
                <button onClick={show}>click</button>
            </div>
        );
    }

    补充,可以程序文件的开头引入 import React, {useState, useRef} from 'react';

    下面再引用的时候,就可以直接写 useState, useRef......

    2.4.4 函数式组件的componentDidMount(), 用React.useEffect替代

    (1)useEffect()的作用:

    第一个参数是回调函数,指明对哪些方法做监听。并不完全等同于compoenentDidMount()。

    即:页面上state发生了变更的话,会去调这个回调函数。

    (2)参数说明:

    参数1:回调函数。

    参数2:一个数组。通过设置第二个参数,来控制要监听哪些值,当这些值发生变化时,才调用这个回调函数。 当第二个参数设置为空数组时,不管页面发生了什么,都不调用回调函数(只在刷新或第一次渲染时调用)。

    (3)示例代码:

    React.useEffect(() => {
        setInterval(()=>{console.log(123)}, 1000)
    }, [ ])
    //注意这里的setCount的参数,要写成箭头函数,而不是setCount(count+1)  ,为什么呢?
    React.useEffect(() => {
        setInterval(()=>{setCount(count => count+1)}, 1000) 
    }, [ ])

    2.4.5 函数组件的componentWillUnmount()

    (1)卸载节点:

     //卸载时需要用根节点的ID
    const unmount = () => {   
            ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }       

    (2)示例代码:

    React.useEffect(() => {
        let timer = setInterval(()=>{setCount(count => count+1)}, 1000)    //声明定时器
        return () => {
            clearInterval(timer) //删除定时器
        }
    }, [ ])

    说明:

    1)删除组件时,注意别忘了先清除定时器,否则报错,组件已经卸载了,但是里面的定时器还在更新, 导致内存泄露。

    2)这个清空是在ComponentWillUnmount阶段起作用?

    答:

    展开全文
  • 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)
        }
      })
    }

    展开全文
  • 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系列之 目录结构

    展开全文
  • 文章目录一、antd3上传图片二、antd4上传文件三、使用antdPro 之前一直在使用antd上传文件,图片,从antd3到antd4再到antdPro,总结一下经验吧 一、antd3上传图片 这里用的antd的版本是"antd": "^3.25.0", import ...
  • 中进行设置,对后台的菜单进行处理,转换为antd 的格式 menuDataRender: () =>initialState?.currentUser?.menus, 关键代码2: routes.ts 一定要设置好路由和组件对应关系,不然就算获取到路由
  • AntD Pro v5记录-布局

    2021-12-15 14:02:16
    1. 屏蔽菜单展开/收缩功能:app.tsx...布局 - Ant Design Pro 3.隐藏布局 4.隐藏某一菜单及子菜单,hideInMenu: true,hideChildrenInMenu:true // routes.ts export default [ { name: 'test', path: ...
  • AntdPro之ProFormDependency

    2022-04-15 11:04:10
    通过ProFormDependency控制表单项是否显示(2)...最近一直在使用antdPro,发现ProFormDependency这个组件实现数据联动很好使用,于是记录一下: ProFormDependency 详情:https://procomponents.ant.design/com
  • 那么在antdPro创建的项目中,怎么对request请求进行统一的封装呢?实现的话大致有两种方式:方式一:是对umi的request进行简单封装,再暴露出去;在项目后续的网络请求统一都使用这个封装后并暴露出去的request方法...
  • 升级项目从antd pro 4到 antd pro 5

    千次阅读 2020-11-23 15:32:17
    官网文档:https://beta-pro.ant.design/docs/upgrade-v5-cn initialState 使用initialState代替自带的model,global,login,setting都并入了 initialState 中。当做一个默认的model,存储的是不需要频繁修改的数据...
  • 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 配置

    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 = '...
  • antd protable

    千次阅读 2022-01-17 17:42:29
    import { Col, Row, Space, Button, Input, DatePicker, Select, } from 'antd'; const { Option } = Select; const { RangePicker } = DatePicker; import { useState } from 'react'; import ProTable from '@ant...
  • antd pro v5

    千次阅读 2020-10-16 16:03:01
    antd pro v5 关于网络请求和路由设置相关 网络请求 antd在前段时间发布了v5版本,已经支持预览了,大家可以通过链接v5预览。 看完文档再对比v4,我个人感觉v5精简了不少,首先是弱化了dva,加强了hooks的使用,在...
  • Antd Pro使用笔记 初始化一个antd pro项目 【TIPS】可下载一个simple版本,一个complexe版本以供对照使用 熟悉一下antd pro使用了哪些东西 React + umiJS(可插拔应用框架)+ Ant Design(UI库) + DVA(类似于redux...
  • Antd Pro的权限组件

    2021-01-12 04:36:40
    前端其实是很难有权限验证的,因为从安全的角度来说,前端没有绝对的安全,攻击者总是可以修改前端的代码。对于 API 的权限可以由服务端保证,但是对于页面的权限可能就比较麻烦了。...Antd Pro 权限路由这一块算...
  • 大家好,我是极智视界。本文介绍一下 antd pro 页面基础属性修改方法,包括用户名、用户名logo、脚注等。
  • 多标签页很多公司的后台管理系统都会有这个需求,之前用vue一般架子也是带的,现在公司用了antd pro ,看了下官方不支持,确实会影响性能,但是架不住需求。 背景 先看下远古截图: ...
  • // 列表 搜索项 默认值 useEffect(() => { formRef.current?.setFieldsValue({ queryMonth: moment().format('YYYY-MM') }); formRef.current?.submit();...colums类型日期月份valueType:'dateMonth' ...
  • 使用版本:antd pro v4(v5思路也是这个,本来先做v5的路由鉴权再做v4的,只是v4做的更好,就拿上来了讲了) 场景:菜单是从后台来的,后台可根据角色返回各自的菜单,但前端通过url还是能进无权限的页面,所以前端...
  • rowKey="key",这个key不能改变,改成rowKey,就报:Each child in a list should have a unique "key
  • react中后台管理系统开发模板-antd-pro

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,458
精华内容 2,583
关键字:

antd pro

友情链接: VC98_mini.zip