基于 Vue2.0 + Nest.js 全栈开发的后台应用

☘️ 项目简介

Vue2 Admin 是一个前端基于 Ant Design Pro 二次开发,后端基于 Nest.js 的全栈后台应用,适合学习全栈开发的同学参考学习。

  • 🍁 前端技术栈: Vue2、Ant Design Vue、Vuex

  • 🍁 后端技术栈: Nest.js、PostgreSQL、Prisma

  • 🍂 线上预览: https://vue2.baiwumm.com/

  • 🍃 用户名:Admin,密码:abc123456

  • 🪹 github 仓库地址

  • 🪺 码云仓库地址

  • 🍀 Swagger 接口文档

  • ❤️ star:如果可以的话,请顺手给个star,表示对作者的鼓励,万分感谢!

🌿 系统功能设计

  1. 动态国际化语言配置
  2. 记录登录用户的 CURD 操作日志
  3. 用户和角色权限的一对一映射,根据角色关联的菜单权限生成动态路由菜单
  4. 登录用户发布消息公告,后端使用 SSE 推送,可登录多个用户查看效果
  5. 前端常见的一些实用的业务功能或者一些有趣的效果

🌳 环境和依赖

推荐本项目使用 pnpm 包管理工具

  • Git (你需要git来克隆和管理项目版本)
  • Node.js (Node.js 版本要求 >= 18.12.0,推荐 18.19.0 或更高)
  • Pnpm (>= 8.7.0,推荐最新版本)
  • PostgreSQL (推荐最新版本)

🌴 项目运行

  1. 安装 PostgreSQL 数据库,并导入 /postgreSQL 中的文件,修改 /server/env 文件中的数据库配置,这一步要保证成功,不然后端服务起不来
DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue2-admin?schema=public"
  1. 拉取项目代码
git clone https://github.com/baiwumm/vue2-admin.git
cd vue2-admin
// 进入前端
cd web
// 进入后端
cd server
  1. 安装依赖
npm install -g pnpm
pnpm install
  1. 开发模式运行
// 前端启动
pnpm dev
// 后端启动:开发模式
pnpm start:dev
  1. 编译项目
pnpm build

🌵 新增路由菜单

  1. web/src/views 目录下新建 文件夹/index.vue 文件
  2. 在菜单 系统管理-国际化-menu 中添加路由配置
  3. 在菜单 系统管理-菜单管理 中按照规则添加菜单,可打开多个标签页参考,路由配置参考:路由和菜单
  4. 在菜单 系统管理-角色管理 中编辑状态中勾选相应的菜单,保存刷新页面,即可看到路由菜单生效

🌱 功能模块

- 登录 / 注销- 工作台- 智能行政- 消息公告- 组织管理- 岗位管理- 组织架构- 个人中心- 功能页- 验证码- 自定义 Vue 指令- 懒加载- 瀑布流- 图片预览- 拾色器- 图片取色盘- 系统级取色器- Swiper- 打印- 文件预览- 拖拽- 技术文档- Vue2- Nest.js- Ant Design Vue- Ant Design Pro- 系统设置- 用户管理- 菜单管理- 角色管理- 国际化- 操作日志- 关于

🪴 演示图

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

🍄 总结

  1. 本项目没有经过严格的测试,有可能存在一定的 Bug
  2. 本项目仅供学习交流使用,请勿用于商业用途。
  3. 欢迎提交 Issues 和 PR,一起完善本项目。

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

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

相关文章

Flink 离线计算

文章目录 一、样例一&#xff1a;读 csv 文件生成 csv 文件二、样例二&#xff1a;读 starrocks 写 starrocks三、样例三&#xff1a;DataSet、Table Sql 处理后写入 StarRocks四、遇到的坑 <dependency><groupId>org.apache.flink</groupId><artifactId&…

深度学习视频编解码开源项目介绍【持续更新】

DVC (Deep Video Compression) 介绍&#xff1a;DVC (Deep Video Compression) 是一个基于深度学习的视频压缩框架&#xff0c;它的目标是通过深度神经网络来提高视频编码的效率&#xff0c;并降低比特率&#xff0c;同时尽可能保持视频质量。DVC 是一个端到端的神经网络模型&…

RabbitMQ 应用问题

文章目录 1. 幂等性保障什么是幂等性MQ 的幂等性如何处理消息重复的问题1. 全局唯一ID2. 业务逻辑判断 2. 顺序性保障什么是顺序性保障什么情况会打破RabbitMQ的顺序性顺序性保障方案 3. 消息积压什么是消息积压造成消息积压的原因解决消息积压的方案 结论 1. 幂等性保障 什么…

【数据库系列】MySQL基础知识:深入理解DDL、DML与DQL操作

MySQL是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛用于数据存储和管理。理解MySQL的基本操作至关重要&#xff0c;尤其是数据定义语言&#xff08;DDL&#xff09;、数据操作语言&#xff08;DML&#xff09;和数据查询语言&#xff08;DQL…

PAT1085 Perfect Sequence(25)

//判断是否是连续的数 //判断是否只能第一个数是最小值 #include <cstdio> #include <algorithm> typedef long long ll; using namespace std; int n,p; const int maxn 100010; int arr[maxn];int binary(int l, int r, ll tgt){if(arr[n-1] < tgt) return n…

git 本地同步远端分支

一、关联远程仓库 本地仓库关联远端仓库 git remote add origin https://github.com/user/repository.git 二、获取远程分支信息 获取远程仓库的最新分支信息 git fetch origin 三、创建或切换到本地分支以跟踪远程分支 1. 创建分支 创建分支并关联到远端分支 git bra…

