文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

​年终盘点: 复盘20+基于React的开源管理后台&插件

上一篇文章和大家分享了国内外 star 比较多的 vue3 开源管理系统, 也是我之前做项目会考虑的方案, 本篇文章继续为大家推荐几款基于 React 的开源管理系统，让我们一起探索这些工具如何利用...用于状态管理、路由、数据可视化、图表、表格等的无头、类型安全且功能强大的实用程序。...为应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。...， body参数 parameter参数 path参数，动态请求头，请求前后拦截 路由按需加载，首屏加载超快 扩展了antd写了许多实用的UI，通过一个配置即可生成，后台CRUD三件套（数据表格，搜索框...项目功能： 免费的 React 管理仪表板模板包，具有现代设计系统和大量自定义模板和组件。 完全响应式：所有模板都是完全响应式的，并且能够根据任何视口大小调整和重排其布局。

4.4K10

掌握使用 React 和 Ant Design 的个人博客艺术之美

），你可以根据自己的需要挑选适合博客风格的组件，为博客增色不少。...打造个性化的博客风格在选择了适当的组件之后，我们进入了个性化定制的领域。使用 Ant Design 的组件，你可以轻松创建独特而且令人印象深刻的博客页面。...此时，你已经开始感受到 React 和 Ant Design 的默契配合，让博客的呈现更为生动。通过路由实现多页面为了更好地组织博客内容，我们引入了 React Router。...，通过 React Router，你可以创建博客详情页，并通过参数动态加载不同的博客内容。...美化与样式定制Ant Design 提供了一套丰富的主题和样式定制工具。通过这些工具，你可以根据个人喜好调整博客的颜色、字体、边距等样式属性。这不仅让博客更符合你的审美观，也展现了个性化的博客风格。

