首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

DESIGN_pro.antd.design

作者：Because_of_you龙 | 来源：互联网 | 2023-09-23 19:26
有关react的ui组建antd.design新推出的pro版本，最近用到了路由方面。common与routes;首先需要在menu.js里

有关react的ui组建antd.design新推出的pro版本，最近用到了路由方面。

common与routes;

首先需要在menu.js里面配置：


{

name: ‘精品‘,

icon: ‘dashboard‘,

path: ‘finequality‘,

children: [

{

name: ‘精品vue‘,

path: ‘finevue‘,

},

{

name: ‘精品react‘,

path: ‘finereact‘,

},

{

name: ‘精品angular‘,

path: ‘fineangular‘,

// hideInBreadcrumb: true,

// hideInMenu: true,

},

],

},

{

name: ‘首页‘,

icon: ‘dashboard‘,

path: ‘homepage‘,

children: [

{

name: ‘首页1‘,

path: ‘onepage‘,

},

],

},

{

name: ‘任务管理‘,

icon: ‘dashboard‘,

path: ‘task‘,

children: [

{

name: ‘任务1‘,

path: ‘administration_1‘,

},

{

name: ‘任务2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘数据管理‘,

icon: ‘dashboard‘,

path: ‘data‘,

children: [

{

name: ‘数据管理1‘,

path: ‘administration_1‘,

},

{

name: ‘数据管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘模板管理‘,

icon: ‘dashboard‘,

path: ‘template‘,

children: [

{

name: ‘数据管理1‘,

path: ‘administration_1‘,

},

{

name: ‘数据管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘数据源管理‘,

icon: ‘dashboard‘,

path: ‘datasource‘,

children: [

{

name: ‘数据管理1‘,

path: ‘administration_1‘,

},

{

name: ‘数据管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘服务器管理‘,

icon: ‘dashboard‘,

path: ‘theserver‘,

children: [

{

name: ‘数据管理1‘,

path: ‘administration_1‘,

},

{

name: ‘数据管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘报警管理‘,

icon: ‘dashboard‘,

path: ‘callpol‘,

children: [

{

name: ‘报警管理1‘,

path: ‘administration_1‘,

},

{

name: ‘报警管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘IP地址池管理‘,

icon: ‘dashboard‘,

path: ‘addressip‘,

children: [

{

name: ‘IP地址池管理1‘,

path: ‘administration_1‘,

},

{

name: ‘IP地址池管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘日志管理‘,

icon: ‘dashboard‘,

path: ‘journal‘,

children: [

{

name: ‘IP地址池管理1‘,

path: ‘administration_1‘,

},

{

name: ‘IP地址池管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘角色管理‘,

icon: ‘dashboard‘,

path: ‘role‘,

children: [

{

name: ‘角色管理1‘,

path: ‘administration_1‘,

},

{

name: ‘角色管理2‘,

path: ‘administration_2‘,

},

],

},

{

name: ‘用户管理‘,

icon: ‘dashboard‘,

path: ‘userp‘,

children: [

{

name: ‘用户管理1‘,

path: ‘administration_1‘,

},

{

name: ‘用户管理2‘,

path: ‘administration_2‘,

},

],

},

其次在routes配置：


‘/homepage/onepage‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Homepage/Homepagei‘)),//首页

},

‘/task/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Task/Index‘)),//任务管理1

},

‘/task/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Task/Subpage‘)),//任务管理2

},

‘/data/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Data/Dataindex‘)),//数据管理1

},

‘/data/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Data/Datasubpage‘)),//数据管理2

},

‘/template/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Template/Templateindex‘)),//模板管理1

},

‘/template/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Template/Templatesubpage‘)),//模板管理2

},

‘/datasource/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Datasource/Datasourcei‘)),//数据源管理1(i表示index)

},

‘/datasource/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Datasource/Datasources‘)),//数据源管理2(s表示subpage)

},

‘/theserver/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Theserver/Theserveri‘)),//服务器管理1(i表示index)

},

‘/theserver/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Theserver/Theservers‘)),//服务器管理2(s表示subpage)

},

‘/callpol/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Callpol/Callpoli‘)),//报警管理1(i表示index)

},

‘/callpol/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Callpol/Callpols‘)),//报警管理2(s表示subpage)

},

‘/addressip/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Addressip/Addressi‘)),//IP地址池管理1(i表示index)

},

‘/addressip/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Addressip/Addresss‘)),//IP地址池管理2(s表示subpage)

},

‘/journal/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Journal/Journali‘)),//IP地址池管理1(i表示index)

},

‘/journal/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Journal/Journals‘)),//IP地址池管理2(s表示subpage)

},

‘/role/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Role/Rolei‘)),//IP地址池管理1(i表示index)

},

‘/role/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Role/Roles‘)),//IP地址池管理2(s表示subpage)

},

