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——

福利:

扫码回复【酒店】可免费领取酒店管理系统源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/36674.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 3 的 <script setup> 语法糖中的e

在 Vue 3 的 <script setup> 语法糖中&#xff0c;可以通过直接在模板的事件监听器中访问事件对象&#xff08;通常命名为 e 或 event&#xff09;来传递它到方法。 以下是一个简单的例子&#xff0c;展示了如何在 Vue 3 的 <script setup> 中获取到 mousemove 事…

Windows 环境下 MySQL Server 清空 Log 文件命令

MySQL Community Server for Windows 下载&#xff1a; MySQL :: Download MySQL Community Server 清空 Log 文件步骤命令&#xff08;MySQL Server 8.0 为例&#xff09;&#xff1a; 1.杀掉 MySQL Workbench 进程 2.删除路径文件 C:\ProgramData\MySQL\MySQL Server 8.0\Dat…

基于YOLOv5+pyqt5的口罩佩戴检测系统(PyQT页面+YOLOv5模型+数据集)

简介 在各种工作环境和公共场所,确保人们正确佩戴口罩对个人防护和公共卫生至关重要,尤其是在医疗设施、制造业车间和拥挤的公共交通中。为了满足这一需求,我们开发了一种基于YOLOv5目标检测模型的口罩佩戴检测系统。本项目不仅实现了高精度的口罩佩戴检测,还设计了一个可…

学习提示词工程

去年 11 月 8 日&#xff0c;新加坡政府科技局&#xff08;GovTech&#xff09;组织举办了首届 GPT-4 提示工程&#xff08;Prompt Engineering&#xff09;竞赛。数据科学家 Sheila Teo 最终夺冠&#xff0c;成为最终的提示女王&#xff08;Prompt Queen&#xff09;。之后&am…

Swagger2及常用校验注释说明

