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

摘要


随着现代软件开发的高效化需求,一个能够快速适应不同设备、简化开发过程的前端模板变得至关重要。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.rhkb.cn/news/376361.html

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

相关文章

Neo4j:图数据库的革命性力量

Neo4j 首席技术官 prathle 撰写了一篇出色的博文,总结最近围绕 GraphRAG 的热议、我们从一年来帮助用户使用知识图谱 LLM 构建系统中学到的东西,以及我们认为该领域的发展方向。Neo4j一时间又大火起来,本文将带你快速入门这神奇的数据库。 前…

sentinel源码分析: dashboard与微服务的交互、pull模式持久化

文章目录 原始方式微服务端规则如何保存规则如何加载进内存微服务端接收控制台请求控制台推送规则总结 pull拉模式官方demo如何整合Spring Cloud整合Spring Cloud 前置知识 SentinelResource的实现原理、SphU.entry()方法中ProcessorSlotChain链、entry.exit() 建议先会使用se…

秋招Java后端开发冲刺——MyBatisPlus总结

一、 基本知识 1. 介绍 yBatis-Plus 是一个 MyBatis 的增强工具,在 MyBatis 的基础上增加了大量功能和简化操作,以提高开发效率。 2. 特点 无侵入:只做增强不做改变,引入它不会对现有项目产生影响。依赖少:仅仅依赖 …

谈谈软件交互设计

谈谈软件交互设计 交互设计的由来 交互设计(Interaction Design)这一概念,最初是由IDEO创始人之一Bill.Moggridge(莫格里奇)1984年在一次会议上提出。他设计了世界上第一台笔记本电脑Compass,并写作出版了在交互设计领域影响深远的《Designing Interactions》一书,被称…

mqtt.fx连接阿里云

本文主要是记述一下如何使用mqtt.fx连接在阿里云上创建好的MQTT服务。 1 根据MQTT填写对应端口即可 找到设备信息,里面有MQTT连接参数 2 使用物模型通信Topic,注意这里的post说设备上报,那也就是意味着云端订阅post;set则意味着设…

Linux内核编译安装 - Deepin,Debian系

为什么要自己编译内核 优点 定制化:你可以根据自己的硬件和需求配置内核,去掉不必要的模块,优化性能。性能优化:移除不需要的驱动程序和特性,减小内核体积,提高系统性能。最新特性和修复:获取…

【密码学】从有限状态自动机到密钥流生成器

本文是对流密码内容的拓展,在流密码中种子密钥通过一个伪随机数生成器产生一个与明文等长的伪随机密钥流。而本文的内容就是在回答这样两个问题: 伪随机密钥流是如何生成的?流密码、流密钥生成器和有限状态自动机之间是什么关系?…

Mac和VirtualBox Ubuntu共享文件夹

1、VirtualBox中点击设置->共享文件夹 2、设置共享文件夹路径和名称(重点来了:共享文件夹名称) 3、保存设置后重启虚拟机,执行下面的命令 sudo mkdir /mnt/share sudo mount -t vboxsf share /mnt/share/ 注:shar…

Gitea 仓库事件触发Jenkins远程构建

文章目录 引言I Gitea 仓库事件触发Jenkins远程构建1.1 Jenkins配置1.2 Gitea 配置引言 应用场景:项目部署 I Gitea 仓库事件触发Jenkins远程构建 Gitea支持用于仓库事件的Webhooks 1.1 Jenkins配置 高版本Jenkins需要关闭跨域限制和开启匿名用户访问 在Jenkins启动前加入…

东软“引战”国家队 通用技术“补链”大国重器

向来低调温和的东软创始人刘积仁,这一次抛出了“王炸”级的资产交易。 7月3日,《多肽链》获得一则足以引爆国内医疗设备行业的投资信息:被东软集团视为核心资产、掌上明珠的东软医疗,成功引入通用技术集团资本有限公司与中国国有…

华为配置蓝牙终端定位实验

个人主页:知孤云出岫 目录 配置蓝牙终端定位示例 业务需求 组网需求 数据规划 配置思路 配置注意事项 操作步骤 配置文件 配置蓝牙终端定位示例 组网图形 图1 配置蓝牙终端定位示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业…

用HTML和CSS实现提示工具(tooltip)及HTML元素的定位

所谓提示工具,是指将鼠标移动到某个HTML元素(工具)时会显示一些提示内容(提示文本),而鼠标移出工具元素的范围时提示文本就消失了。考虑到提示文本元素应当在鼠标进入工具元素时显示,鼠标离开工…

【VS2019】安装下载库HtmlAgilityPack,可解析 HTML (图文详情)

目录 0.背景 1.环境 2.详细步骤 0.背景 项目需要&#xff0c;搭建WCF服务&#xff0c;需求是输入一个string类型字符串&#xff08;网页代码&#xff0c;如<html><body><p>Hello, <b>World</b>!</p></body></html>&#xf…

《代理选择与反爬虫策略探究:如何优化网络爬虫效率与稳定性》

代理IP如何选以及常见反爬策略 为什么需要代理&#xff1f; 因为有的网站会封IP&#xff0c;用户如果没有登录&#xff0c;那IP就是身份标识&#xff0c;如果网站发现用户行为异常就非常可能封IP 什么是代理IP 就是让一个人帮你转交请求&#xff0c;帮你转交的人对面不熟&a…

<数据集>猫狗识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3686张 标注数量(xml文件个数)&#xff1a;3686 标注数量(txt文件个数)&#xff1a;3686 标注类别数&#xff1a;2 标注类别名称&#xff1a;[cat, dog] 序号类别名称图片数框数1cat118811892dog24982498 使用标…

vmware 虚拟机扩容 centos 硬盘扩容 kylinos v10扩容

1. 虚拟机先扩容 1.1 关机&#xff0c;并点击系统&#xff0c;让他是点选状态&#xff0c;但是没开机 1.2 右击&#xff0c;点击最下方设置&#xff0c;点击硬盘 1.3 点击扩展磁盘 1.4 选择你需要扩容的大小&#xff0c;数字为总大小 完成提示&#xff1a; 磁盘已成功扩展。您…

整洁架构SOLID-接口隔离原则(ISP)

文章目录 定义ISP与编程语言ISP与软件架构小结 定义 在上图中有多个用户需要操作OPS类。现在&#xff0c;我们假设这里的User1只需要使用op1,User2只需要使用op2,User3只需要使用op3。 在这种情况下&#xff0c;如果OPS类是用Java编程语言编写的&#xff0c;那么很明显&#x…

安全防御实验2

一、实验拓扑 二、实验要求 办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换)分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器多出口环境基于带宽比例进行选路&#xff0c;但是&#xff0c;办公区…

electron + express 实现 vue 项目客户端部署

写在前面 作为一个前端程序员&#xff0c;如何实现从前端到客户端的跨越&#xff0c;可能是一个很难实现的事。但客户需求千奇百怪&#xff0c;偶尔遇到一个非要客户端的&#xff0c;如何应对&#xff1f; 那Electron可能真是你福音。具体它有哪些功能&#xff0c;可自行官网…

《斯科特·凯尔比的风光摄影手册》读书笔记

写在前面 《斯科特凯尔比的风光摄影手册》读书笔记整理没有全部读完&#xff0c;选择了感兴趣的章节理解不足小伙伴帮忙指正 &#x1f603;,生活加油 99%的焦虑都来自于虚度时间和没有好好做事&#xff0c;所以唯一的解决办法就是行动起来&#xff0c;认真做完事情&#xff0c;…