千万级项目后台菜单导航设计及react antd实现

最新推荐文章于 2024-05-08 10:01:53 发布
最新推荐文章于 2024-05-08 10:01:53 发布
阅读量2k 收藏 9
点赞数 4
文章标签： react 后端 java web mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53041511/article/details/110293945
版权

后台管理系统一般通过菜单进行各个功能点的导航，在面临大量菜单时需要考虑如何设计使客户体验更加便捷。作者在最近几个百万级、千万级项目的开发实施过程中，用户对菜单导航结构提出一些修改意见，经过若干次迭代以优化操作体验，作者将迭代过程总结下做个分享。

整体布局

第一阶段

传统树形菜单导航，根据项目的不同，有的采用横向排列，有的固定在左侧

顶部菜单：从上到下分别为：标题栏、菜单栏、工作区
在这里插入图片描述
侧边菜单：导航菜单占据整个左侧，右边从上而下为标题栏、工作区
An image
侧边菜单有个变形，标题栏占据全部，下边左右分别为导航菜单、工作区
An image
早期项目曾经采用顶部菜单，后来以侧边菜单为主，主要采用第三种布局方式。

项目规模大了以后

  • 用户经常反映几百个菜单，不知道要找的功能在哪里
  • 有时客户现场的项目经理也反映开会时点来点去找某个功能时被用户取笑

第二阶段

在对系统菜单分析、整理的过程中，有次点开泛微OA系统，发现在新建流程时，右侧整个工作区都是各个流程的操作入口，分为两个层级。受此启发，将菜单导航划分为四个层级，大概示意图如下：
An image
这个版本菜单上线后

  • 用户反映找不到菜单的声音小了许多，但还是会有
  • 用户反馈另外一个问题：屏幕本来就不大，左侧菜单占空间还不小，导致工作区过小
  • 开会的时侯就喜欢一眼把内容都看到

让想办法再优化下

第三阶段

在分析解决方案过程中，分析了当前主流云厂商的管理后台系统，基本都是两层导航，第一次导航通过一个具有视觉冲击力大页面展示所有服务，点击后进入单个服务的侧边栏导航
An image
改成这种结构也满足不了用户的需求，用户能够分出一级菜单的业务子系统，干脆将二、三、四级菜单同时展示出来，大概示意如下
An image
为了用户操作方便，同时提供二级菜单的快捷方式。用户点击后菜单页面直接滚动至选中内容，同时用户浏览菜单页时，横向二级菜单跟随用户的操作进行联动。

这个版本的菜单导航上线后，用户比较认可。

跳转方式与多标签页

用户通过菜单点击功能后，经常需要进行二次跳转。最经典的应用场景为：通过菜单打开列表界面，点击单行后显示详情，详情的显示有几种不同的处理方式。

常见的跳转方式

浏览器标签页

用户每点击一次就打开一个新的浏览器标签页。优点是工作区很大，缺点是打开多了，浏览器标签页就会打开很多，要是开会时把浏览器切换至全屏模式，基本上就很难找到上次打开的内容了。

工作区直接切换

用户点击详情时直接把工作区切换为详情。没有浏览器标签页的问题，但是每次只能看到一个，尤其是对比的时侯操作不方便；而且很难实现详情页返回时还能看到跳转前的列表。

详情页弹出框

用户点击详情时点出一个对话框，主要适用于详情内容比较少的场景，也无法解决多个详情对比的场景。

多标签页切换

系统提供多标签页，每打开一个功能时打开一个标签页，便于在不同功能间进行切换。这种方式的工作区略小于浏览器标签页，但是切换方便。

多标签页

作者采用了多标签页的方案，主要方便用户在不同已打开功能间切换。
多标签页在不同系统的实现略有差异：

  • 同一个详情功能，用户在点击第一条数据后，点击第二条数据时再显示一个新标签页，还是把第一条数据的标签页显示成新的。为了避免用户打开过多标签页，同一个功能点（可理解为同一个url地址）只打开一个标签页。
  • 用户从详情页跳转至列表页时，列表页是否需要刷新。

用户在一条一条看数据，已经看到第2页了，返回列表时变成第1页时，用户不满意要求保留当时的状态；用户从待办列表点进去一个待办事项处理完后，待办列表中还在，系统是不是出问题了呀。

针对业务场景的不同，具体问题具体分析，一般情况下不需要自动刷新，需要刷新时由具体功能提供自动刷新功能。即：多标签页切换控制提供保存上次状态功能、不提供自动刷新，待办列表提供自动刷新。

react ant design实现

作者开源的蜗牛365采用上述设计实现了菜单导航，前端采用react ant design

An image

An image

An image

导航布局采用antd组件，多标签页实现还算方便，主要是保存上次状态不好实现。

