5.9k!一款清新好用的后台管理系统!【送源码】
今天给大家分享的开源项目是一个优雅清新后台管理系统——Soybean Admin。

简介
官方是这样介绍这个项目的:

Soybean Admin 使用的是Vue3作为前端框架,TypeScript作为开发语言,同时还整合了NaiveUI组件库,使得系统具有高可用性和用户友好性。
目前该项目在Github上面收获了5.9k star!
性能特色
以下是经过优化后的文字:
-
采用最新流行的前端技术栈,如Vue3/Vite,并使用高效的npm包管理器pnpm。
-
TypeScript:一种用于开发应用程序级JavaScript的语言。
-
主题:提供丰富可配置的主题选项,包括暗黑模式,基于原子CSS框架-UnoCss的动态主题颜色。
-
代码规范:提供丰富的规范插件和极高的代码规范标准。
-
文件路由系统:基于文件的路由系统,根据页面文件自动生成路由声明、导入和模块。
-
权限路由:支持前端静态和后端动态两种路由模式,并通过基于mock的动态路由快速实现后端动态路由。
-
请求函数:对axios进行了完善的封装,提供了Promise和hooks两种请求函数,并加入了请求结果数据转换的适配器。
项目展示
接下来,带大家一起来看看项目预览。
登录界面

仪表盘

文档

内置各种组件
内置了丰富多样的组件,供我们日常使用。比如各种类型的按钮、卡片和表格等,如下图:

各类插件
整合了各种常用的插件,包括图表、地图、视频、编辑器和图标等。通过引入相应的组件和库,即可在项目中轻松使用,如下图所示:



异常页面
为常见的异常页面(403、404、500)提供了个性化的设计,让用户在遇到问题时也能感受到一丝惊喜和趣味。

主题配色
提供了丰富多样的主题配色,并且支持个性化的界面功能设置。用户可以根据自己的需求,选择合适的主题和界面样式,如下图所示:

深色模式
还支持深色模式,可以在不同的环境和偏好下,切换界面的明暗色调,以获得更加舒适的视觉体验。

安装使用
要在本地使用Soybean Admin,首先需要确保安装了需要安装 pnpm 7.x 、Node.js 14.18+ 和 Git。然后按照以下步骤进行操作:
-
克隆项目代码:
git clone https://github.com/honghuangdc/soybean-admin.git
-
安装依赖:
pnpm i
-
运行项目:
pnpm dev
4.打包
pnpm build
如果你想使用Docker进行部署,可以执行以下命令:
docker build -t soybean-admin-image -f docker/Dockerfile .
docker run -d -p 80:80 soybean-admin-image
然后打开本地浏览器,访问http://localhost,即可访问Soybean Admin了。
需要注意的是,官方推荐使用Chrome 90+浏览器进行开发和浏览,不支持IE浏览器。

关于项目的更多内容,感兴趣的小伙伴可以去项目地址探索~~~
项目地址
https://github.com/honghuangdc/soybean-admin
——EOF——
福利:
扫码回复【酒店】可免费领取酒店管理系统源码


