Vue + RuoYi 前后端分離入門手冊

Vue + RuoYi 前后端分離技術棧是一個非常流行且成熟的企業級后臺管理系統開發方案，尤其在國內 Java 開發社區中廣泛應用。它結合了現代化的前端框架 Vue.js 和基于 Spring Boot 的后端框架 RuoYi，提供了開箱即用的權限管理、代碼生成、監控等功能，極大地加速了后臺管理系統的開發。

以下是該技術棧的核心要點解析：

1. 技術棧組成

  • 前端 (Frontend):

    • Vue.js:?漸進式 JavaScript 框架，負責構建用戶界面和交互邏輯。核心庫 + 生態系統 (Vue Router, Vuex)。

    • Vue CLI / Vite:?項目腳手架和構建工具。

    • UI 框架:?通常采用?Element UI?(Vue 2) 或?Element Plus?(Vue 3)，提供豐富的后臺管理組件。RuoYi-Vue 默認集成 Element UI。

    • Axios:?主流的 HTTP 客戶端庫，用于向后端 API 發起請求。

    • Vue Router:?實現單頁面應用 (SPA) 的路由管理。

    • Vuex / Pinia:?狀態管理模式庫，管理跨組件的共享狀態（用戶信息、權限等）。

    • 其他工具:?ESLint, Prettier, Sass/Less 等。

  • 后端 (Backend):

    • RuoYi:?基于?Spring Boot、Spring Security、MyBatis / MyBatis-Plus?構建的開源權限管理系統框架。

    • Spring Boot:?快速構建獨立、生產級的 Spring 應用。

    • Spring Security:?提供強大的認證 (Authentication) 和授權 (Authorization) 功能，是 RuoYi 權限體系的核心。

    • MyBatis / MyBatis-Plus:?ORM 框架，操作數據庫。MyBatis-Plus 提供了大量便捷的 CRUD 方法。

    • 數據庫:?支持 MySQL, Oracle, PostgreSQL, SQL Server 等主流關系型數據庫。

    • Redis:?常用于緩存（菜單、字典、配置等）、會話管理、分布式鎖。

    • Maven / Gradle:?項目構建和依賴管理。

    • Swagger / Knife4j:?API 文檔生成工具，方便前后端協作。

2. 前后端分離架構原理

  1. 物理分離：

    • 前端項目 (Vue) 和后端項目 (RuoYi) 是兩個獨立的代碼倉庫和部署單元。

    • 前端代碼最終被構建成靜態文件 (HTML, CSS, JS)。

  2. 通信方式：

    • 前端 Vue 應用通過?HTTP(S) 協議，使用?RESTful API?或?自定義 API?與后端 RuoYi 進行數據交互。

    • 主要使用?axios?發送?GET,?POST,?PUT,?DELETE?等請求。

    • 數據格式通常為?JSON。

  3. 職責清晰：

    • 前端 (Vue):?負責 UI 渲染、用戶交互、路由導航、調用后端 API 獲取/提交數據、管理前端狀態 (Vuex/Pinia)。不直接操作數據庫。

    • 后端 (RuoYi):?負責接收 HTTP 請求、業務邏輯處理、數據訪問 (操作數據庫)、權限校驗、數據處理、返回 JSON 響應。不關心 HTML 渲染。

  4. 部署獨立：

    • 前端:?靜態文件部署到?Nginx、Apache、Tomcat (作為靜態資源)、對象存儲 (OSS)、CDN 等 Web 服務器或云服務上。

    • 后端:?打包成可執行的 JAR/WAR 文件，部署到?Tomcat、Jetty 等 Servlet 容器，或直接通過?java -jar?運行 (Spring Boot 內嵌容器)。

    • Nginx 常作為反向代理:?統一接收客戶端請求，根據路徑 (/api/?轉發給后端，/?或?/static/?返回前端靜態文件)，并解決跨域問題。

