gfast前端UI:基于Vue3与vue-next-admin适配手机、平板、pc 的后台开源模板

news2024/12/23 14:04:51

摘要


随着现代软件开发的高效化需求,一个能够快速适应不同设备、简化开发过程的前端模板变得至关重要。gfast前端UI,基于Vue3.x和vue-next-admin,致力于提供这样一个解决方案。本文将深入探讨gfast前端UI的技术栈、设计原则以及它如何适配手机、平板和PC,从而帮助开发者实现快速开发。

一、引言

在数字化时代,后台管理系统已成为企业和应用不可或缺的一部分。为满足市场对于快速开发、高效管理和良好用户体验的需求,gfast应运而生。作为一个基于Go Frame的后台管理系统,gfast不仅拥有完善的权限用户管理,还致力于提供一系列高效开发的工具和组件。本文重点介绍gfast的前端UI部分。

二、项目概览

基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。

gfast前端UI的技术栈包括Vue3.x、CompositionAPI、TypeScript、Vite、Element Plus、Vue-Router-Next和Next.Vuex。这些技术的选择旨在确保前端UI的高效性、可维护性和可扩展性。

  1. Vue3.x与CompositionAPI:Vue3.x引入了CompositionAPI,使得代码组织和逻辑复用更加灵活。

  2. TypeScript:通过引入TypeScript,增强了代码的类型安全性,提高了开发效率。

  3. Vite:采用Vite作为构建工具,利用其快速的热更新和启动速度,提高开发体验。

  4. Element Plus:作为Vue3的官方UI组件库,Element Plus提供了丰富的组件和样式,简化了界面开发。

  5. Vue-Router-Next:使用Vue-Router-Next进行路由管理,支持Vue3.x的路由功能。

  6. Next.Vuex:采用Next.Vuex作为状态管理库,实现应用的状态管理。

特征

  • 高生产率:几分钟即可搭建一个后台管理系统

  • 模块化:单应用多系统的模式,将一个完整的应用拆分为多个系统,后续扩展更加便捷,增加代码复用性。

  • 插件化:可通过插件的方式扩展系统功能

  • 认证机制:采用gtoken的用户状态认证及casbin的权限认证

  • 路由模式:得利于goframe2.0提供了规范化的路由注册方式,无需注解自动生成api文档

  • 面向接口开发

内置功能

  1. 用户管理:用户是系统操作者,该功能主要完成系统用户配置。

  2. 部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。

  3. 岗位管理:配置系统用户所属担任职务。

  4. 菜单管理:配置系统菜单,操作权限,按钮权限标识等。

  5. 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。

  6. 字典管理:对系统中经常使用的一些较为固定的数据进行维护。

  7. 参数管理:对系统动态配置常用参数。

  8. 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。

  9. 登录日志:系统登录日志记录查询包含登录异常。

  10. 在线用户:当前系统中活跃用户状态监控。

  11. 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。

  12. 代码生成:前后端代码的生成。

  13. 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。

  14. 在线构建器:拖动表单元素生成相应的HTML代码。

  15. 文件上传,缓存标签等。

项目使用模块化与插件化的方式开发,目前正在升级的插件有:cms系统、万能模型、微信管理、工单系统、问答系统、工作流引擎...,同时也欢迎大家把写好的插件上传到商城,我们来帮您实现技术变现,获取收益!

GFast开源以来得到了大家的很多支持,如果您愿意为GFast贡献代码或提供建议,请加微信:qixun007(备注:gfast)

演示地址

http://v3.g-fast.cn/sys 账号:demo 密码:123456

配置

项目数据库文件 resource/data/db.sql 创建数据库导入后修改配置 manifest/config/config.yaml.bak 复制改为manifest/config/config.yaml

其中gfToken配置

gfToken:
  cacheKey: "gfToken_"   #缓存前缀
  timeOut: 10800         #token超时时间(秒)
  maxRefresh: 5400       #token自动刷新时间(秒)
  multiLogin: true       #是否允许一个账号多人同时登录
  encryptKey: "49c54195e750b04e74a8429b17896586"    #加密key (32位)
  cacheModel: "redis"    #存储引擎 (memory使用内存|redis使用redis)
  excludePaths:          #排除不做登录验证的路由地址
    - "/api/v1/system/login"

项目为前后端分离,前端地址:

github地址:https://github.com/tiger1103/gfast-ui

gitee地址:https://gitee.com/tiger1103/gfast-ui

文档地址

http://doc.g-fast.cn/docs/gfast32

相关视频

https://space.bilibili.com/254192571/channel/seriesdetail?sid=223204

演示图

图片

图片

图片

图片

图片

图片

