通过若依开源项目介绍 springboot + vue 项目

1.若依（RuoYi）开源项目介绍

若依（RuoYi）是一个基于 SpringBoot + Vue 的开源快速开发框架，旨在帮助开发者快速搭建企业级后台管理系统。其设计理念为 简洁、高效、实用，整合了主流技术栈，提供了完善的权限管理、代码生成、系统监控等功能，非常适合中小型项目开发或作为底层脚手架。

2.代码地址

环境部署 | RuoYi

3.技术解剖

若依采用 前后端分离架构，前端基于 Vue.js，后端基于 SpringBoot，通过 HTTP API 进行数据交互。以下是核心技术栈：

后端技术

技术名称	作用描述
SpringBoot	核心框架，用于快速构建独立运行的 Spring 应用，简化配置流程。
Spring Security	权限认证与安全管理，实现用户登录、角色权限控制、接口安全防护等。
MyBatis-Plus	ORM 框架，简化数据库操作，支持代码生成、分页查询、动态 SQL 等功能。
MySQL	关系型数据库，存储系统数据（支持切换为 PostgreSQL、Oracle 等）。
Redis	缓存中间件，用于存储登录令牌、字典数据、缓存报表等，提升系统性能。
Swagger	接口文档生成工具，方便前后端联调与接口管理。
Apache Shiro	部分版本使用 Shiro 实现权限控制（不同分支可能技术栈有差异）。

前端技术

技术名称	作用描述
Vue.js	前端框架，构建单页面应用（SPA），实现组件化开发。
Vue Router	路由管理，实现前端页面的导航与切换。
Vuex	状态管理，集中管理应用的共享数据（如用户信息、权限菜单等）。
Element UI	UI 组件库，提供丰富的基础组件（表格、表单、弹窗等），符合企业级设计规范。
Axios	数据请求库，用于向后端发送 HTTP 请求并处理响应。
Webpack	打包工具，编译和优化前端代码，提升加载性能。

4.项目结构

后端目录

ruoyi-admin          # 后台管理模块（包含启动类）
├─ src/main/java/com/ruoyi
│  ├─ config         # 系统配置（如 Security、Swagger、Redis 配置）
│  ├─ controller     # 接口控制器（处理前端请求）
│  ├─ service        # 业务逻辑层（调用 Dao 层）
│  ├─ mapper         # MyBatis-Plus Mapper 接口（操作数据库）
│  ├─ domain         # 实体类（对应数据库表）
│  ├─ utils          # 工具类（如 JWT 生成、Excel 导出）
│  └─ RuoYiApplication.java # 启动类
ruoyi-common         # 公共模块（封装通用功能）
├─ common-core       # 核心工具包（如日志、异常处理）
├─ common-security   # 权限模块（Security 配置）
├─ common-datasource # 多数据源模块
ruoyi-system        # 系统模块（实现核心功能）
├─ service           # 系统业务逻辑（如用户、角色、菜单服务）
└─ mapper            # 系统相关 Mapper

前端目录

ruoyi-vue
├─ src
│  ├─ api           # 接口请求模块（封装 Axios 请求）
│  ├─ components    # 公共组件（如表格、弹窗、权限按钮）
│  ├─ router        # 路由配置（定义页面路径和权限）
│  ├─ store         # Vuex 状态管理（用户信息、菜单列表等）
│  ├─ views         # 业务页面（如用户管理、角色管理）
│  ├─ utils         # 工具函数（如 JWT 解析、数据处理）
│  └─ App.vue       # 根组件
│  └─ main.js       # 入口文件（初始化 Vue、路由、插件）
└─ public           # 静态资源（avicon、HTML 模板）

5. 开发流程：从搭建到运行

1. 环境准备

• 后端：JDK 1.8+、Maven 3.6+、MySQL 5.7+/8.0、Redis 3.2+
• 前端：Node.js 14+、Vue CLI 4+

2. 快速启动

• 步骤 1：克隆项目代码

  bash

  git clone https://gitee.com/y_project/RuoYi-Vue.git
  

• 步骤 2：配置后端数据库
  • 创建数据库（如 ruoyi_vue），执行 doc/sql/ruoyi-vue.sql 初始化表结构。
  • 修改 ruoyi-admin/src/main/resources/application-druid.yml 中的数据库连接信息。

• 步骤 3：启动后端服务
  • 使用 IDE（如 IntelliJ IDEA）打开项目，运行 RuoYiApplication 类。

• 步骤 4：安装前端依赖并启动

  bash

  cd ruoyi-ui
  npm install # 安装依赖
  npm run dev # 启动开发服务器（默认端口 80）
  

• 步骤 5：访问系统
  • 前端地址：http://localhost:80
  • 默认账号 / 密码：admin/123456

ps:记得去网上下redis啊，不知道怎么下的去csdn上面搜一搜

6.vue部署

1.在本地项目根目录执行：

npm run build

这会生成一个dist目录，包含优化后的静态文件（HTML、CSS、JS、图片等）。

2.通过 Nginx/Apache 等 Web 服务器直接托管静态文件

把dist文件夹改个名字放到nginx的html目录下

在conf目录下的nginx中配置代理

    location / {
            root   html/vue-big-screen-plugin;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

点击nginx.exe启动程序，双击即可，在任务管理器里面能看到进程启动的

访问http://localhost:80/端口即可打开页面