Api(value "后台用户管理") RestController RequestMapping("bossuser") public class BossUserController {ApiOperation(value "测试接口")PostMapping("test")public String testUser(Valid RequestBody TestUser user) {LOG.inf…

机器学习之集成学习

一&#xff1a;概念 顾名思义集成学习就是用多个其他的算法结合起来使用 对于“其他算法”有同类和同质的区别&#xff0c;同质指的是所用的算法都是同一类型的&#xff0c;比如决策树和神经网络&#xff0c;这种也叫基学习器。反之亦然&#xff0c;但一般使用的是同质的。 …

6种高效便捷的移动硬盘加密软件,总有一款适合你

想要给自己移动硬盘内的文件/文件夹加密来保护数据隐私&#xff0c;防止重要信息泄露&#xff1f;使用电脑文件夹加密工具可以轻松帮您解决&#xff01;面对市面上众多的加密工具&#xff0c;如何选择成为一大难题。本文将为您提供一份详细的挑选指南&#xff0c;帮助您选择最合…

Java程序员接单的十条“野路子”,分分钟收入20K!

Java程序员除了主业工作外&#xff0c;也要适当扩展兼职接单这条路。毕竟Java接单可以说是Java程序员进行技术变现的最佳方式之一。 因为Java程序员兼职接单的难度相对更低&#xff0c;单量也比较可观&#xff0c;最重要的是性价比也很顶&#xff0c;且听我一一道来&#xff1a…

2024年6月24日 (周一) 叶子游戏新闻

图吧工具箱: 全名图拉丁吧硬件检测工具箱,是开源、免费、绿色、纯净的硬件检测工具合集,专为图钉及所有DIY爱好者制作,包含常用硬件测试和检测工具,月工JS必备! 土豆录屏: 免费、无录制时长限制、无水印的录屏软件 高手在民间 粉丝玩家打造精美《黄金树幽影》巨大插画虽然不是专…

大数据------额外软件、插件及技术------Linux(完整知识点汇总)

Linxu 不同领域的主流操作系统 桌面操作系统 WindowsMAac OSLinux 服务器端操作系统 UNIX&#xff08;付费&#xff09;LinuxWindows Server&#xff08;付费&#xff09; 移动设备操作系统 Android&#xff08;基于Linux开源&#xff09;IOS&#xff08;不开源&#xff09; 嵌…

深入理解代理模式(Proxy Pattern)及其实际应用

引言 在软件开发中&#xff0c;有时候我们需要在不改变现有代码的情况下添加一些功能&#xff0c;比如延迟初始化、访问控制、日志记录等。代理模式&#xff08;Proxy Pattern&#xff09;通过代理对象控制对原对象的访问&#xff0c;为现有代码添加了额外的功能。本篇文章将详…

Three.js鼠标拖动设置骨骼姿态

实现 根据SkinnedMesh生成Mesh 作为射线检测的目标&#xff08;射线检测SkinnedMesh存在不足 无法应用骨骼形变的顶点 &#xff09;点击模型 获取点击位置对应的骨骼拖拽鼠标设置骨骼旋转角度&#xff08;使用TransformControl选中点击的骨骼 设置轴为XYZE 并隐藏控件 主动触发…

PostgreSQL计算 queryid 原理

数据库版本 PG 16.1 queryid 是什么 queryid 是将 sql 规范化 (normalization) 后&#xff0c;通过哈希函数计算出来的 64 位整数。 以 SELECT id, data FROM tbl_a WHERE id < 300 ORDER BY data; 这条 SQL 为例。当我们在 PG 中执行这条 sql 时&#xff0c;内核在语义…

图论解法:哈密顿通路问题 Leetcode 2741. 特别的排列

描述 给你一个下标从 0 开始的整数数组 nums &#xff0c;它包含 n 个 互不相同 的正整数。如果 nums 的一个排列满足以下条件&#xff0c;我们称它是一个特别的排列&#xff1a; 对于 0 < i < n - 1 的下标 i &#xff0c;要么 nums[i] % nums[i1] 0 &#xff0c;要么…

【STM32-DAP 仿真器】

STM32-DAP 仿真器 ■ STM32-DAP仿真器介绍■ STM32-DAP仿真特点■ STM32-DAP仿真器实物图■ STM32-DAP高速 DAP 仿真器实物图■ STM32-DAP高速无线调试器 实物图■ STM32-DAP高速无线调试器示意图■ STM32-DAP高速无线调试器接线图■ STM32-DAP高速无线调试器接收端示意图 ■ S…

vcruntime140_1.dll是什么东东?vcruntime140_1.dll缺失的8个解决方法

当电脑出现找不到vcruntime140_1.dll,或vcruntime140_1.dll丢失无法打开软件怎么办&#xff1f;小编今天在本文详细为大家介绍解决方法与介绍vcruntime140_1.dll究竟是什么等vcruntime140_1.dll的问题。 一、vcruntime140_1.dll文件是什么 文件概述定义与功能 vcruntime140_…

【图像增强】基于retinex实现图像增强,SSR,MSR.MSRCR,MSRCP附Matlab代码

以下是基于Retinex算法实现图像增强的几种常见方法&#xff08;SSR、MSR、MSRCR、MSRCP&#xff09;的示例Matlab代码&#xff1a; SSR&#xff08;Single-Scale Retinex&#xff09;&#xff1a; matlab function enhanced_image SSR(image, sigma) log_image log(double(…

RuoYi-Vue-Plus (代码生成、Velocity模板引擎)

一、了解Velocity JSP、Freemarker、Velocity并称3大模版技术 下面是JSP、Freemarker和Velocity的简要对比表格: 特性/技术JSPFreemarkerVelocity设计目标视图层技术,与Servlet结合模板引擎,用于生成HTML模板引擎,用于生成各种文本输出与Java集成紧密集成,可以直接编写J…

CAN收发器

1、收发器的主要功能 &#xff08;1&#xff09;CAN通讯&#xff08;即报文收发&#xff09; MCU要CAN通讯&#xff1a;收发器模式切换至正常通讯模式&#xff08;Normal&#xff09;&#xff0c;正常通讯模式收发器能收能发。 MCU不要CAN通讯&#xff1a;把收发器切换至其它…

深入理解SQL优化:理论与实践的结合

深入理解SQL优化&#xff1a;理论与实践的结合 SQL优化是数据库性能优化的核心&#xff0c;通过优化SQL查询&#xff0c;可以极大地提高数据库的响应速度和资源利用效率。本文将以SQL优化的理论基础和实践应用为主线&#xff0c;结合具体案例&#xff0c;系统化地介绍如何有效…