nbsaas vue3管理后台框架

nbsaas vue3管理后台框架

一、项目概述

Nbsaas Admin Vue 是一个基于 Vue.js 3.0 构建的轻量级后台管理系统,结合了现代前端技术栈的最佳实践,旨在帮助开发者快速构建具有高可扩展性和良好用户体验的后台管理系统。该项目拥有简洁的 UI 设计,强大的功能模块,支持多种自定义配置,适合电商、企业管理等各类业务场景。

二、主要特性

  1. Vue 3.x 支持:基于最新的 Vue 3 构建,支持 Composition API 和全新的 Vue 生态体系。
  2. Element Plus:采用了流行的 UI 框架 Element Plus 提供现代化的 UI 组件,方便快速构建响应式界面。
  3. Vue Router & Vuex:内置强大的路由管理和状态管理功能,帮助实现复杂应用的路由和数据状态管理。
  4. 权限控制:支持基于角色的权限控制,可轻松扩展多角色、多权限的业务场景。
  5. 丰富的组件库:包括图表、表单、表格等常用组件,提升开发效率。
  6. 良好的扩展性:模块化设计,支持动态路由、插件机制,方便二次开发和功能扩展。
  7. 响应式布局:兼容各种终端设备,提供优质的用户体验。

编码规范

1.项目结构规范

{主工程}
{主工程}/assets             静态文件
{主工程}/components         公共组件
{主工程}/config             配置文件
{主工程}/layout             公共布局文件
{主工程}/mixins             混淆,vue3不采用了
{主工程}/router             路由配置
{主工程}/stores             pinia配置    
{主工程}/uses               公共vue3组合函数
{主工程}/utils              公共工具类
{主工程}/views              视图页面
{主工程}/views/common       基础视图
{主工程}/views/common       页面视图

vue视图结构

/views/pages/业务模块/add.vue
/views/pages/业务模块/component/组件业务1.vue
/views/pages/业务模块/component/组件业务2.vue
/views/pages/业务模块/component/组件业务n.vue
/views/pages/业务模块/index.vue
/views/pages/业务模块/update.vue
/views/pages/业务模块/view.vue
/views/pages/业务模块/view_layout.vue
/views/pages/业务模块/view_业务1.vue
/views/pages/业务模块/view_业务2.vue
/views/pages/业务模块/view_业务n.vue

界面效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f40437dbec334740ae1c4af0965899d4.png#pic_center

后台演示环境

http://adminstore.nbsaas.com 账号 admin 密码123456

依赖安装

pnpm i

开发调试

npm run dev

打包部署

npm run build

组合函数

分页组合函数

import {usePage} from "@/utils/usePage";
const {pageData, sizeChange, pageChange, search, changeTableSort, loading} = usePage("/store/search", searchObject);

通用查询分页

import {usePageData} from "@/uses/usePageData";
const {pageData, sizeChange, pageChange, search, changeTableSort, loading} = usePageData("page_vip_order", searchObject);

删除组合函数

import {useDelete} from "@/utils/useDelete";
const {dialogVisible, deleteData, handleDelete} = useDelete("/store/delete", search);

主要功能模块

  • 用户管理:包括用户的新增、编辑、删除、搜索等基本操作,同时支持用户角色分配。
  • 权限管理:支持灵活的权限分配机制,可以对不同角色设置不同的访问权限。
  • 数据统计与分析:集成 ECharts,提供图表化的数据展示与统计功能。

技术栈

  • 前端框架: Vue 3
  • UI 框架: Element Plus
  • 状态管理: Vuex
  • 路由管理: Vue Router
  • 打包工具: Vite

项目贡献

该项目为开源项目,欢迎开发者贡献代码。你可以通过以下方式参与:

  • 提交 Issue:如果在使用过程中发现问题,欢迎提交 Issue。
  • 提交 Pull Request:修复 Bug 或添加新功能后,可以通过 Pull Request 提交代码。
  • 优化文档:帮助完善项目的中文和英文文档,让更多开发者了解并使用此项目。

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

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

相关文章

Hikyuu教程 | 滚动回测与滚动寻优系统

前面介绍了如何使用 hikyuu 进行策略回测参数优化,同时也提到了这种简单的参数优化本质其实是对历史数据的过拟合,通常并不具备直接使用的意义。那么有什么办法来减缓这种过拟合影响,让参数优化发挥实际的作用呢?答案是——使用滚…

使用shell脚本自动重启服务

服务器后台运行的一些服务,有的时候由于高压操作导致服务崩溃时,总是得远程登录服务器,然后重启服务。 可以写shell脚本自动检测服务是否在运行,如果崩溃了就重启。 使用nohup在后台启动服务: nohup 服务启动命令所…

ifconfig 和 ip addr

1. 工具所属套件 ifconfig:属于较老的 net-tools 套件。曾是 Unix 和 Linux 系统上广泛使用的工具。ip addr:属于较新的 iproute2 套件。它取代了 ifconfig,并逐渐成为现代 Linux 系统上更常用的工具。 2. 功能覆盖范围 ifconfig&#xff…

Java之数组详解

一、数组的概念 数组(Array)是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,通过编号(索引)的方式对这些数据进行统一管理。数组是程序设计中的一种基本数据结构,用于存储相同类型…

源码编译方式安装htppd软件

一.源码编译安装httpd软件 1.安装阿帕奇的依赖,安装apr软件,阿帕奇正常运行的环境这个环境就是apr。 2.安装apr-util软件,主要提供针对apr环境的管理工具, 3.安装阿帕奇软件即httpd软件。 如上图所示,就是三个软件的…

