网站LOGO
白雾茫茫丶
页面加载中
1月18日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    基于 Vue2.0 + Nest.js 全栈开发的后台应用
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

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

    谢明伟 · 原创 ·
    前端开发 · Ant-DesignVueNest
    共 3815 字 · 约 2 分钟 · 1213

    Vue2 Admin

    ☘️ 项目简介

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

    🌿 系统功能设计

    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 文件中的数据库配置,这一步要保证成功,不然后端服务起不来

      powershell 代码:
      DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue2-admin?schema=public"
    2. 拉取项目代码

      powershell 代码:
      git clone https://github.com/baiwumm/vue2-admin.git
      cd vue2-admin
      // 进入前端
      cd web
      // 进入后端
      cd server
    3. 安装依赖

      powershell 代码:
      npm install -g pnpm
      pnpm install
    4. 开发模式运行

      powershell 代码:
      // 前端启动
      pnpm dev
      // 后端启动:开发模式
      pnpm start:dev
    5. 编译项目

      powershell 代码:
      pnpm build

    🌵 新增路由菜单

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

    🌱 功能模块

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

    🪴 演示图

    🍄 总结

    1. 本项目没有经过严格的测试,有可能存在一定的 Bug
    2. 本项目仅供学习交流使用,请勿用于商业用途。
    3. 欢迎提交 IssuesPR,一起完善本项目。
    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    2

    条评论
    我要发表评论
    1. 头像 喵喵
      · · 湖北-武汉
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前
      头像
      喵喵
      沙发

      学习中,数据库发一下,谢谢

      评论
      1. · · 广东-深圳
        • 角色:博主
        • 在线:本周
        头像

        恩,放在文章底部了,自己去下载一下

        评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 昨天 17:26 在线

    🕛

    本站已运行 3 年 17 天 16 小时 17 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2025.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事