76910
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    『Ant Design』主题定制

    这意味着你可以更灵活地调整样式，根据需要动态改变主题，为你的应用定制独特的外观。...这不仅限于以下内容，而是包含但不局限于： 支持 动态切换 主题 支持 同时存在多个 主题 支持 针对某个/某些组件 修改主题变量 我这里之前创建项目是采用的 create-react-app，所以主题定制是针对...ConfigProvider 是一个全局化配置的组件，目前支持配置 antd 组件库的国际化文案、开始时间、全局化样式等。...然后我紧接着在文档中又搜索 AliasToken，我一下子就悟了： 通过上图中可以看到提供了很多的 Token 名称，例如 boxShadow 就是用来配置元素阴影样式，根据这里不同的 Token 名称...然后我将主题色改为绿色，运行项目，可以看到主题色已经改为绿色了： 这里我们就可以根据自己的需求，对 Ant Design 的主题进行定制，让它符合我们自己的主题色。

    1.4K50

    掌握 Ant Design 主题定制实战指南

    这意味着你可以更灵活地调整样式，根据需要动态改变主题，为你的应用定制独特的外观。 这不仅限于以下内容，而是包含但不局限于： 1. 支持 动态切换 主题 2. 支持 同时存在多个 主题 3....ConfigProvider 是一个全局化配置的组件，目前支持配置 antd 组件库的国际化文案、开始时间、全局化样式等。...然后我紧接着在文档中又搜索 AliasToken，我一下子就悟了： 通过上图中可以看到提供了很多的 Token 名称，例如 boxShadow 就是用来配置元素阴影样式，根据这里不同的 Token 名称...然后我将主题色改为绿色，运行项目，可以看到主题色已经改为绿色了： 这里我们就可以根据自己的需求，对 Ant Design 的主题进行定制，让它符合我们自己的主题色。...再来一个，我将 Link Button 也改为绿色，这个好像是文字颜色，再去官方文档找找有没有更改文字颜色的 Token 名称，然后我在文档中搜索了一下没有找到，我利用猜想加编辑工具的提示找到了我想要的

    87510

    如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)

    使用JavaScript实现前端基于Table数据一键导出excel文件 XLSX和js-export-excel基本使用 正文 本文接下来的内容素材都是基于H5可视化编辑器(H5-Dooring)项目的截图...: 编辑table组件: 保存table数据后实时渲染可视化图表: 以上就是我们实现导入excel文件后, 编辑table, 最后动态生成图表的完整流程. 1.2 实现一键导入excel文件并生成...当然自己实现可编辑的表格也很简单, 而且有很多方式, 比如用column的render函数来动态切换表格的编辑状态, 或者使用弹窗编辑等都是可以的. 1.4 根据编辑的table数据动态生成图表 根据table...数据动态生成图表这块需要有一定的约定, 我们需要符合图表库的数据规范, 不过我们有了table数据, 处理数据规范当然是很简单的事情了, 笔者的可视化库采用antv的f2实现, 所以需要做一层适配来使得...还有一点就是为了能使用多张图表, 我们需要对f2的图表进行统一封装, 使其成为符合我们应用场景的可视化组件库.

    3.6K31

    如何设计实现H5营销页面搭建系统

    组件 Schema 如何设计？ 画布区域和预览时组件的渲染是否可共用一套渲染逻辑？...组件的数据如何去维护（考虑添加组件、删除组件、组件渲染/预览等场景） 组件库如何维护（考虑新增组件满足业务需要的场景） 首先来看第一条，简单归纳就是动态加载组件。...从页面呈现上来看并没有太大的差异，那么从代码设计上，这两部分当然就可以共享一个组件。...鉴于这部分内容还在开发迁移中，暂时就不展开细说了。 到这里，我感觉已经把可视化编辑器实现上最为复杂的几部分以问题的形式一一解答了。...其实无论是组件动态加载还是组件schema的设计、数据结构的设计、组件库的维护等，每个团队都可以制定一套适合自己的规范，没有绝对的对错之分。

    1.6K20

    需要的效果它都有，让AI对话开发效率翻倍！这款Ant Design扩展组件库绝了

    嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 ant-design-x-vue 是基于 Ant Design Vue 的扩展组件库，专注于增强聊天和AI交互场景的体验...组件将AI的思考过程分解为可视化节点，支持展开/收起复杂推理步骤：Ant Design基础UI框架设计规范统一Vite构建工具极速HMRTailwind CSS样式管理原子化CSS方案TypeScript类型系统更好的代码提示典型应用场景智能客服系统...：通过Conversations+Sender快速搭建对话界面AI写作助手：利用Suggestion实现智能写作建议数据分析看板：用ThoughtChain展示分析过程教育类应用：Bubble组件完美呈现教学对话界面效果直击欢迎面板动态效果图...开箱即用的AI组件：专门为智能对话场景优化的预制组件无缝集成Ant生态：完美兼容现有Ant Design Vue项目企业级交互体验：内置20+种交互动画和状态管理持续迭代保障：每月更新2-3个AI相关新组件同类优秀项目推荐

    1K10

    Vue3 后台管理系统模板推荐

    gin-vue-admin（github上的标星数为14.2k）基于 vite + vue3 + gin 搭建的开发基础平台（支持TS，JS 混用），集成 jwt鉴权，权限管理，动态路由，显隐可控组件，...主题：可配置的主题 国际化：内置完善的国际化方案 Mock 数据 内置 Mock 数据方案 权限 内置完善的动态路由权限生成方案 组件 二次封装了多个常用的组件 预览效果 vue-admin-better...，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目。...，如组件名称，路由名称等等很多框架需要配置的东西 典型增删改查的三种业务表格，详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格” 无路由跳转的刷新功能，支持缓存页面刷新，目前了解的多数框架都不支持缓存页面的刷新...，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端 提供系统配置文件，轻松实现个性化定制 精心设计的动效，让每一处的动画都干净利落 根据路由配置自动生成导航栏 基于文件系统的路由 支持全方位权限验证

    9.4K34

    *当你在浏览器地址栏输入一个URL后回车，将会发生什么事情？*

    * 参考原文： http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ 前言：为了对网络应用如何工作有一个完整的层次化的认知...，传入链接越短的站点排名越低，搜索引擎理解重定向（301），并将来自两个来源的传入链接合并到一个排名中；同样，相同内容的多个URL也不利于缓存，当一条内容具有多个名称时，可能会在缓存中多次出现。...七、服务器发回HTML响应 这是服务器生成并发回的响应： image.png 该响应内容告诉浏览器： （1）响应体用gzip算法压缩，解压缩后即可看到所需的HTML； （2）Cache-Control标头指定是否以及如何缓存页面...； （3）Content-Type标头指定正文类型为text/html以及字符集编码utf-8，指示浏览器将响应内容呈现为HTML，而不是将其下载为文件。...（浏览器通过各个标头来决定如何解释响应，但也会考虑其他因素，例如URL的扩展）； （4）Expires标头指定到期时间。

    2.9K30

    深入了解加快网站加载时间的 JavaScript 优化技术

    在本文中，我将分享通过各种方法来优化 JavaScript 代码，包括最小化文件大小、减少网络请求、利用缓存和异步加载，以及采用最佳实践来确保更快的加载时间和改进的用户体验。...它的工作原理是应用算法来压缩文件中的数据，使文件更小而不失去其功能。当浏览器请求压缩文件时，它会即时解压缩，以便正确呈现和执行内容。...在本节中，我们将探讨缓存的概念以及如何利用它来提高网站的性能。 01）、浏览器缓存 浏览器缓存是一种使网络浏览器能够在本地存储网站文件副本的机制。...02）、缓存控制和 ETag 标头 用于控制浏览器缓存的两个重要标头是 Cache-Control 和 ETag。...从最小化文件大小和减少网络请求到利用缓存和异步加载，这些方法都可以对你网站的加载时间产生重大影响。 我希望你能发现本指南内容丰富且有用。

    1.6K30

    聊一聊关于加快网站加载时间相关的 JS 优化技术

    在本文中，我将分享通过各种方法来优化 JavaScript 代码，包括最小化文件大小、减少网络请求、利用缓存和异步加载，以及采用最佳实践来确保更快的加载时间和改进的用户体验。...它的工作原理是应用算法来压缩文件中的数据，使文件更小而不失去其功能。当浏览器请求压缩文件时，它会即时解压缩，以便正确呈现和执行内容。...在本节中，我们将探讨缓存的概念以及如何利用它来提高网站的性能。 01）、浏览器缓存 浏览器缓存是一种使网络浏览器能够在本地存储网站文件副本的机制。...02）、缓存控制和 ETag 标头 用于控制浏览器缓存的两个重要标头是 Cache-Control 和 ETag。...Cache-Control 标头允许你设置缓存指令，例如缓存中资源的最长期限或是否应重新验证。

    1.7K20

    万物可视之智能可视化管理平台

    IT可视化运维管理平台 　　Tarsier是优锘科技推出的一款可视化+大数据的IT运维管理产品，针对当前业务环境和技术环境下企业IT运维面临的结构复杂、数据碎片、变化常态、机制板结等问题，Tarsier...提供以可视化、场景化为核心理念的系列产品助力企业解决问题 　　ThingJS-人人都能用的3D平台 　　ThingJS是优锘科技开发的一套面向物联网应用的在线3D可视化应用开发及运营PaaS平台，以“ThingJS...云视PaaS服务”形式面向广大物联网企业提供全生命周期在线3D可视化服务 2D/3D界面 ThingJS 是一个先进的 PaaS 开发平台，开发者可以方便、安全地基于云端的各种工具组件随时随地进行开发。...UIAnchor：可以将普通的2D界面“挂接”到某个3D物体对象上，使之随物体移动。 在3D“容器”外 提供通栏组件（如上通栏、侧通栏）。...Marker 默认是受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。

    1.7K61

    Vue后台管理系统模板推荐

    基于这些组件库封装的后台管理模板，推荐一些常用 VUE后台模板 给大家。按照 Github 星标数量来依次介绍。...它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。...（github上的标星数为27.5k 32.8k）基于 Ant Design 体系精心设计，提炼自中后台应用的典型页面和场景，使用 React/dva/antd 等前端前沿技术开发，针对不同屏幕大小设计...， 可配置的主题满足多样化的品牌诉求， 内建业界通用的国际化方案， 良好的工程实践助你持续产出高质量代码，实用的本地数据调试方案， 支持自动化测试保障前端产品质量。...它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

    7.4K22

    组件分享之后端组件——轻松构建RESTful JSON API的组件go-json-rest

    组件分享之后端组件——轻松构建RESTful JSON API的组件go-json-rest 背景 近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题...组件基本信息 组件：go-json-rest 开源协议：MIT license 内容 本节我们分享一个轻松构建RESTful JSON API的组件go-json-rest，它是一个基于net/http...其核心中间件如下： 组件名称 描述 AccessLogApache 受 Apache mod_log_config 启发的访问日志 AccessLogJson 访问日志，记录为 JSON...JsonIndent 易于阅读的 JSON Jsonp 响应为 JSONP PoweredBy 管理 X-Powered-By 响应标头 Recorder 记录Env中的状态码和内容长度.../ant0ine/go-json-rest/rest 2、案例 package main import ( "github.com/ant0ine/go-json-rest/rest"

    98120

    两步实现让antd与IDE和睦相处的处理案例

    我们不得不思考，将多个 UI 组件库用于同一个前端项目，如何解决样式风格冲突问题？不同的组件有不同的设计体系，不同体系间又该如何交互？...除此之外，我们还修改了其他一些样式使 Ant Design 的整体风格更偏向 Molecule，如圆角属性，超链接属性等。 除了主题色的修改以外，还需要解决动态主题色的适配问题。...通过 Molecule 提供的监听主题色改变的事件，动态地加载不同主题风格的 Ant Design 样式文件。...得益于 Molecule 提供的强大的扩展（extension）机制，我们可以在扩展中根据自身需求高度定制化页面中任何可见或不可见的元素。...例如在开发任务管理时，为了解决页面之间来回切换跳转的问题，我们通过将任务管理添加到 Molecule 的菜单栏中，并且监听菜单栏的事件后打开 Ant Design 的抽屉组件渲染不同组件内容。

    1.4K30

    类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡

    Ant Design Vue简介：蚂蚁金服Ant Design的Vue 3实现，是React版Ant Design在Vue世界的完美对标，拥有顶级的企业级设计体系和质量。...适用场景：对设计规范、项目国际化、TypeScript有高要求的大型复杂企业应用。...优点：物料生态丰富：不仅提供组件，还配套了丰富的设计资源（图标、Figma组件库）和开箱即用的模板。配置化能力强：强大的全局化配置和丰富的组件参数，满足各种业务场景。...四、数据与对比根据 GitHub Stars、npm 周下载量等可量化数据（数据截至2024年5月），我们可以客观看到各框架的热度和受欢迎程度。...框架名称GitHub Starsnpm周下载量维护团队设计语言Element Plus~21k~740k饿了么团队 & 社区自有设计Ant Design Vue~18.9k~580k蚂蚁金服 & 社区Ant

    1.7K00

    基于招投标货物知识图谱全流程构建指南(一)

    在大量的招标公告中，信息是高度碎片化的，你必须手动查阅多个页面，整理出所有关键数据，包括项目名称、预算、投标人、投标要求、评标结果等。...即便你成功地找到了需要的公告，如何从大量的文字中提取出有价值的数据并进行结构化存储，依然是一个技术难题。...因此，我们选择使用Selenium，这是一款支持自动化操作的工具，能够模拟用户的行为来抓取动态内容。...数据处理的目标与挑战招投标公告通常包含大量的信息，如项目名称、预算、时间、投标公司、评标结果等。...如有纰漏之处，请留言指教，非常感谢以上就是本期全部内容。我是fanstuck ，有问题大家随时留言讨论 ，我们下期见。

    1.1K52

    什么是前端开发 ？

    设计与原型：勾勒蓝图，呈现构想 UI 设计师根据需求和用户调研结果，设计网页的视觉风格、布局和交互方式。...前端开发：编写代码，实现功能 前端工程师根据设计稿和原型，使用 HTML、CSS、JavaScript 等技术编写网页代码，实现网页的结构、样式和交互功能。...开发者可以使用组件化的方式构建网页，提高代码复用率和可维护性。 5....主流前端框架： React: 由 Facebook 开发，采用组件化、虚拟 DOM 和单向数据流等核心概念，以其灵活性和强大的生态系统著称。...UI 库： 如 Bootstrap、Material UI、Ant Design，Element UI提供现成的 UI 组件和样式，就像一个材料库，开发者可以直接使用这些组件，快速构建美观、统一的界面

    31910

    NocoBase低代码平台深度剖析：2025年企业应用开发新范式

    核心组件构成： 前端框架：基于React和Ant Design构建的可视化界面 后端服务：基于Node.js和Egg.js的RESTful API服务 数据引擎：支持多种数据库的统一数据访问层 插件系统...：基于模块化设计的可扩展插件机制 这种架构设计使NocoBase能够同时满足技术人员和业务人员的需求，技术人员可以通过插件扩展系统功能，而业务人员则可以通过可视化界面快速构建应用。...二、代码结构与实现细节 2.1 前端实现 NocoBase的前端代码基于React和Ant Design，采用了组件化的开发方式： // 表单设计器核心组件 import React, { useState...这大大简化了数据层的开发工作，使业务人员能够专注于业务逻辑的设计。...3.2 可视化表单设计 NocoBase提供了强大的可视化表单设计功能，支持多种表单控件和布局： 控件类型 描述 应用场景 文本输入 单行文本输入 名称、编码等 多行文本 富文本编辑 描述、说明等 数字输入

    60910
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券