Shell 编程基础知识

为什么要学 Shell&#xff1f; 学一个东西&#xff0c;我们大部分情况都是往实用性方向着想。从工作角度来讲&#xff0c;学习 Shell 是为了提高我们自己工作效率&#xff0c;提高产出&#xff0c;让我们在更少的时间完成更多的事情。 很多人会说 Shell 编程属于运维方面的知…

深度学习-48-AI应用实战之基于face_recognition的人脸识别

文章目录 1 人脸识别1.1 识别原理1.2 应用场景2 python实现人脸识别2.1 windows安装face_recognition2.2 安装问题及解决3 使用示例3.1 人脸区域检测3.2 对齐与编码3.3 人脸匹配3.4 信息录入4 附录4.1 函数cv2.rectangle4.2 参考附录1 人脸识别 通过图片或者摄像头的方式,将识…

深入浅出UART驱动开发与调试:从基础调试到虚拟驱动实现

往期内容 本专栏往期内容&#xff1a;Uart子系统 UART串口硬件介绍深入理解TTY体系&#xff1a;设备节点与驱动程序框架详解Linux串口应用编程&#xff1a;从UART到GPS模块及字符设备驱动 解UART 子系统&#xff1a;Linux Kernel 4.9.88 中的核心结构体与设计详解IMX 平台UART驱…

vs 项目属性表

解释 在Vistual Studio中&#xff0c;属性包含项目编译生成所需的信息 此信息包括应用程序名称、扩展名&#xff08;如 DLL、LIB、EXE&#xff09;、编译器选项、链接器选项、调试器设置、自定义生成步骤等 项目节点右键->属性&#xff0c;访问属性页要访问属性页&#xff…

空洞武士3

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 collisionBox.hcollisionLayer.hcollisionManager.h collisionBox.h #pragma once #include "collisionLayer.h" #include "vector2.h" #include <functional>class CollisionManager; …

golang支持线程安全和自动过期map

在 Golang 中&#xff0c;原生的 map 类型并不支持并发安全&#xff0c;也没有内置的键过期机制。不过&#xff0c;有一些社区提供的库和方案可以满足这两个需求&#xff1a;线程安全和键过期。 1. 使用 sync.Map&#xff08;线程安全&#xff0c;但不支持过期&#xff09; Go…

Linux网络——IO模型和多路转接

通常所谓的IO&#xff0c;其本质就是等待通信和进行通信&#xff0c;即IO 等 拷贝。 那么想要做到高效的IO&#xff0c;就要在单位时间内&#xff0c;减少“等”的比重。 一.五种IO模型 阻塞 IO: 在内核将数据准备好之前, 系统调用会一直等待. 所有的套接字, 默认都是阻塞方…

VM Virutal Box的Ubuntu虚拟机与windows宿主机之间设置共享文件夹(自动挂载,永久有效)

本文参考如下链接 How to access a shared folder in VirtualBox? - Ask Ubuntu &#xff08;1&#xff09;安装增强功能&#xff08;Guest Additions&#xff09; 首先&#xff0c;在网上下载VBoxGuestAdditions光盘映像文件 下载地址&#xff1a;Index of http://…

AI的魔力:如何为开源软件注入智慧,开启无限可能

“AI的魔力&#xff1a;如何为开源软件注入智慧&#xff0c;开启无限可能” 引言&#xff1a; 在科技发展的浪潮中&#xff0c;开源软件生态一直扮演着推动创新与共享的重要角色。从Linux到Python&#xff0c;开源项目赋予了开发者全球协作的机会&#xff0c;推动了技术的飞速…

uniapp条件注释/跨端兼容

文章目录 条件编译处理多端差异1.组件中条件编译2.API条件编译 条件编译处理多端差异 #为什么选择条件编译处理跨端兼容 uni-app 已将常用的组件、API封装到框架中&#xff0c;开发者按照 uni-app 规范开发即可保证多平台兼容&#xff0c;大部分业务均可直接满足。 但每个平…

【拥抱AI】一文讲述如何配置Milvus?

配置Milvus是一个重要的步骤&#xff0c;它可以帮助你更好地管理和优化向量数据库的性能。以下是一些常见的配置选项和步骤&#xff0c;帮助你设置和优化Milvus。 1. 安装Milvus 首先&#xff0c;确保你已经安装了Milvus。你可以使用Docker来快速部署Milvus。以下是一个基本的…

【网络安全】CSRF

一、什么是CSRF CSRF&#xff08;Cross-Site Request Forgery&#xff09;是一种web应用程序安全漏洞&#xff0c;它利用了用户在已登录的状态下的信任&#xff0c;通过欺骗用户发送未经授权的请求来执行恶意操作。这种攻击的危害性取决于受害者在目标网站上的权限。 二、CSR…

OpenCV相机标定与3D重建(5)鱼眼镜头畸变校正的函数estimateNewCameraMatrixForUndistortRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 估计用于去畸变或校正的新相机内参矩阵。 cv::fisheye::estimateNewCameraMatrixForUndistortRectify 是 OpenCV 中用于鱼眼镜头畸变校正的一个函…

IThenticate 查重有无免费午餐?深度解析

经历过论文“折磨”的过来人&#xff0c;深知查重工具是写论文不可或缺的助手。而 iThenticate 查重系统&#xff0c;深受出版商、学术机构和研究人员喜爱。不过&#xff0c;每次看到它那昂贵的价格&#xff0c;就让很多小伙伴直呼&#xff0c;IThenticate查重系统就没有免费的…