为了适应大量功能点的需要，采用umi提供的约定式路由。目前采用react-activation提供的KeepAlive方案。

演示地址： http://woniu365.net

gitub: https://github.com/pangshw/woniu

gitee: https://gitee.com/pangshw/woniu

（作者蜗牛365，每天进步一点点，分享软件项目的点点滴滴，个人公众号「蜗牛365后台管理系统」，ID：woniublog）

蜗牛数字化
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react学习之路（2）——调整页面布局
wxh777789的专栏
09-19 871
1.增加了菜单的收缩展开功能 2.调整页面高度，充满整个页面，底栏一直在底端。 3.调整菜单宽度和logo大小 App.js import React from 'react'; import './App.css'; import {Layout, Button, Menu, Breadcrumb} from 'antd'; import { AppstoreOutlined, MenuUnfoldOutlined, MenuFoldOutlined, PieC
react+antd导航栏布局例子
qq_44345059的博客
07-18 7229
本文适用于用react+antd写一个如下导航栏布局 本例子实际效果如下 思路： 在antd网站上找一个你想要的布局样式，然后拆分代码，将头部、导航栏、右部分别封装成组件，便于后面页面的调用（大项目需要进一步拆分封装，本项目只做了大致的模块封装），然后尝试在每个板块页面上引用每个部分的组件，在组件外需要适当按需搭建一下框架，使组件更好的被融合在一起。 具体步骤 要完成搭建所用到的文件有： app.js（用来写点击导航栏跳转页面功能的实现） pages/各具体页面.js(x)+对应css/less（用
React+antd后台管理系统模板
12-01
基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互的系统模板Demo
react+antd+redux实现的一个超全后台管理系统
10-12
该后台管理系统模板参照了vue-element-admin进行开发，包含动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
antd vue pro (vue 2.x) 多页签详细操作
最新发布
apgk的博客
05-08 568
antd vue pro 多页签详细配置教程。 ant design vue pro 多页签详细配置
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单 下拉菜单基于antd。 安装 npm install -S @jswork/react-ant-dropdown-menu 特性 姓名 类型 必需的 默认 描述 班级名称 细绳 错误的 -- menuOptions 形状 错误的 -- 用法 导入css @import " ~@jswork/react-ant-dropdown-menu/dist/style.css " ; // or use sass @import " ~@jswork/react-ant-dropdown-menu/dist/style.scss " ; // customize your styles: $react-ant-dropdown-menu-options : () 导入js import ReactDemokit from '@jswork/react-demokit'
前端 - bootstrap树形菜单
ApatheCrazyFan的博客
09-02 5301
1、环境：1.1：JDK -->1.8.0_1311.2：ORACLE --> 11g2.开发工具2.1：eclipse --》 Version: Mars Release (4.5.0)Build id: 20150621-12003.前端页面所需要的js文件和css文件3.1：css --》<link href="${pageContext.request.contextPa...
antd+react-router-dom实现导航菜单切换
热门推荐
kieran的专栏
04-10 2万+
antd导航菜单用的是官网的Layout示例：点击打开链接和react-router-dom结合，实现点击不同菜单切换到不同页面。源码已经上传到git：点击打开链接
react管理系统使用antd时路由与左侧导航相关联
weixin_42560424的博客
10-14 2458
在使用antd的框架时，左侧导航栏与路由绑定切换，menu的selectedKeys与menu.item的key应该都是路由形式的。 render() { // 得到当前请求的路由路径 let path = this.props.location.pathname; console.log(path,'path') return ( // <HashRouter> <L
《React后台管理系统实战 ：二》antd左导航：cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
*
02-06 985
二
HTML创意菜单设计,有特色的使用大菜单的网页设计
weixin_34676828的博客
06-08 700
有特色的使用大菜单的网页设计2月 7, 2014评论 (2)Sponsor网站导航菜单是整个网页设计主要组成部分之一，我们通常把主菜单放在网站醒目的位置来引导用户浏览，所以我们看到大部分网站菜单都是放在网站的顶部，从用户体验来说，这样是很正确的做法。然而有些网站却不一样，非要给菜单来点特色设计，就如今天设计达人网为大家分享《有特色的使用大菜单的网页设计》，从这些网站案例中可以看出大分菜单都经过视觉...
后台管理菜单导航（界面）
03-18
最新整理的一份易想后台管理导航菜单及界面
JS+CSS简单树形菜单实现方法
10-23
主要介绍了JS+CSS简单树形菜单实现方法,涉及JavaScript结合css动态操作页面元素结点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
基于React+antd的后台管理模板
02-16
本“基于React+antd的后台管理模板”是针对企业级后台管理系统设计的，它充分利用了React的灵活性和antd的实用性，为开发者提供了一个快速开发后台应用的基础框架。 1. **React组件化开发** React的核心思想是组件...
react-基于Reactantd实现后台模板
08-15
在"react-admin-master"项目中，我们可以期待看到以上步骤的具体实现，包括各种React组件的编写、Ant Design组件的使用、CSS样式的定制，以及整个后台管理系统的功能实现。这个项目为学习和理解React与Ant Design...
网页导航树的简单快速美观之实现
一杯闲的专栏
05-02 6799
导航树在Web应用中较为广泛。它能够向浏览者展示清晰、层次分明的信息组织结构形式，从而使浏览者较易从总体上把握信息架构。 导航树目前讨论较多的导航树的实现，大多是编写JavaScript代码，无论从程序方法上还是界面效果上都不太令人满意。内容表技术可以快速构建导航目录树。。。
【Antd】Cascader 级联组件添加顶部栏（解决低版 antd 无 dropdownRender 属性方案）
qq_45677671的博客
08-24 752
Antd 组件库 Cascader 级联组件添加顶部栏（解决低版 antd 无 dropdownRender 属性方案）
jeecg前端部分，antd pro vue，前端菜单改成顶部一级左右二三级菜单，jeecg是在antd基础更改的，所以antd-design-vue菜单一二级更改类似
Funny_genius_cai的博客
01-15 4132
首先最近项目需要把jeecg前端部分菜单栏改成顶部一级左边二三级菜单，由于jeecg或者antd pro vue开源版本菜单只有顶部或者侧边 两种模式，所以没办法只能再次基础上改成需要的模式。 最后做成效果图如下（并没有美化只是先实现了需求） 实现过程如下可参考： 1、首先我们在jeecg菜单模式为horizontal 的基础上更改 第一步：实现的是顶部菜单只有一级的情况下路由可以跳转；如有二三级菜单点击没有效果 ①找到这个文件 109行左右改成 这样就完成了第一个需求 此时顶部菜单只有只用于一级菜单的情
react antd实现一个树级的可删除增加表格
07-08
可以使用 React 和 Ant Design（antd）来实现一个树级可删除增加的表格。首先，你需要安装 React 和 antd，可以使用以下命令： ``` npm install react antd ``` 然后，你可以按照以下步骤来实现： 1. 导入所需的组件和样式： ```jsx import React, { useState } from 'react'; import { Table, Button, Space } from 'antd'; import 'antd/dist/antd.css'; ``` 2. 创建一个包含表格数据的状态： ```jsx const [data, setData] = useState([ { key: 1, name: 'Node 1', children: [] }, { key: 2, name: 'Node 2', children: [] }, ]); ``` 3. 创建一个函数来处理添加子节点的操作： ```jsx const handleAddChild = (record) => { const newData = [...data]; const newChild = { key: Date.now(), name: 'New Node', children: [] }; const index = newData.findIndex((item) => record.key === item.key); newData[index].children.push(newChild); setData(newData); }; ``` 4. 创建一个函数来处理删除节点的操作： ```jsx const handleDelete = (record) => { const newData = data.filter((item) => item.key !== record.key); setData(newData); }; ``` 5. 创建表格的列配置： ```jsx const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Actions', key: 'actions', render: (_, record) => ( <Space size="small"> <Button type="primary" onClick={() => handleAddChild(record)}> Add Child </Button> <Button type="danger" onClick={() => handleDelete(record)}> Delete </Button> </Space> ), }, ]; ``` 6. 渲染表格组件： ```jsx <Table dataSource={data} columns={columns} pagination={false} indentSize={30} /> ``` 完整的代码示例如下： ```jsx import React, { useState } from 'react'; import { Table, Button, Space } from 'antd'; import 'antd/dist/antd.css'; const App = () => { const [data, setData] = useState([ { key: 1, name: 'Node 1', children: [] }, { key: 2, name: 'Node 2', children: [] }, ]); const handleAddChild = (record) => { const newData = [...data]; const newChild = { key: Date.now(), name: 'New Node', children: [] }; const index = newData.findIndex((item) => record.key === item.key); newData[index].children.push(newChild); setData(newData); }; const handleDelete = (record) => { const newData = data.filter((item) => item.key !== record.key); setData(newData); }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Actions', key: 'actions', render: (_, record) => ( <Space size="small"> <Button type="primary" onClick={() => handleAddChild(record)}> Add Child </Button> <Button type="danger" onClick={() => handleDelete(record)}> Delete </Button> </Space> ), }, ]; return ( <Table dataSource={data} columns={columns} pagination={false} indentSize={30} /> ); }; export default App; ``` 这样，你就可以在 React 应用中使用 Ant Design 创建一个树级的可删除增加的表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值