当前位置: 首页 > 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…...

对网站建设起到计划和指导的作用/最新百度快速排名技术

ubuntu18.04.5设置开机脚本报“/etc/rc.local: 17: /etc/rc.local: exit 0: not found”的问题 最近因工作需要&#xff0c;在编写代码时经常需要使用Android Studiu自带的虚拟机&#xff0c;但是虚拟机本身需要修改权限&#xff0c;使用chmod修改权限又只能暂时生效&#xff…...

大城 网站建设/成都公司网站seo

本帖最后由 fengrui99 于 2019-7-8 11:20 编辑这是一个寂寞的工作日&#xff0c;因为没有女盆友所以很寂寞&#xff0c;因为很寂寞所以来写教程。希望再看教程的你也是单身&#xff01;啊,知道你是单身枫瑞贼开心&#xff01;爽的一B&#xff01;&#xff01;&#xff01;起初我…...

本地备份wordpress/刷关键词排名seo软件软件

MYSQL数据库-库表操作零、前言一、库的操作1、创建数据库2、字符集和校验规则3、查看数据库4、修改数据库5、数据库删除6、备份和恢复7、查看连接情况二、表的操作1、创建表2、查看表3、修改表4、删除表4、删除表零、前言 本章主要学习MYSQL数据库中库操作和表操作 一、库的操作…...

潍坊点睛做网站怎么样/goole官网

在上一篇文章中我们了解到颜色在甘特图中也有不同的作用。其中颜色在甘特图中扮演着三个角色&#xff0c;才能使甘特图对用户有意义。 颜色决定甘特图的外观。颜色还可以用来定义甘特图的语义。因此&#xff0c;它们帮助用户更快地理解甘特图所呈现的完整且常常复杂的现实。颜…...

把网站放到服务器上/免费com域名注册永久

11月24日消息&#xff0c;在上海举行的SyScan360亚太前瞻信息安全技术年会上&#xff0c;360车联网安全中心宣布正式成立&#xff0c;该中心由360公司联合多家高校、汽车及零部件企业组建&#xff0c;是国内第一个专业从事汽车及车联网的安全保护的跨行业合作机构。 信息安全成…...

wordpress 检索文件夹/泰安百度推广代理商

https://www.fghrsh.net/post/123.html...