当前位置: 首页 > news >正文

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。然后按照以下步骤进行操作:

  1. 克隆项目代码:

git clone https://github.com/honghuangdc/soybean-admin.git
  1. 安装依赖:

pnpm i
  1. 运行项目:

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序列

题目&#xff1a; 题解&#xff1a; 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

一、引言 随着微服务架构的广泛应用&#xff0c;系统的复杂性也随之增加。在这种复杂的系统中&#xff0c;应用通常由多个相互独立的服务组成&#xff0c;每个服务可能分布在不同的主机上。微服务架构虽然提高了系统的灵活性和可扩展性&#xff0c;但也带来了新的挑战&#xf…...

首次线下联合亮相!灵途科技携手AEye、ATI亮相2024 EAC 易贸汽车产业大会

6月22日&#xff0c;2024 EAC 易贸汽车产业大会在苏州国际博览中心圆满落幕&#xff0c;泛自动驾驶领域光电感知专家灵途科技携手自适应高性能激光雷达解决方案全球领导者AEye公司&#xff08;NASDAQ:LIDR&#xff09;及光电器件规模化量产巨头Accelight Technologies&#xff…...

一文入门CMake

我们前几篇文章已经入门了gcc和Makefile&#xff0c;现在可以来玩玩CMake了。 CMake和Makefile是差不多的&#xff0c;基本上是可以相互替换使用的。CMAke可以生成Makefile&#xff0c;所以本质上我们还是用的Makefile&#xff0c;只不过用了CMake就不用再写Makefile了&#x…...

【LeetCode面试经典150题】117. 填充每个节点的下一个右侧节点指针 II

一、题目 117. 填充每个节点的下一个右侧节点指针 II - 力扣&#xff08;LeetCode&#xff09; 给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个…...

RTDETR更换优化器——Lion

RTDETR更换Lion优化器 论文&#xff1a;https://arxiv.org/abs/2302.06675 代码&#xff1a;https://github.com/google/automl/blob/master/lion/lion_pytorch.py 简介&#xff1a; Lion优化器是一种基于梯度的优化算法&#xff0c;旨在提高梯度下降法在深度学习中的优化效果…...

Spring Boot中最佳实践:数据源配置详解

Spring Boot中最佳实践&#xff1a;数据源配置详解 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨在Spring Boot中如何进行最佳实践的数据源…...

第1章 物联网模式简介---独特要求和体系结构原则

物联网用例的独特要求 物联网用例往往在功耗、带宽、分析等方面具有非常独特的要求。此外&#xff0c;物联网实施的固有复杂性&#xff08;一端的现场设备在计算上受到挑战&#xff0c;另一端的云容量几乎无限&#xff09;迫使架构师做出艰难的架构决策和实施选择。可用实现技…...

数据挖掘概览

数据挖掘(Data Mining)就是从大量的,不完全的,有噪声的,模糊的,随机的实际应用数据中,提取隐含在其中的,人们事先不知道的,但又是潜在有用的信息和知识的过程. 预测性数据挖掘 分类 定义&#xff1a;分类就是把一些新的数据项映射到给定类别中的某一个类别 分类流程&#x…...

【学习】软件测试中常见的文档类型及其作用

在软件开发的生命周期中&#xff0c;软件测试是确保产品质量的关键步骤。为了系统地进行测试活动&#xff0c;并保证测试结果的有效性和可追溯性&#xff0c;产生了一系列标准化的测试文档。这些文档不仅为测试人员提供了执行指南&#xff0c;而且为项目管理者和利益相关者提供…...

electron的托盘Tray

1.在主进程文件background.js中引入需要的文件 import { Tray, Menu } from "electron"; const path require("path");2.获取托盘图标 const baseSRC process.cwd(); //这里不能使用__dirname,使用dirname会直接获取dist_electron中的文件&#xff0c;…...

Harmony OS UI框架探索笔记

本文探讨了如何将现有的常用架构理论与Arkts和ArkUI结合起来&#xff0c;使代码更有条理&#xff0c;并利用Previewer快速调整布局&#xff0c;同时在不改变代码的情况下运行显示真实数据。 开发环境 Windows 11DevEco Studio 4.0 ReleaseBuild Version: 4.0.0.600, built on…...

transformers evaluate

☆ Evaluate https://huggingface.co/docs/evaluate/main/en/installation ★ 解决方案 常用代码 # 查看支持的评估函数 evaluate.list_evaluation_modules(include_communityTrue)# 加载评估函数 accuracy evaluate.load("accuracy")# load function descripti…...

【ONLYOFFICE深度探索】:ONLYOFFICE桌面编辑器8.1震撼发布,打造高效办公新境界

文章目录 一、功能完善的PDF编辑器&#xff1a;解锁文档处理新维度二、幻灯片版式设计&#xff1a;释放创意&#xff0c;打造专业演示三、改进从右至左显示&#xff1a;尊重多元文化&#xff0c;优化阅读体验四、新增本地化选项&#xff1a;连接全球用户&#xff0c;跨越语言障…...