E38.【C语言】练习:数据结构时间复杂度的计算

目录 1.二分法的时间复杂度 解: 2.求阶乘的时间复杂度 解: 3.递归实现斐波那契数,求时间复杂度 解: 4.时间复杂度的排名 备注:有关时间复杂度的讲解参见80.【C语言】数据结构之时间复杂度 1.二分法的时间复杂度 (代码来自E7.【C语言】练习:在一个有序数组中…

RK3568笔记六十六:Live555推流

若该文为原创文章,转载请注明原文出处。 前面移植了live555,记录使用rk3568推流 一、流程 推流过程是在前面RTMP工程上修改的。RTMP推流是采集摄像头数据,AI推理,编码成H264通过FFMEPG推流,现在把FFMPEG改成使用Live555. 步骤: 1、使用opencv采集摄像头数据 2、初始化…

CentOS 7 yum失效的解决办法

文章目录 一、CentOS 7停止维护导致yum失效的解决办法解决方案 提示:以下是本篇文章正文内容,下面案例可供参考 一、CentOS 7停止维护导致yum失效的解决办法 020 年,CentOS 项目与红帽联合宣布将全部投资转向 CentOS Stream,这是…

SpringBoot项目热部署-devtools

DevTools 会使用两个类加载器&#xff08;一个用于加载不变的类&#xff0c;一个用于加载可能会变化的类&#xff09;&#xff0c;每次重启只重新加载管理变化的类的加载器&#xff0c;因此会快很多 1.导入依赖 <dependency> <groupId>org.springframework.boot&l…

第28周:Transformer 实现文本分类 - Embedding版

目录 前言 一、前期准备 1.1 环境安装 1.2 加载数据 二、数据预处理 2.1 构建词典 2.2 进行one-hot编码 2.3 自定义数据集类 2.4 定义填充函数 2.5 构建数据集 三、模型构建 3.1 定义位置编码器 3.2 定义Transformer模型 3.3 定义训练函数 3.4 定义测试函数 四、…

RabbitMQ高级特性详解

前言 RabbitMQ是一款广泛使用的开源消息队列软件&#xff0c;它基于AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;标准实现。本文将带你深入了解RabbitMQ的一些高级特性&#xff0c;包括消息确认、死信队列、延迟队列、事务处理以及消息分发策略等&#xff…

HCIE-Datacom题库_01_防火墙【18道题】

一、单选题 1.相比较于路由器、交接机&#xff0c;防火墙转发独有的模块为? 交换网板 MPU LPU SPU 解析&#xff1a; SFU&#xff08;Switch Fabric Unit&#xff09;&#xff1a;交换网板&#xff0c;负责整个系统的数据平面数据平面提供高速无阻塞数据通道&#xff0…

关于SOCKS协议的常见误区有哪些?

代理协议在设备与代理服务器之间的数据交换中起到了关键作用。在这方面&#xff0c;SOCKS代理协议是常见的选择之一&#xff0c;被广泛应用于下载、传输和上传网络数据的场景。然而&#xff0c;关于SOCKS代理协议存在一些常见的误解&#xff0c;让我们来逐一了解。 一、使用SO…

爬虫逆向-js进阶(续写,搭建网站)

1.搭建简单网站1 from flask import Flask,render_template import requests import json app Flask(name)# **location**的温度是**temp**度&#xff0c;天气状况&#xff1a;**desc**app.route(/) # 绑定处理函数 def index_url():location 101010100data get_weather(lo…

Whisper 音视频转写

Whisper 音视频转写 API 接口文档 api.py import os import shutil import socket import torch import whisper from moviepy.editor import VideoFileClip import opencc from fastapi import FastAPI, File, UploadFile, Form, HTTPException, Request from fastapi.respons…

Android中的内存泄漏及其检测方式

Android中的内存泄漏及其检测方式 一、Android内存泄漏概述 在Android开发中&#xff0c;内存泄漏是一个常见且严重的问题。内存泄漏指的是在应用程序中&#xff0c;由于某些原因&#xff0c;已经不再使用的对象仍然被引用&#xff0c;导致垃圾回收器&#xff08;Garbage Col…

图书管理新纪元:Spring Boot进销存系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理图书进销存管理系统的相关信息成为必然。开…

使用 Elasticsearch Dump 工具进行生产环境到测试环境的数据迁移与备份

es-dump 是 Elasticsearch 的一个实用工具&#xff0c;专门用于从 Elasticsearch 集群中导出或导入数据&#xff0c;支持数据、映射、别名、模板等多种类型的数据操作。它在数据迁移、备份、恢复等场景中非常实用。本文将展示如何使用 es-dump 工具执行生产到测试环境的索引复制…

【学习】word保存图片

word中有想保存的照片 直接右键另存为的话&#xff0c;文件总是不清晰&#xff0c;截屏的话&#xff0c;好像也欠妥。 怎么办? 可以另存为 网页 .html 可以得到&#xff1a; 原图就放到了文件夹里面

Selenium 中定位元素操作集合

Selenium中元素的定位与操作 在 Selenium 中定位单个元素一般通过 find_element 方法来实现&#xff0c;一组数据则是 find_elements &#xff08;定位时应该元素加载完整再 再定位&#xff0c;否则可能会出现找不到对应元素的情况出现。这里可以使用 time.sleep() 来实现等待…