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

分享几个优秀开源免费管理后台模版,建议收藏!

大家好,我是 jonssonyan

今天和大家分享一些免费开源的后台管理页面,帮助大家快速搭建前端页面。为什么要用模板?道理很简单,原因是方便我们快速开发。我们不应该花太多的时间在页面调整上,而应该把精力放在核心逻辑和业务上。

以我自己为例,说一下我自己在开发过程中的切身感受。我是一名后端程序员,同时也做一些前端开发的事情,所以我的后端开发速度肯定是比前端开发要快的。每次写新项目,第一后端开发比较熟练,第二代码可以复用,所以后端一般很快就能写完。但是前端就恰恰相反,第一前端开发没有后端熟练,第二页面尽量不要复用。为什么页面尽量不要复用?主要原因是防止用户审美疲劳,让认识你的用户感觉怎么你开发的系统都是一套 UI?所以这时候我们备用一些前端后台管理模板就非常重要,能多备几个就多备几个,在自己需要的时候,几分钟就可以把前端搭建完毕,立刻进入到业务开发界面,省时省力,何乐而不为?

另外有些人可能不太善用模板代码,有时候模板只是一个大致的框架,无论是前端模板还是后端模板,都不可能 100%符合我们的需求,需要我们按照自己的需求在上面更改。核心思路是将不需要的代码删掉,有时候系统不是越复杂越好,往往越简单,后期越容易维护。

善用模板的技巧就是,首先,找一个符合自己技术栈的模板,比如,你擅长的技术栈是 Vue3+TS+Vite,那你找的模板就不能是 Vue2+JS 的。其次,模板最好是开源并且持续更新,别等模板过了一段时间被商业化了,那自己就成了接盘侠,后期代码只能自己维护了,导致自己的页面有了 Bug 没有及时修复,损失的还是我们自己,最好是去 GitHub 上面找模板,而且提交记录最好是最近的时间(至少最近一年要有提交记录吧)。其次,模板生态要好,要满足绝大多数场景,组件足够的丰富。 比如我们在开发过程中最常用的表格组件、上传组件、登录组件、按钮、标签等等。最后,模板的兼容性要好。 对于常见的浏览器和常见的客户端要兼容。自适应要做好,方便电脑和手机上面用户体验良好。

所以接下来我给大家推荐一些常用的后台管理模板或者一些后台管理模板的搜索网站,主要以最常见的 Vue 和 React 模板为例希望对大家有所帮助。

builtatlightspeed

https://www.builtatlightspeed.com/

builtatlightspeed 是一个模板搜索网站,里面的模板绝大大多数都是免费的。最人性化的是可以按照技术栈搜索我们想要的模板。不仅仅是后台管理模板,这个模板网站还可以搜索比如企业官网、宣传页等网站模板。真的是一个宝藏网站,强烈推荐。

Ant Design Pro

GitHub:https://github.com/ant-design/ant-design-pro/

文档:https://pro.ant.design/zh-CN/

Ant Design 是我认为生态最好的 UI 框架了。兼容 React 和 Vue,企业级后台开发最常用的前端脚手架。 Ant Design Pro 则可以帮助我们快速搭建一个后台管理模板,只需要输入一行命令,等待一段时间就可以拥有一个完善的模板。我认为唯一的缺点就是功能太完善,我们改造时候删除的代码太多,大部分功能我们是用不到的,如果能出一个精简版就更好了。

npm i @ant-design/pro-cli -g // 安装Ant Design Pro脚手架
pro create myapp // 创建Ant Design Pro模板项目

Vben Admin

GitHub:https://github.com/vbenjs/vue-vben-admin/tree/thin

ps:GitHub 地址是精简版,完整版在 main 分支

Vben Admin 是一个类似 Ant Design Pro 的开箱即用的前端框架,UI 和色系和 Ant Design 是不一样的,生态也比较好,组件也比较丰富。适用于绝大多数开发场景。

Vue Admin Template

GitHub:https://github.com/PanJiaChen/vue-admin-template

GitHub:https://github.com/PanJiaChen/vue-element-admin

GitHub:https://github.com/Armour/vue-typescript-admin-template

这三个模板统一可以称为 Vue Template,算作是一个生态里面的东西。

技术栈如下:

  • vue-admin-template:Vue2+JS
  • vue-element-admin:Vue2+JS
  • vue-typescript-admin-template:Vue3+TS