‘/userp/administration_1‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Userp/Userpi‘)),//IP地址池管理1(i表示index)

},

‘/userp/administration_2‘:{

component: dynamicWrapper(app, [], () => import(‘../routes/Userp/Userps‘)),//IP地址池管理2(s表示subpage)

},

最后跟句路径创建文件夹写出对应的js文件：举个例子比如，

在routes文件夹下面创建Userp文件夹，在下面创造两个js文件：Userpi.js,Userps.js。

在此需要注意：Userp/Userps文件夹大写，js文件大写，其余路由与path都按小写。根据pro例子来



推荐阅读
  • perl

    Nginx使用AWStats日志分析的步骤及注意事项

    Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息，并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境，并进行DNS解析。 ... [详细]
  • python

    计算机网络初识及通信流程分析

    本文介绍了计算机网络的定义和通信流程，包括客户端编译文件、二进制转换、三层路由设备等。同时，还介绍了计算机网络中常用的关键词，如MAC地址和IP地址。 ... [详细]
  • select

    图解redis的持久化存储机制RDB和AOF的原理和优缺点

    图解redis的持久化存储机制RDB和AOF的原理和优缺点
    本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件，恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘，实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点，帮助读者更好地理解redis的持久化存储策略。 ... [详细]
  • select

    如何在服务器主机上实现文件共享的方法和工具

    如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具，包括Linux主机和Windows主机的文件传输方式，Web运维和FTP/SFTP客户端运维两种方式，以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外，还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK，以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • python

    Python瓦片图下载、合并、绘图、标记的代码示例

    Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]
  • install

    在mac环境下使用nginx配置nodejs代理服务器的步骤

    本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤，包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • go

    Linux如何安装Mongodb的详细步骤和注意事项

    Linux如何安装Mongodb的详细步骤和注意事项
    本文介绍了Linux如何安装Mongodb的详细步骤和注意事项，同时介绍了Mongodb的特点和优势。Mongodb是一个开源的数据库，适用于各种规模的企业和各类应用程序。它具有灵活的数据模式和高性能的数据读写操作，能够提高企业的敏捷性和可扩展性。文章还提供了Mongodb的下载安装包地址。 ... [详细]
  • get

    Linux下Kafka单机安装配置方法（实操成功）

    本文介绍了在Linux下安装和配置Kafka的方法，包括安装JDK、下载和解压Kafka、配置Kafka的参数，以及配置Kafka的日志目录、服务器IP和日志存放路径等。同时还提供了单机配置部署的方法和zookeeper地址和端口的配置。通过实操成功的案例，帮助读者快速完成Kafka的安装和配置。 ... [详细]
  • post

    解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法

    解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法
    本文介绍了解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法，包括检查location配置是否正确、pass_proxy是否需要加“/”等。同时，还介绍了修改nginx的error.log日志级别为debug，以便查看详细日志信息。 ... [详细]
  • post

    集成电路企业跨隔离网数据交换的安全性及解决方案

    集成电路企业在进行跨隔离网数据交换时面临着安全性问题，传统的数据交换方式存在安全性堪忧、效率低下等问题。本文以《Ftrans跨网文件安全交换系统》为例，介绍了如何通过丰富的审批流程来满足企业的合规要求，保障数据交换的安全性。 ... [详细]
  • get

    在虚拟服务器上安装oracle 10g客户端的问题及解决方法

    本文讨论了在VMWARE5.1的虚拟服务器Windows Server 2008R2上安装oracle 10g客户端时出现的问题，并提供了解决方法。错误日志显示了异常访问违例，通过分析日志中的问题帧，找到了解决问题的线索。文章详细介绍了解决方法，帮助读者顺利安装oracle 10g客户端。 ... [详细]
  • post

    利用RxJava实现的事件总线（Event Bus）及其使用方法介绍

    本文介绍了RxJava在Android开发中的广泛应用以及其在事件总线（Event Bus）实现中的使用方法。RxJava是一种基于观察者模式的异步java库，可以提高开发效率、降低维护成本。通过RxJava，开发者可以实现事件的异步处理和链式操作。对于已经具备RxJava基础的开发者来说，本文将详细介绍如何利用RxJava实现事件总线，并提供了使用建议。 ... [详细]
  • post

    无法使用fetch在服务器端读取/获取发布的数据

    本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题，以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器，但无法在服务器端读取/获取发布的数据。 ... [详细]
  • post

    单页面应用 VS 多页面应用的区别和适用场景

    单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用（SPA）和多页面应用（MPA）的区别和适用场景。单页面应用只有一个主页面，所有内容都包含在主页面中，页面切换快但需要做相关的调优；多页面应用有多个独立的页面，每个页面都要加载相关资源，页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • post

    Nginx使用（server参数配置）

    Nginx使用（server参数配置）
    本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]
author-avatar
Because_of_you龙
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有