3. RuoYi-Vue 前后端分離版關鍵特性

  • 登錄認證:?JWT (JSON Web Token) 或 Session 方式實現登錄狀態管理。RuoYi 后端提供登錄接口?/login，前端調用獲取 token/session，后續請求攜帶 token/session 進行認證。

  • 權限控制:

    • 后端:?Spring Security 基于 URL 和方法注解 (@PreAuthorize) 進行細粒度權限校驗。

    • 前端:?Vue Router 的導航守衛 (beforeEach) 根據從后端獲取的用戶角色/權限信息，動態生成可訪問的路由表，控制菜單和按鈕 (v-hasPermi,?v-hasRole) 的顯示/隱藏。核心是后端控制權限，前端負責展示控制。

  • 動態路由:?前端根據后端返回的用戶菜單權限列表，使用 Vue Router 的?addRoutes?(Vue2) 或?addRoute?(Vue3) 動態添加可訪問的路由。

  • 狀態管理 (Vuex/Pinia):?集中管理用戶信息、權限信息、全局配置、標簽頁狀態等，方便組件間共享和響應式更新。

  • API 交互:?Axios 被封裝，統一處理請求攔截 (添加 token)、響應攔截 (處理錯誤、消息提示)、基礎 URL 設置等。

  • 跨域問題 (CORS):?開發環境下，Vue CLI 通過?devServer.proxy?配置代理解決。生產環境下，由 Nginx 反向代理或后端配置 CORS (@CrossOrigin?或全局配置) 解決。