ps: vue-admin-template 是 vue-element-admin 的精简版

根据自己的需要选择适合自己的模板,这三个模板页面的色系和组件样式是一样的。使用方法就是直接在 GitHub 上面 git clone 拉取到本地就可以了。

Mantis is React Dashboard Template

GitHub:https://github.com/codedthemes/mantis-free-react-admin-template

这是一个 React 模板,自适应做的很好,而且组件也比较丰富。UI 框架使用的是 MUI。

本期就和大家分享了一些我觉得还不多的后台管理模板资源,如果对你有帮助,可以点一个免费的赞,我是 jonssonyan,我们下期再见。

相关文章:

分享几个优秀开源免费管理后台模版,建议收藏!

大家好,我是 jonssonyan 今天和大家分享一些免费开源的后台管理页面,帮助大家快速搭建前端页面。为什么要用模板?道理很简单,原因是方便我们快速开发。我们不应该花太多的时间在页面调整上,而应该把精力放在核心逻辑和…...

BFS模板:844. 走迷宫

给定一个 nmnm 的二维整数数组,用来表示一个迷宫,数组中只包含 00 或 11,其中 00 表示可以走的路,11 表示不可通过的墙壁。 最初,有一个人位于左上角 (1,1)(1,1) 处,已知该人每次可以向上、下、左、右任意…...

re学习(37)DASCTF 2023 0X401七月暑期挑战赛 controflow

程序通过改变栈里面的返回地址来控制程序的控制流 从而达到混淆的效果 左侧有许多被hook的函数 在每个函数开头设置断点 然后观察程序的运行流程 会发现输入的数据会进行 异或 相加 异或 相减 相乘 异或等操作 要注意部分运算的索引是 从[10]开始的 具体思路参考&#xf…...

数字IC前端学习笔记:数字乘法器的优化设计(进位保留乘法器)

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 阵列乘法器设计中限制乘法器速度的是随着数据位宽而迅速增大的串行进位链,如果使用进位保留加法器,则可以避免在设计中引入较长时间的等待&…...

prority_queue的学习

优先级队列(Priority Queue)是一种抽象数据类型,它类似于普通的队列或堆栈,但每个元素都有一个关联的优先级,这个优先级决定了元素在队列中的位置和被访问的顺序。在优先级队列中,具有最高优先级的元素通常…...

【vue3】toRef与toRefs的使用,toRef与ref的区别