图片

感谢(排名不分先后)

gf框架 https://github.com/gogf/gf

vue-next-admin https://gitee.com/lyt-top/vue-next-admin

swaggo https://github.com/swaggo/swag

gtoken https://github.com/goflyfox/gtoken

casbin https://github.com/casbin/casbin

PHP开源工作流引擎tpflow https://gitee.com/ntdgg/tpflow

CCflow 国内最优秀的开源流程引擎 https://gitee.com/opencc/ccflow

安装 cnpm、yarn
  • 复制代码(桌面 cmd 运行) npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 复制代码(桌面 cmd 运行) npm install -g yarn

⚡ 使用说明

建议使用 cnpm,因为 yarn 有时会报错。node 版本[v16.x ~ v20.x)

# 克隆项目
git clone -b v3.2 https://gitee.com/tiger1103/gfast-ui.git
# 进入项目
cd gfast-ui
# 安装依赖
npm install --registry=https://registry.npmmirror.com
# 运行项目
npm run dev
# 打包发布
npm run build

三、跨平台适配设计

gfast前端UI的设计原则之一是跨平台适配,即适配手机、平板和PC等不同设备。通过结合Element Plus的响应式布局和vue-next-admin的灵活配置,gfast前端UI能够自动调整界面布局和组件大小,确保在各种设备上都能提供良好的用户体验。

四、平台简介与未来展望

gfast是基于全新Go Frame 2.3+Vue3+Element Plus开发的全栈前后端分离的管理系统。前端采用vue-next-admin、Vue和Element UI,提供了丰富的功能和高效的开发体验。未来,gfast将继续迭代和扩展其功能,如流程审批、工作流引擎、项目管理等,以满足更多场景和需求。

五、总结

gfast前端UI基于Vue3.x和vue-next-admin的跨平台后台开源模板,为开发者提供了一个高效、易用的前端解决方案。通过整合一系列前端技术栈和跨平台适配设计,gfast前端UI旨在减少工作量、提高开发效率并提供良好的用户体验。随着技术的不断发展和需求的不断变化,我们期待gfast在未来能够持续进步,为开发者带来更多价值和便利。

项目下载地址:

https://gitee.com/tiger1103/gfast-ui

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

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

相关文章

(补充):java各种进制、原码、反码、补码和文本、图像、音频在计算机中的存储方式

文章目录 前言一、进制1 逢几进一2 常见进制在java中的表示3 进制中的转换(1)任意进制转十进制(2)十进制转其他进制二、计算机中的存储1 计算机的存储规则(文本数据)(1)ASCII码表(2)编码规则的发展演化2 计算机的存储规则(图片数据)(1)分辨率、像素(2)黑白图与灰度…

Linux 复现Docker NAT网络

Linux 复现Docker NAT网络 docker 网络的构成分为宿主机docker0网桥和为容器创建的veth 对构成。这个默认网络命名空间就是我们登陆后日常使用的命名空间 使用ifconfig命令查看到的就是默认网络命名空间,docker0就是网桥,容器会把docker0当成路由&…

linux nethogs网络监控程序(端口监控、流量监控、上传流量、下载流量、进程监控进程网络)

文章目录 Nethogs 网络监控程序详解1. 引言2. Nethogs 的安装与运行2.1 安装 Nethogs- **Debian/Ubuntu**- **Fedora**- **Arch Linux** 2.2 运行 Nethogs 3. Nethogs 的使用详解3.1 基本界面- **PID**:进程的 ID。- **用户**:运行该进程的用户。- **程序…

【Linux网络】数据链路层【上】{初识数据链路层/以太网/路由表/MAC地址表/ARP表/NAT表}

文章目录 1.初识数据链路层2.认识以太网2.0前导知识以太网帧和MAC帧CMSA/CD以太网的最小帧长限制是64字节IP层和MAC层 2.1以太网帧格式 3.预备知识计算机网络通信以太网和wifi路由表/MAC地址表/ARP表/NAT表/ACL表 用于同一种数据链路节点的两个设备之间进行信息传递。 1.初识数…

美团一面,你碰到过CPU 100%的情况吗?你是怎么处理的?

本文主要分为三部分 分析一下CPU 100%的常见原因 CPU 100%如何排查 回答这个问题的一个参考答案 CPU被打满的常见原因 1. 死循环 在实际工作中,可能每个开发都写过死循环的代码。 死循环有两种: 在 while、for、forEach 循环中的死循环。 无限递…

期末成绩单怎么单独发给家长,这个小工具超简单!

随着期末考试的落幕,老师们再次迎来了成绩处理的高峰期。传统的成绩单分发方式不仅耗时,还容易出错。但如今,有了易查分小程序,这一过程变得简便而高效。 易查分小程序,一个专为教师和家长设计的便捷工具,让…