C++系统相关操作4 - 获取CPU(指令集)架构类型

1. 关键词2. sysutil.h3. sysutil.cpp4. 测试代码5. 运行结果6. 源码地址 1. 关键词 关键词&#xff1a; C 系统调用 CPU架构 指令集 跨平台 实现原理&#xff1a; Unix-like 系统: 可以通过 uname -m 命令获取 CPU 架构类型。Windows 系统: 可以通过环境变量 PROCESSOR_A…...

whisper 实现语音转文字

准备需要转码的音频 https://support.huaweicloud.com/sdkreference-sis/sis_05_0039.html 编码转吗的代码 import whisperif __name__ "__main__":file_path "16k16bit.wav"model whisper.load_model("small")result model.transcribe(f…...

使用VLLM部署llama3量化版

1.首先去魔塔社区下载量化后的llama3模型 git clone https://www.modelscope.cn/huangjintao/Meta-Llama-3-8B-Instruct-AWQ.git 2.跑起来模型 1&#xff09;python -m vllm.entrypoints.openai.api_server --model /home/cxh/Meta-Llama-3-8B-Instruct-AWQ --dtype auto --…...

计算机缺失OpenCL.dll怎么办,OpenCL.dll丢失的多种解决方法

在使用电脑的过程中&#xff0c;我们经常会遇到一些开机弹窗问题。其中&#xff0c;开机弹窗找不到OpenCL.dll是一种常见的情况。本文将详细介绍开机弹窗找不到OpenCL.dll的原因分析、解决方法以及预防措辞&#xff0c;帮助大家更好地解决这一问题。 一&#xff0c;了解OpenCL.…...

git 本地代码管理

简介 git 能实现本地代码多个更改版本的管理和导出。 首先复制好项目&#xff08;参考 git clone 别人项目后正确的修改和同步操作 中的前三步&#xff09; 实操 克隆原始项目 首先&#xff0c;从远程仓库克隆项目到本地&#xff1a; git clone https://github.com/libo-huan…...

Docker(九)-Docker运行redis6.0.8容器实例

1.宿主机新建目录存放redis.conf文件 目的&#xff1a;运行redis容器实例时使用自己的配置文件2.运行redis容器实例 docker run -d -p 6379:6379 --privilegedtrue -v 【宿主机配置文件目录】:/etc/redis/redis.conf -v 【宿主机数据目录】:/data --nameredis6.0.8 redis:6.0…...

似然 与 概率

概率似然概率函数与似然函数的关系似然与机器学习的关系最大似然估计 似然与概率分别是针对不同内容的估计和近似 概率 概率&#xff1a;概率表达给定参数 θ \theta θ下样本随机向量 X x \textbf{X} {x} Xx的可能性。 概率密度函数的定义形式是 f ( x ∣ θ ) f(x|\t…...

Tableau数据可视化与仪表盘搭建

Tableau的主要目的 数据赋能和数据探索。 数据赋能&#xff1a; 1.分析师可以将数据看板发布到线上给其他部门使用 2.自动更新看板 3.自由下载数据 4.线上修改图表 5.邮件发送数据 6.设置数据预警 数据探索&#xff1a; 1.支持亿级数据的连接和处理 2.自由地对字段进行各种…...

web前端——HTML

目录 一、HTML概述 1.HTML是什么&#xff1f; 2.HTML具体化解释 二、HTML基本语法 1.声明 2. Head头标签 3.body身体标签 4.一个html的基本结构 5.标签 6.标签属性 ①属性的格式 ②属性的位置 ③添加多个属性 三、基本常用标签 1.超链接 2.图像标签 ①图像标…...

C++的模板(九):模板的实例化问题

前文子系统中的例子&#xff0c; SubSystem内部用了STL库的map模板: template <class Event, class Response> class SubSystem{ public:map<Event*, Response*> table; public:void bind(Event *e, Response *r);void unbind(Event *e); public:int OnMessage(E…...

Clickhouse Projection

背景 Clickhouse一个视图本质还是表&#xff0c;只支持一种order By&#xff0c;不然要维护太多的视图。 物化视图能力有限。 在设计聚合功能时&#xff0c;考虑使用AggregatingMergeTree表引擎&#xff0c;现在有了projections&#xff0c;打算尝试使用一下 操作 ADD PROJE…...

放烟花短视频素材去哪里找?去哪里下载?烟花素材网分享

在当代社会&#xff0c;短视频凭借其独有的魅力成为大众传递情感、记录生活、分享快乐的新兴方式。特别是在庆祝节日和特殊时刻时&#xff0c;烟花的绚丽效果常常被用来吸引观众的目光&#xff0c;成为视频作品中的亮点。然而&#xff0c;对于短视频制作者来说&#xff0c;寻找…...

爬虫笔记14——爬取网页数据写入MongoDB数据库,以爱奇艺为例