相关文章:
5.9k!一款清新好用的后台管理系统!【送源码】
今天给大家分享的开源项目是一个优雅清新后台管理系统——Soybean Admin。 简介 官方是这样介绍这个项目的: Soybean Admin 使用的是Vue3作为前端框架,TypeScript作为开发语言,同时还整合了NaiveUI组件库,使得系统具有高可用性和…...
Vue-cli搭建项目----基础版
什么是Vue-cli 全称:Vue command line interface 是一个用于快速搭建Vue.js项目的标准工具,他简化了Vue.js应用的创建和管理过程,通过命令工具帮助开发者快速生成,配置和管理Vue项目. 主要功能 同一的目录结构本地调试热部署单元测试集成打包上线 具体操作 第一步创建项目:…...
python之__call__函数介绍
Python 中的 __call__ 方法是一种特殊的方法,它允许对象像函数一样被调用。当你创建一个对象并使用括号 () 调用它时,Python 会自动调用这个对象的 __call__ 方法。 1. 基本用法 下面是一个简单的例子: class MyClass:def __init__(self, value):self.value valued…...
【AI】生成式AI服务器最低配置
【背景】 考虑数据安全,又想用AI赋能企业内部的日常工作,答案只有一个,本地部署。 UI采用open-web-ui,模型用Ollama管理,在局域网做成SAAS服务。要组一个服务器,提供部门内部最多30个的API并发。以下为反复…...
2.Android逆向协议-了解常用的逆向工具
免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于:微尘网校 上一个内容:1.Android逆向协议-环境搭建 常用的工具:AndroidKiller、jadx、JEB、IDA AndroidKiller…...
大数据------额外软件、插件及技术------Linux(完整知识点汇总)
Linxu 不同领域的主流操作系统 桌面操作系统 WindowsMAac OSLinux 服务器端操作系统 UNIX(付费)LinuxWindows Server(付费) 移动设备操作系统 Android(基于Linux开源)IOS(不开源) 嵌…...
iOS 其他应用的文件如何在分享中使用自己的应用打开
废话少说 一、第一步:先配置好plist文件 右击info.plist如下图文件打开 根据自己需要配置支持的文件类型,也可使用property List中配置,一样的 其他的文件可是参考文档:System-Declared Uniform Type Identifiers 可复制的代码&am…...
【编译原理必考大题】 推导构建语法树,写出语法树的短语,简单短语和句柄
写在最前 本文为编译原理重点考察大题之一,理论基础见专栏文章,0基础直接使用也可食用 文章目录 推导构造语法树1.语法树的概念2. 子树,短语,简单短语,句柄2.1 子树2.2 短语2.3 简单短语与句柄2.4 真题实战 推导构造语…...
redis服务介绍
redis 基础概念安装使用基础操作命令数据类型操作命令 管理和维护命令 基础概念 Remote Dictionary Server(Redis)远程字典服务器是完全开源免费的,用C语言编写的,遵守BSD开源协议,是一个高性能的(key/val…...
nodepad 中换行符、tab替换
1 nodepad 主要符号 换行符: \r\n(windows) tab: \t 2 展示符号 3 相互替换 tip:需要点击扩展 参考: https://blog.csdn.net/lijing742180/article/details/85174564...
常见的字符串函数(包含头文件string.h)和字符函数(2)
八. strstr函数 1.strstr的定义 char *strstr( const char *str1, const char *str2 ); ->1. strstr查找子串(str2)在字符串(str2)中第一次出现的位置,记录并返回该位置的指针,如果找不到,则返回NULL ->2. str1:查找字符…...
Python | Leetcode Python题解之第187题重复的DNA序列
题目: 题解: L 10 bin {A: 0, C: 1, G: 2, T: 3}class Solution:def findRepeatedDnaSequences(self, s: str) -> List[str]:n len(s)if n < L:return []ans []x 0for ch in s[:L - 1]:x (x << 2) | bin[ch]cnt defaultdict(int)for…...
SpringCloud分布式微服务链路追踪方案:Skywalking
一、引言 随着微服务架构的广泛应用,系统的复杂性也随之增加。在这种复杂的系统中,应用通常由多个相互独立的服务组成,每个服务可能分布在不同的主机上。微服务架构虽然提高了系统的灵活性和可扩展性,但也带来了新的挑战…...
首次线下联合亮相!灵途科技携手AEye、ATI亮相2024 EAC 易贸汽车产业大会
6月22日,2024 EAC 易贸汽车产业大会在苏州国际博览中心圆满落幕,泛自动驾驶领域光电感知专家灵途科技携手自适应高性能激光雷达解决方案全球领导者AEye公司(NASDAQ:LIDR)及光电器件规模化量产巨头Accelight Technologiesÿ…...
一文入门CMake
我们前几篇文章已经入门了gcc和Makefile,现在可以来玩玩CMake了。 CMake和Makefile是差不多的,基本上是可以相互替换使用的。CMAke可以生成Makefile,所以本质上我们还是用的Makefile,只不过用了CMake就不用再写Makefile了&#x…...
【LeetCode面试经典150题】117. 填充每个节点的下一个右侧节点指针 II
一、题目 117. 填充每个节点的下一个右侧节点指针 II - 力扣(LeetCode) 给定一个二叉树: struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针,让这个指针指向其下一个右侧节点。如果找不到下一个…...
RTDETR更换优化器——Lion
RTDETR更换Lion优化器 论文:https://arxiv.org/abs/2302.06675 代码:https://github.com/google/automl/blob/master/lion/lion_pytorch.py 简介: Lion优化器是一种基于梯度的优化算法,旨在提高梯度下降法在深度学习中的优化效果…...
Spring Boot中最佳实践:数据源配置详解
Spring Boot中最佳实践:数据源配置详解 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将深入探讨在Spring Boot中如何进行最佳实践的数据源…...
第1章 物联网模式简介---独特要求和体系结构原则
物联网用例的独特要求 物联网用例往往在功耗、带宽、分析等方面具有非常独特的要求。此外,物联网实施的固有复杂性(一端的现场设备在计算上受到挑战,另一端的云容量几乎无限)迫使架构师做出艰难的架构决策和实施选择。可用实现技…...
数据挖掘概览
数据挖掘(Data Mining)就是从大量的,不完全的,有噪声的,模糊的,随机的实际应用数据中,提取隐含在其中的,人们事先不知道的,但又是潜在有用的信息和知识的过程. 预测性数据挖掘 分类 定义:分类就是把一些新的数据项映射到给定类别中的某一个类别 分类流程&#x…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