[ruby on rails]部署时候产生ActiveRecord::PreparedStatementCacheExpired错误的原因及解决方法

一、问题: 有时在 Postgres 上部署 Rails 应用程序时,可能会看到 ActiveRecord::PreparedStatementCacheExpired 错误。仅当在部署中运行迁移时才会发生这种情况。发生这种情况是因为 Rails 利用 Postgres 的缓存准备语句(PreparedStatementCache)功能来…

【Apache Doris】周FAQ集锦:第 10 期

【Apache Doris】周FAQ集锦:第 10 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目! 在这个栏目中,每周将筛选社区反馈的热门问题和话题,重点回答并进行深入探讨。旨在为广大用户…

算法力扣刷题记录 四十五【110.平衡二叉树】

前言 二叉树篇继续 记录 四十五【110.平衡二叉树】 一、题目阅读 给定一个二叉树,判断它是否是 平衡二叉树。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:true示例 2: 输入:root [1,2,2,3,3…

【鸿蒙学习笔记】尺寸设置・width・height・size・margin・padding・

官方文档:尺寸设置 目录标题 width:设置组件自身的宽度height:设置组件自身的高度size:设置高宽尺寸margin:设置组件的外边距padding:设置组件的内边距 width:设置组件自身的宽度 参数为Length…

【零基础】学JS之APIS第三天

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

10分钟快速了解神经网络(Neural Networks)

神经网络是深度学习算法的基本构建模块。神经网络是一种机器学习算法,旨在模拟人脑的行为。它由相互连接的节点组成,也称为人工神经元,这些节点组织成层次结构。 Source: victorzhou.com 神经网络与机器学习有何不同? 神经网络是…

电脑资料丢失不用慌,5招教你恢复数据

在数字化时代,电脑资料的安全与完整对我们而言至关重要。然而,生活中总有一些小插曲,如意外删除、系统故障或病毒攻击等,导致电脑上的重要资料消失得无影无踪。面对这种情况,我们往往感到焦虑和无助。今天,…

LabVIEW心电信号自动测试系统

开发了一种基于LabVIEW的心电信号自动测试系统,通过LabVIEW开发的上位机软件,实现对心电信号的实时采集、分析和自动化测试。系统包括心电信号采集模块、信号处理模块和自动化测试模块,能够高效、准确地完成心电信号的测量与分析。 硬件系统…

在 SwiftUI 中的作用域动画

文章目录 前言简单示例动画视图修饰符使用多个可动画属性使用 ViewBuilder总结 前言 从一开始,动画就是 SwiftUI 最强大的功能之一。你可以在 SwiftUI 中快速构建流畅的动画。唯一的缺点是每当我们需要运行多步动画或将动画范围限定到视图层次结构的特定部分时&…

网络规划设计师教程(第二版) pdf

网络规划设计师教程在网上找了很多都是第一版,没有第二版。 所以去淘宝买了第二版的pdf,与其自己独享不如共享出来,让大家也能看到。 而且这个pdf我已经用WPS扫描件识别过了,可以直接CtrlF搜索关键词,方便查阅。 链接…

股指期货存在的风险有哪些?

股指期货因其标的物的特殊性,其面临的风险类型十分复杂,主要面临的一般风险和特有风险如下: 一般风险 从风险是否可控的角度,可以划分为不可控风险和可控风险;从交易环节可分为代理风险、流动性风险、强制平仓风险&…

linux 安装redis 遇到问题解决方案

1.当下载了redis包时(version:6.0.6) 进入解压后的redis目录(这里采用tar包安装) 当执行make命令时 如果遇到如下情况: 查看当前服务起的gcc 版本:因为redis需要c编译器编译 gcc -v centos 7 …

使用亮数据代理IP+Python爬虫批量爬取招聘信息训练面试类AI智能体

本文目录 一、引言二、开发准备三、代码开发四、使用亮数据进行高效爬取4.1 为什么需要亮数据4.2 如何使用亮数据 五、使用数据训练AI智能体六、 总结 一、引言 在当今AI迅速发展的时代,招聘市场正经历着前所未有的变革。传统的招聘方式已难以满足双方的需求。AI智…

Transformer模型:Postion Embedding实现

前言 这是对上一篇WordEmbedding的续篇PositionEmbedding。 视频链接:19、Transformer模型Encoder原理精讲及其PyTorch逐行实现_哔哩哔哩_bilibili 上一篇链接:Transformer模型:WordEmbedding实现-CSDN博客 正文 先回顾一下原论文中对Posit…