假期第四篇,对于基础的知识点,我感觉自己还是很薄弱的。 趁着假期,再去复习一遍 1、toRef与toRefs 创建一个ref对象,其value值指向另一个对象中的某个属性 语法:const name toRef(person,‘name’&#xf…...

信息论基础第二章部分习题

2.5 证明若H(Y|X)0,则Y是X的函数 若 H ( Y ∣ X ) 0 H(Y|X) 0 H(Y∣X)0,意味着在已知 X X X 的条件下, Y Y Y 的不确定性为零,即给定 X X X 的值,我们完全确定了 Y Y Y 的值。这表明 Y Y Y 的取值完全由 X X…...

信息化发展73

数字经济 数字经济是继农业经济、工业经济之后的更高级经济形态。从本质上看,数字经济是一种新的技术经济范式,它建立在信息与通信技术的重大突破的基础上,以数字技术与实体经济融合驱动的产业梯次转型和经济创新发展的主引擎,在…...

560. 和为 K 的子数组

题目描述 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的连续子数组的个数 。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例 2: 输入:nums [1,2,3], k 3 输出:2…...

24 mysql all 查询

前言 这里主要是 探究一下 explain $sql 中各个 type 诸如 const, ref, range, index, all 的查询的影响, 以及一个初步的效率的判断 这里会调试源码来看一下 各个类型的查询 需要 lookUp 的记录 以及 相关的差异 此系列文章建议从 mysql const 查询 开始看 测试表结构…...

【Excel单元格数值统计】python实现-附ChatGPT解析

1.题目 Excel单元格数值统计 知识点: 递归、循环数组 时间限制:2s 空间限制:256MB 限定语言:不限 题目描述: Excel工作表中对选定区域的数值进行统计的功能非常实用。仿照Excel的这个功能,请对给定表格中选中区域中的单元格进行求和统计,并输出统计结果。 为简化计算,假设当…...

爬虫项目实战——爬取B站视频

目标:对B站视频详情页url进行视频的爬取。 注:由于B站的音频和视频的链接是分开的,所以在提取是需要分别提取,然后进行合成。 这里只管提取,合成的工作以后再说。 具体步骤 发送请求 对于视频详情页url地址发送请求 …...

关掉在vscode使用copilot时的提示音

1. 按照图示的操作File --> Preferences --> Settings 2. 搜索框输入关键字Sound,因为是要关掉声音,所以找有关声音的设置 3. 找到如下图所示的选项 Audio Cues:Line Has Inline Suggetion,将其设置为Off 这样,就可以关掉suggest code时…...

【有限域除法】二元多项式除法电路原理及C语言实现

二元多项式除法电路原理 例: g ( x ) = x 4 + x 2 + x + 1 g(x)=x^4 + x^2+x+1...

RabbitMQ核心总结

AMQP协议核心概念 RabbitMQ是基于AMQP协议的,通过使用通用协议就可以做到在不同语言之间传递。 server:又称broker,接受客户端连接,实现AMQP实体服务。 connection:连接和具体broker网络连接。 channel&#xff1a…...

Unicode与UTF-8

软件开发中乱码问题经常遇到,Unicode,UTF-8, ASCII等都是高频词语,不过具体是啥意思其实都不清楚。这个周末研究了一下,略有了解,记录一下。 Unicode Unicode本身是纯理论的东西,和具体计算机实现无关。它…...

A : DS单链表--类实现

Description 用C语言和类实现单链表&#xff0c;含头结点 属性包括&#xff1a;data数据域、next指针域 操作包括&#xff1a;插入、删除、查找 注意&#xff1a;单链表不是数组&#xff0c;所以位置从1开始对应首结点&#xff0c;头结点不放数据 类定义参考 #include<…...

React Hooks —— ref hooks

什么是Hooks Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。 React Hooks的优点 简洁 从语法上来说&#xff0c;写的代码少了上手非常简单 基于函数式编程理念&#xff0c;只需要掌握一些JavaScript基础知识与生命周期相关的知识不…...

泛型与Gson解析

/*** 回调接口的一种实现* 用于把网络返回的json字符串转换成参数化类型* 泛型 T 就是用户输入的javaBean的类型*/ public abstract class HttpCallback<T> implements ICallback {Overridepublic void onSuccess (String result) {// result就是网络回来的数据// 把这个…...

c++使用ifstream和ofstream报错:不允许使用不完整的类型

学习《C Primer》关于IO库的部分&#xff0c;输入284页的的代码&#xff0c;出现了报错&#xff1a; 不允许使用不完整的类型 原来的代码&#xff1a; #include <iostream> #include <vector> using namespace std;int main(int argc, char **argv) {ifstream in…...

调试器通用波形显示工具

前言&#xff1a;事情起因是我们实验室买了个无线调试器是CMSIS-DAP的&#xff0c;无法使用J-SCOPE显示波形来方便调PID&#xff0c;所以我就在网上找到了个开源工具链接&#xff1a;http://t.csdnimg.cn/ZqZPY使用方法&#xff1a;工具是好工具&#xff0c;就是没有使用手册&a…...

Linux中getopt函数、optind等变量使用详解

getopt函数、optind等变量使用详解 最近在学习《Unix网络编程》vol2时&#xff0c;发现书中例子经常使用一个命令行解析getopt函数&#xff0c;因为函数声明比较特别&#xff0c;根据自己摸索&#xff0c;遂总结出使用方法。 1. getopt函数的声明 该函数是由Unix标准库提供的…...

RDP协议流程详解(二)Basic Settings Exchange 阶段

RDP连接建立过程&#xff0c;在Connection Initiation后&#xff0c;RDP客户端和服务端将进行双方基础配置信息交换&#xff0c;也就是basic settings exchange阶段。在此阶段&#xff0c;将包含两条消息Client MCS Connect Initial PDU和Server MCS Connect Response PDU&…...

实时人脸五观检测:基于libfacedetection(CNN模型)

一、前言 随着人工智能技术的不断发展,人脸检测已成为计算机视觉领域的重要应用之一。人脸检测是一种将输入图像中的人脸位置和轮廓提取出来的技术,广泛应用于人脸识别、智能监控、人机交互等领域。利用libfacedetection开源的人脸检测库,实现人脸检测。 libfacedetection…...

图像和视频上传平台Share Me

本文完成于 6 月&#xff0c;所以反代中&#xff0c;域名演示还是使用的 laosu.ml&#xff0c;不过版本并没有什么变化&#xff1b; 什么是 Share Me &#xff1f; Share Me 是使用 Next.js 和 PocketBase 的自托管图像和视频上传平台&#xff0c;具有丰富的嵌入支持和 API&…...

JavaScript 在前端开发中有什么应用?

JavaScript&#xff08;简称JS&#xff09;是一种脚本语言&#xff0c;广泛应用于前端开发中。作为Web前端三大基石之一&#xff08;HTML、CSS、JS&#xff09;&#xff0c;它可以使网页具备交互性、动态性和实时性&#xff0c;提高用户体验。在本文中&#xff0c;我将详细论述…...

【沐风老师】推荐2023年3DMAX的10个最佳插件!

推荐2023年3DMAX的10个最佳插件 3dMax是一款专业的三维建模、动画和渲染软件&#xff0c;供建筑师、工程师、游戏开发商和视觉效果艺术家使用。它提供了一系列用于建模、纹理、装配、动画和渲染3D对象和场景的工具。3ds Max包括粒子和流体模拟的高级功能&#xff0c;以及对各种…...

【visual studio 小技巧】项目属性->生成->事件

需求 我们有时会用到一些dll&#xff0c;需要把这些dll和我们生成的exe放到一起&#xff0c;一般我们是手动自己copy&#xff0c; 这样发布的时候&#xff0c;有时会忘记拷贝这个dll&#xff0c;导致程序运行出错。学会这个小技巧&#xff0c;就能实现自动copy&#xff0c;非…...

每日一题 279完全平方数(完全背包)

题目 完全平方数 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而…...

创意中秋与国庆贺卡 - 用代码为节日增添喜悦

目录 ​编辑 引言 贺卡的初始主题 - 中秋节 点击头像&#xff0c;切换至国庆主题 文本动画 用代码制作这个贺卡 获取完整代码&#xff08;简单免费&#xff09; 总结 引言 中秋佳节和国庆日是中国两个重要的传统节日&#xff0c;一个寓意团圆与祝福&#xff0c;另一个…...

黑客做网站/网站优化的方法与技巧

转载自&#xff1a;https://jingyan.baidu.com/article/ce4366492be6263773afd3ac.html 现在开源硬件的流行&#xff0c;很多国外开源硬件厂家会将电路图公开&#xff0c;例如Arduino&#xff0c;我们可以在官网下载到Arduino的Eagle文件&#xff0c;但是对于Eagle绘图软件很多…...

邯郸企业网站建设/百度手机版

./kafka-console-consumer.sh --zookeeper 127.0.0.1:2181 --topic test4 都是坑系列&#xff0c;启动消费者&#xff0c;发现一直报错consumer zookeeper is not a recognized option&#xff0c;搜索了半天 发现这是老的命令行 新时代的命令行是&#xff1a;./kafka-consol…...

自己建设网站需要审核吗/市场调研的五个步骤

填空题&#xff1a; 选择题&#xff1a; 判断题&#xff1a; 名词解释&#xff1a; 简答&#xff1a; 考前要读3&#xff08;精&#xff09;2&#xff08;简&#xff09;遍 算法题不要求算法实例&#xff0c;只要求过程。 不考课后题。...

上海港湾基础建设集团网站/做运营需要具备什么能力

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全生产模拟考试一点通&#xff1a;茶艺师&#xff08;中级&#xff09;考试题参考答案及茶艺师&#xff08;中级&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及茶艺师&#xff08;中级&#xff09;操…...

监控网站建设需要多少钱/站长之家的seo综合查询工具

4.1.1 介绍 Python 数字数据类型用于存储数值。 数据类型是不允许改变的,这就意味着如果改变数字数据类型的值&#xff0c;将重新分配内存空间4.1.2 分类 Number&#xff08;数字&#xff09;&#xff1a;int&#xff08;整形&#xff09;、float(浮点型)、bool&#xff08;布…...

网站上线准备工作/搜索引擎有哪些?

编辑&#xff1a;ll US1G-ASEMI恢复二极管决定因素是什么 型号&#xff1a;US1G 品牌&#xff1a;ASEMI 封装&#xff1a;SMA 电流&#xff1a;1A 电压&#xff1a;400V 正向电压&#xff1a;1.0V 引脚数量&#xff1a;2 芯片个数&#xff1a;1 恢复时间&#xff1a;…...