4. 開發流程 (簡化版)

  1. 環境準備:?安裝 Node.js, npm/yarn/pnpm, Java JDK, Maven/Gradle, IDE (VSCode/WebStorm, IDEA/Eclipse), 數據庫 (MySQL), Redis。

  2. 獲取代碼:

    • 從 RuoYi 官方 Gitee/GitHub 克隆或下載 RuoYi-Vue 前后端分離版本項目。

    • 通常包含?ruoyi-ui?(前端 Vue) 和?ruoyi?(后端 Spring Boot) 兩個目錄或項目。

  3. 后端啟動:

    • 導入后端項目到 IDEA/Eclipse。

    • 配置?application.yml?(數據庫連接、Redis 連接、項目端口等)。

    • 運行主啟動類 (RuoYiApplication.java)。

    • 初始化數據庫腳本 (sql?目錄)。

  4. 前端啟動:

    • 進入?ruoyi-ui?目錄。

    • 運行?npm install?/?yarn install?/?pnpm install?安裝依賴。

    • 配置?vue.config.js?中的?devServer.proxy?指向后端地址 (解決開發環境跨域)。

    • 運行?npm run dev?/?yarn dev?/?pnpm dev?啟動開發服務器。

  5. 開發與聯調:

    • 前端：開發 Vue 組件、頁面、路由、調用 API。

    • 后端：開發 Controller 接口、Service 業務邏輯、Mapper 數據訪問。

    • 使用 Swagger/Knife4j (http://localhost:后端端口/doc.html) 查看和測試 API。

    • 前后端通過定義好的 API 接口和數據結構進行聯調。

  6. 構建與部署:

    • 前端:?運行?npm run build:prod?/?yarn build:prod?/?pnpm build:prod?生成?dist?靜態文件目錄。部署到 Nginx 等 Web 服務器。

    • 后端:?運行 Maven?mvn clean package?(或 IDE 打包) 生成?ruoyi-admin/target/ruoyi-admin.jar。通過?java -jar ruoyi-admin.jar?運行或部署到 Tomcat。

    • Nginx 配置示例:

      server {listen 80;server_name yourdomain.com; # 或 localhost# 前端靜態資源location / {root   /path/to/ruoyi-ui/dist; # 替換為你的 dist 目錄實際路徑index  index.html index.htm;try_files $uri $uri/ /index.html; # 支持 Vue Router history 模式}# 后端 API 代理location /prod-api/ { # 注意：RuoYi 前端請求通常以 /prod-api/ 開頭代理到后端proxy_pass http://localhost:8080/; # 替換為后端實際地址和端口proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 如果后端有上下文路徑，可能需要添加：proxy_set_header X-Forwarded-Prefix /context-path;}# 可能還需要代理 websocket、文件上傳下載等路徑
}

5. 優勢

  • 高效開發:?RuoYi 提供基礎架構和常用功能（權限、監控、代碼生成），Vue 提供現代化的高效前端開發體驗。

  • 職責分離:?前后端團隊可并行開發，通過 API 契約協作。

  • 技術棧先進:?Vue 生態豐富，Spring Boot 成熟穩定。

  • 可維護性好:?代碼結構清晰，模塊化程度高。

  • 性能與擴展性:?前端 SPA 體驗好，后端微服務友好（RuoYi 可拆分為模塊）。

  • 社區活躍:?RuoYi 在國內有龐大的用戶群和完善的中文文檔、社區支持。

6. 學習資源

  1. 官方文檔:

    • RuoYi 官方文檔:?這是最核心的資源，包含部署指南、使用手冊、常見問題解答。務必仔細閱讀。

    • Vue.js 官方文檔:?掌握 Vue 核心概念 (組件、指令、生命周期、響應式、路由、狀態管理)。

    • Element UI / Element Plus 文檔:?熟悉常用組件的用法和 API。

    • Spring Boot 官方文檔:?理解 Spring Boot 核心原理和配置。

    • Spring Security 官方文檔:?深入理解權限控制的實現。

    • MyBatis-Plus 文檔:?學習高效的數據庫操作方式。

  2. 代碼本身:?下載 RuoYi-Vue 項目源碼，仔細閱讀前后端代碼，尤其是登錄認證、權限控制、動態路由、API 封裝、代碼生成器實現等核心模塊。

  3. 在線教程/博客:?Gitee/GitHub Issues, CSDN, 掘金，知乎等平臺有大量關于 RuoYi-Vue 的部署、使用、二次開發、問題解決的教程和文章。

  4. 視頻教程:?Bilibili, 慕課網等平臺有相關的入門和實戰視頻。

總結：?Vue + RuoYi 前后端分離技術棧為開發企業級后臺管理系統提供了一個功能強大、開箱即用、社區支持良好的全棧解決方案。掌握它需要理解前后端分離的架構思想、Vue 前端開發技術、Spring Boot (特別是 Spring Security) 后端開發技術以及兩者的協作方式（API 設計、權限控制、動態路由、狀態管理）。通過閱讀官方文檔、研究源碼和不斷實踐，可以高效地利用該技術棧構建復雜的后臺管理系統。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/87134.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/87134.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/87134.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

JSON 安裝使用教程

JSON 安裝使用教程

一、JSON 簡介 JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易于人閱讀和編寫，同時也易于機器解析和生成。它廣泛應用于前后端數據通信、配置文件、API 傳輸等場景。 二、JSON 是否需要安裝？ 不需要…
閱讀更多...
十大網絡協議

十大網絡協議

十大網絡協議 標題1. HTTP（HyperText Transfer Protocol，超文本傳輸協議）標題2. HTTPS（Secure Hypertext Transfer Protocol，安全超文本傳輸協議）標題3. HTTP/3標題4. TCP（Transmission Control…
閱讀更多...
【語音告警】博靈智能語音報警燈Modbus TCP觸發告警實例-語音報警燈|聲光報警器|網絡信號燈

【語音告警】博靈智能語音報警燈Modbus TCP觸發告警實例-語音報警燈|聲光報警器|網絡信號燈

功能說明 本文將以Python代碼為例，講解如何通過Python代碼調用博靈語音通知終端A4實現聲光語音告警。 本代碼實現Python觸發Modbus寫多寄存器和寫單寄存器實現調用通知終端模板播報功能（通知終端內置TTS語音合成技術，本案例不講解如何文本轉…
閱讀更多...
攝像頭 rtsp數據量 和正常數據流有什么區別

攝像頭 rtsp數據量 和正常數據流有什么區別

攝像頭RTSP數據流和正常數據流（如HTTP傳輸的普通文件或網頁數據）在多個方面存在顯著差異，主要體現在協議特性、數據量、實時性、應用場景等方面。以下是具體對比： 1. 協議與傳輸方式 RTSP流： 實時流協議（R…
閱讀更多...
深入理解裝飾器模式：動態擴展對象功能的靈活設計模式

深入理解裝飾器模式：動態擴展對象功能的靈活設計模式

深入理解裝飾器模式：動態擴展對象功能的靈活設計模式 🌟 嗨，我是IRpickstars！ 🌌 總有一行代碼，能點亮萬千星辰。 🔍 在技術的宇宙中，我愿做永不停歇的探索者。 ? 用代碼丈量世界…
閱讀更多...
141.在 Vue 3 中使用 OpenLayers Link 交互：把地圖中心點 / 縮放級別 / 旋轉角度實時寫進 URL，并同步解析顯示

141.在 Vue 3 中使用 OpenLayers Link 交互：把地圖中心點 / 縮放級別 / 旋轉角度實時寫進 URL，并同步解析顯示

本文分享一個前端小技巧：借助 OpenLayers 的 Link 交互 在瀏覽器地址欄實時記錄地圖狀態，同時把這些參數解析出來展示在頁面上。 ? 雙向同步：拖動、縮放、旋轉地圖時，URL 自動更新；手動修改 URL 或后退 / 前進&#x…
閱讀更多...
數字人的形象與內容，虛擬形象背后的權益暗戰

數字人的形象與內容，虛擬形象背后的權益暗戰

（首席數據官高鵬律師數字經濟團隊創作，AI輔助） 當某科技公司的虛擬偶像在直播間收獲百萬打賞時，當某品牌的數字代言人形象被篡改成表情包全網傳播時，當網紅博主的AI分身開始替代真人直播帶貨時，一場關于數…
閱讀更多...
【python】pdf拆成圖片，加中文，再合成pdf

【python】pdf拆成圖片，加中文，再合成pdf

前期搞了個pdf加頁腳，但是搞了半天中文加不了，就換了個思路。 直接說結論，pdf拆成圖片，加中文，再合成pdf，會導致pdf模糊。 import os import fitz # PyMuPDF from PIL import Image, ImageDraw, ImageFon…
閱讀更多...
分布式爬蟲數據存儲開發實戰

分布式爬蟲數據存儲開發實戰

分布式爬蟲存儲的核心矛盾在于：既要高吞吐又要強一致性，還要避免重復。比如Kafka雖然吞吐高但無法去重，Redis去重快但容量有限。所以我們可能低估了狀態同步的復雜度——比如暫停爬蟲時如何保證內存中的URL狀態不丟失。 分布式爬蟲的數據存儲…
閱讀更多...
探秘阿里云Alibaba Cloud Linux：云時代的操作系統新寵

探秘阿里云Alibaba Cloud Linux：云時代的操作系統新寵

引言：云時代的操作系統變革 在云計算技術蓬勃發展的當下，企業的數字化轉型進程被極大地加速，而作為云計算底層支撐的操作系統，也迎來了前所未有的變革與挑戰。傳統操作系統在應對云計算環境中的大規模資源調度、高彈性擴展以及安…
閱讀更多...
使用pyflink進行kafka實時數據消費

使用pyflink進行kafka實時數據消費

目錄 背景 代碼demo 踩坑記錄 1、kafka連接器，kafka客戶端jar包找不到 2、java模塊系統訪問限制 3、執行demo任務，一直報錯連接kafka topic超時 總結 背景 實際項目中經常遇到source是kafka，需要實時消費kafka某個topic中的數據&#x…
閱讀更多...
軟件測試理論框架與發展：分類、原則與質量保障策略

軟件測試理論框架與發展：分類、原則與質量保障策略

第一章 一、計算機軟件的發展分類 早期軟件開發的特點： 軟件規模小、復雜程度低、開發過程不規范 測試的情況： 測試等同于調試 目的糾正軟件的已經知道的故障 投入少，介入晚 成為一種發現軟件的活動（1957） 測試不等于…
閱讀更多...
未知威脅攻擊原理和架構

未知威脅攻擊原理和架構

大家讀完覺得有幫助記得關注和點贊！！！ 未知威脅（Unknown Threats）指利用零日漏洞、合法工具濫用、高級逃逸技術等**繞過傳統特征檢測**的攻擊，其核心在于**動態對抗防御體系的認知盲區**。以下從攻擊原理、…
閱讀更多...
基于Netty-WebSocket構建高性能實時通信服務

基于Netty-WebSocket構建高性能實時通信服務

引言：WebSocket在現代應用中的重要性 在當今實時交互應用盛行的時代，WebSocket協議已成為實現雙向通信的核心技術。相比傳統的HTTP輪詢，WebSocket提供了： 真正的全雙工通信極低的延遲（毫秒級）高效的連接管…
閱讀更多...
咸蝦米項目總結1--const用法

咸蝦米項目總結1--const用法

在 UniApp（或 Vue 3）中，聲明一個空對象可使用下面這2種寫法： // 寫法1 const a ref(null);// 寫法2 const a ref({}); 在UniApp中，const a ref()用法概述： 用途： 創建一個響應式引用&#x…
閱讀更多...
在mac下手動編譯遷移的android版webrtc組件

在mac下手動編譯遷移的android版webrtc組件

我原先使用的android版webrtc是在linux下編譯的，現在因為某些原因需要把整個庫遷移到mac下編譯。 把代碼遷移完后，正常是需要通過gclient sync 重新構建編譯環境，但是由于網絡限制等方面原因，會導致完成的比較慢。 在摸索一陣后…
閱讀更多...
Linux 命令：mkdir

Linux 命令：mkdir

Linux mkdir 命令詳細教程 一、mkdir 命令的基本功能 mkdir（Make Directory）是 Linux 系統中用于創建新目錄（文件夾）的基礎命令。它支持一次性創建單個或多個目錄，以及遞歸創建多層目錄結構，是文件系統操…
閱讀更多...
Django 數據遷移全解析：makemigrations migrate 常見錯誤與解決方案

Django 數據遷移全解析：makemigrations migrate 常見錯誤與解決方案

1. 遷移機制與底層原理 在 Django 中，ORM（Object-Relational Mapping）是連接模型（Model）和數據庫結構的橋梁。Django 鼓勵開發者通過編寫 Python 類（模型）來定義業務數據結構，而不是…
閱讀更多...
SuperGlue：使用圖神經網絡學習特征匹配

SuperGlue：使用圖神經網絡學習特征匹配

摘要 本文提出了 SuperGlue，一種神經網絡，用于通過聯合尋找對應關系并排除不可匹配點來匹配兩組局部特征。匹配結果通過求解一個可微的最優傳輸問題來估計，該問題的代價由一個圖神經網絡預測。我們引入了一種基于注意力的靈活上下文聚合機制…
閱讀更多...
ssh -T git@github.com失敗后解決方案

ssh -T git@github.com失敗后解決方案

這個錯誤表示你的 SSH 連接無法到達 GitHub 服務器。以下是詳細解決方案，按照優先級排序： 首選解決方案：使用 SSH over HTTPS（端口 443） 這是最有效的解決方案，因為許多網絡會阻止 22 端口： …
閱讀更多...
最新文章

Copyright @ 2022~2023