下载MongoDB数据库 首先&#xff0c;需要下载MongoDB数据库&#xff0c;下载的话比较简单&#xff0c;直接去官网找到想要的版本下载即可&#xff0c;具体安装过程可以看这里。 pycharm下载pymongo库 pip install pymongo然后在在python程序中我们可以这样连接MongoDB数据库…...

Jenkins教程-10-发送飞书测试报告通知

上一小节我们学习了发送企业微信测试报告通知的方法&#xff0c;本小节我们讲解一下发送飞书测试报告通知的方法。 1、自动化用例执行完后&#xff0c;使用pytest_terminal_summary钩子函数收集测试结果&#xff0c;存入本地status.txt文件中&#xff0c;供Jenkins调用 conft…...

Swift开发——简单App设计

App的界面设计需要具有大量的图像并花费大量的时间,这样的应用不方便学习和交流,这里重点介绍SwiftUI界面元素的用法,通过简单App设计过程的讲解,展示图形用户界面应用程序的设计方法。 01、简单App设计 按照9.1节工程MyCh0901的创建方法,创建一个新的工程MyCh0902,此时工…...

Python操作mysql

一、python连接mysql 1.python连接mysql代码示例 from pymysql import Connection# 获取到mysql数据艰苦的连接对象 conn Connection(hostlocalhost,port3306,userroot,passwordroot ) # 打印mysql数据库软件信息 print(conn.get_server_info()) # 关闭到数据库的连接 conn.…...

监控易产品升级动态:V7.6.6.15版本全面升级

随着信息技术的不断发展&#xff0c;企业对系统监控和数据管理的需求日益增加。为了满足广大用户的实际需求&#xff0c;监控易团队经过不懈努力&#xff0c;成功推出了V7.6.6.15版本&#xff0c;对产品进行了全面升级和优化。本次升级不仅增强了产品的稳定性和可靠性&#xff…...

Vue3 + Element-plus + TS —— 动态表格自由编辑

前期回顾 《 穿越时空的代码、在回首&#xff1a;Evil.js两年后的全新解读 》-CSDN博客 Vue3 TS Element-Plus 封装Tree组件 《亲测可用》_ https://blog.csdn.net/m0_57904695/article/details/131664157?spm1001.2014.3001.5501 态表格 自由编辑 目录 ♻️ 效果图…...

虚拟机配置桥接模式

背景 因为要打一些awd比赛,一些扫描工具什么的,要用到kali,就想着换成一个桥接模式 但是我看网上的一些文章任然没弄好,遇到了一些问题 前置小问题 每次点开虚拟网络编辑器的时候都没有vmnet0,但是点击更改的时候却有vmnet0 第一步: 点击更改设置 第二步: 把wmnet0删掉 …...

星戈瑞DSPE-SS-PEG-CY7近红外花菁染料

DSPE-SS-PEG-CY7是一种具有复杂而精细结构的复合纳米材料&#xff0c;其在生物医学领域的应用增多。该材料结合了磷脂&#xff08;DSPE&#xff09;、聚乙二醇&#xff08;PEG&#xff09;、二硫键&#xff08;SS&#xff09;以及荧光染料&#xff08;CY7&#xff09;的特点&am…...

LeetCode:503. 下一个更大元素 II(Java 单调栈)

目录 503. 下一个更大元素 II 题目描述&#xff1a; 实现代码与解析&#xff1a; 单调栈 原理思路&#xff1a; 503. 下一个更大元素 II 题目描述&#xff1a; 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&…...

代码重构:解读重构概念及重构实战

目录 一.重构是什么(what) 1.重构的本质 2.重构≠性能优化 二.重构的目的(why) 1.去写好的代码 2.去写更灵活的代码 三.重构的时机(when and where) 1.何时重构 2.何时不重构 四.重构的方法(how) 1.重构关键核心 2.重构方法 3.重构工具 小结 一.重构是什么(what)…...

java.util.Optional类介绍

java.util.Optional 是 Java 8 引入的一个容器类,用于表示可能包含或不包含非空值的对象。它的设计初衷是为了减少程序中的空指针异常(NullPointerException),并使代码更加简洁和易读。 Optional 类的介绍 1. 特点 避免显式的 null 检查:使用 Optional 可以避免显式的 n…...

PhotoShop自动生成号码牌文件

1、说明 设计卡牌的时候&#xff0c;遇到自动生成编号&#xff0c;从01500到-02500&#xff0c;一个一个的手写&#xff0c;在存储保存成psd格式的文件&#xff0c;会很耗时。 下面将介绍如何使用ps自动生成psd格式的文件 2、使用excle生成数字 从01500到-02500 第一步&…...

02逻辑代数与硬件描述语言基础

2.1 逻辑代数&#xff08;简单逻辑的运算&#xff09; 2.2 逻辑函数的卡诺图&#xff08;从图论的角度&#xff09;化简法 2.3 硬件描述语言Verilog HDL基础&#xff08;研究生阶段才用得到&#xff09; 要求&#xff1a; 1、熟悉逻辑代数常用基本定律、恒等式和规则。 2、掌握…...