【web應用】前后端分離開源項目聯調運行的過程步驟ruoyi

文章目錄

  • ?前言
  • ?一、項目運行環境準備
  • ?二、數據庫創建
    • 🌟1、新建數據庫
    • 🌟2、導入數據腳本
  • ?三、運行后端項目
    • 🌟1、打開后端項目
    • 🌟2、后端項目配置項修改
  • ?四、運行前端項目VUE3
    • 🌟1、在IDEA另一個窗口中打開前端項目
    • 🌟2、前端項目配置項修改
  • ?五、運行成功,瀏覽器中運行
  • ?總結


標題詳情
作者JosieBook
頭銜CSDN博客專家資格、阿里云社區專家博主、軟件設計工程師
博客內容開源、框架、軟件工程、全棧(,NET/Java/Python/C++)、數據庫、操作系統、大數據、人工智能、工控、網絡、程序人生
口號成為你自己,做你想做的
歡迎三連👍點贊、?評論、?收藏

?前言

ruoyi開源框架官網:
https://doc.ruoyi.vip/ruoyi/

學習視頻:

https://www.bilibili.com/video/BV1pf421B71v/?spm_id_from=333.1387.search.video_card.click&vd_source=1c6bb5089ba0c747520fa2283ada48c2

在這里插入圖片描述

下載前后端分離項目。
在這里插入圖片描述

?一、項目運行環境準備

前后端工具:IDEA2023

其余環境安裝這里不做詳細記錄。
在這里插入圖片描述

?二、數據庫創建

創建數據庫ry并導入數據腳本ry_2021xxxx.sql,quartz.sql

🌟1、新建數據庫

在這里插入圖片描述

🌟2、導入數據腳本

數據庫腳本存放路徑:
在這里插入圖片描述
依次選擇兩個文件并運行,便可將數據導入到新建的數據庫ry中。
在這里插入圖片描述

在這里插入圖片描述
在這里插入圖片描述
運行成功后顯示已導入所有數據表。

在這里插入圖片描述

?三、運行后端項目

🌟1、打開后端項目

打開IDEA軟件,項目——打開項目——選中整個前后端框架的文件夾——打開
在這里插入圖片描述

在這里插入圖片描述

🌟2、后端項目配置項修改

后端項目運行準備,修改端口、數據庫密碼等。

將服務設置為正確的端口,不能使用已經占用的端口。
在這里插入圖片描述

redis數據庫如果設置了密碼,進行密碼修改。

在這里插入圖片描述
打開后端程序執行入口文件,點擊項目運行。

在這里插入圖片描述
修改MySQL數據庫密碼

在這里插入圖片描述
后端項目運行成功!!!
在這里插入圖片描述
暫時就先讓其運行著,接著進行前端項目的運行。

?四、運行前端項目VUE3

默認運行前端項目之前已經安裝好了node

🌟1、在IDEA另一個窗口中打開前端項目

在這里插入圖片描述
打開的時候選擇新窗口中打開。
在這里插入圖片描述
打開后的前端項目窗口。
在這里插入圖片描述

🌟2、前端項目配置項修改

將前端項目vue配置文件中的服務端口,設置成和后端中一樣的端口。需要設置兩處,server下的port和http中的端口號,與服務中設置的保持一致。

在這里插入圖片描述

點擊左下角終端,開始運行前端項目。這里運行前端項目需要一點時間。

命令分別是:

npm installnpm run dev

在這里插入圖片描述

運行成功!!!!!

在這里插入圖片描述

?五、運行成功,瀏覽器中運行

在后端項目運行成功并且開啟的情況下,前端項目可以調用后端項目的API,所以可以在瀏覽器中運行前端項目的鏈接.

在這里插入圖片描述

?總結


標題詳情
作者JosieBook
頭銜CSDN博客專家資格、阿里云社區專家博主、軟件設計工程師
博客內容開源、框架、軟件工程、全棧(,NET/Java/Python/C++)、數據庫、操作系統、大數據、人工智能、工控、網絡、程序人生
口號成為你自己,做你想做的
歡迎三連👍點贊、?評論、?收藏

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

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

相關文章

【深度剖析】三一重工的數字化轉型(下篇1)

在數字經濟持續發展的背景下,企業數字化轉型方案成為實現轉型的關鍵。不同行業內的企業因轉型動機和路徑的差異,其轉型成效也各異。三一重工作為機械制造行業的領軍企業,較早地實施了數字化轉型,并積累了豐富的經驗。本研究選取三一重工作為案例,通過梳理相關文獻,對其數…

Nacos適配GaussDB超詳細部署流程

1部署openGauss 官方文檔下載 https://support.huaweicloud.com/download_gaussdb/index.html 社區地址 安裝包下載 本文主要是以部署輕量級為主要教程 1.1系統環境準備 操作系統選擇 系統AARCH64X86-64openEuler√√CentOS7√Docker√√1.2軟硬件安裝環境 版本輕量版(單…

國際前沿知識系列五:時間序列建模方法在頭部撞擊運動學測量數據降噪中的應用

目錄 國際前沿知識系列五:時間序列建模方法在頭部撞擊運動學測量數據降噪中的應用 一、引言 二、時間序列建模方法 (一)ARIMA 模型 (二)指數平滑法 (三)小波變換 三、實際案例分析 &…

線性代數中的向量與矩陣:AI大模型的數學基石

🧑 博主簡介:CSDN博客專家、CSDN平臺優質創作者,高級開發工程師,數學專業,10年以上C/C, C#, Java等多種編程語言開發經驗,擁有高級工程師證書;擅長C/C、C#等開發語言,熟悉Java常用開…

第十七次CCF-CSP算法(含C++源碼)

第十七次CCF-CSP認證 小明種蘋果AC代碼 小明種蘋果&#xff08;續&#xff09;AC代碼 后面好難哈哈 小手冰涼 小明種蘋果 輸入輸出&#xff1a; 題目鏈接 AC代碼 #include<iostream> using namespace std; int n,m; int res,res3; int sum; int res21; int main(){cin …

curl常用指令

curl使用記錄 curl常用指令安裝請求get請求post請求錯誤排查 curl常用指令 安裝 sudo apt update sudo apt install curl -y請求 get請求 curl [URL]如果能正常請求&#xff0c;則會返回正常的頁面信息 post請求 發送 JSON 數據? curl -X POST [URL] -H "Content-…

C++ 輸入輸出流示例代碼剖析

一、開篇&#xff1a;代碼核心概述 本文圍繞一段融合輸入輸出流操作、自定義類型重載、文件讀寫的C代碼展開&#xff0c;深入探究其底層原理與實踐應用。代碼通過類型轉換、操作符重載等技術&#xff0c;實現自定義類型與標準輸入輸出流的交互&#xff0c;同時借助文件流完成數…

常見嵌入式軟件架構

常見的嵌入式軟件架構 一、ASW文件夾&#xff08;Application Software&#xff0c;應用軟件&#xff09;定義與作用常見子目錄結構特點 二、BSP文件夾&#xff08;Board Support Package&#xff0c;板級支持包&#xff09;定義與作用常見子目錄結構特點 三、OS文件夾&#xf…

【PostgreSQL】數據探查工具1.0研發可行性方案

?? 點擊關注不迷路 ?? 點擊關注不迷路 ?? 點擊關注不迷路 想搶先解鎖數據自由的寶子,速速戳我!評論區蹲一波 “蹲蹲”,揪人嘮嘮你的超實用需求! 【PostgreSQL】數據探查工具1.0研發可行性方案,數據調研之秒解析數據結構,告別熬夜寫 SQL【PostgreSQL】數據探查工具…

Lambda表達式與匿名內部類的對比詳解

Lambda表達式與匿名內部類的對比詳解 1. 語法簡潔性 Lambda表達式&#xff1a; 僅適用于函數式接口&#xff08;只有一個抽象方法的接口&#xff09;&#xff0c;語法簡潔。 示例&#xff1a; Runnable r () -> System.out.println("Hello Lambda");匿名內部類&…

Seata Server 1.6.1 高可用部署終極指南:Nacos配置中心+DB存儲+多實例實戰

文章目錄 高可用 - 關鍵因素存儲模式配置中心注冊中心高可用 - 步驟第 1 步:使用 db 作為存儲模式第 2 步:使用 Nacos 配置中心自定義 seata-server 配置添加 seata-server.properties 到 Nacos第 3 步:修改 application.yml使用 Nacos 作為配置中心使用 Nacos 作為注冊中心…

JS 中判斷 null、undefined 與 NaN 的權威方法及場景實踐

在 JavaScript 中&#xff0c;null、undefined 和 NaN 是三個特殊的「非正常值」&#xff0c;正確判斷它們是保證代碼健壯性的關鍵。本文結合 ECMA 規范與 MDN 權威文檔&#xff0c;系統梳理三者的判斷方法、原理及典型場景&#xff0c;幫助開發者規避常見誤區。 一、理解三個…

基于DenseNet的醫學影像輔助診斷系統開發教程

本文源碼地址: https://download.csdn.net/download/shangjg03/90873921 1. 簡介 本教程將使用DenseNet開發一個完整的醫學影像輔助診斷系統,專注于胸部X光片的肺炎檢測。我們將從環境搭建開始,逐步介紹數據處理、模型構建、訓練、評估以及最終的系統部署。 2. 環境準備<…

ubuntu ollama /Dify/Docker部署大模型

電腦需要顯卡&#xff1a; 執行下載并安裝&#xff1a; curl -fsSL https://ollama.com/install.sh | sh 安裝完后到Ollama Search 中查看ollama 可以部署的模型有哪些&#xff1a; 我選擇gemma3,所以執行&#xff1a; ollma pull gemma3:latest 這樣就把gemma3:latest 模…

課程發布與學習流程全解析

流程 課程發布Controller 獲取課程發布信息 ApiOperation("獲取課程發布信息") ResponseBody GetMapping("/course/whole/{courseId}") public CoursePreviewDto getPreviewInfo(PathVariable("courseId") Long courseId) {CoursePreviewDto c…

Linux的讀寫屏障

在 Linux 中&#xff0c;讀寫屏障&#xff08;Read-Write Barriers&#xff0c;簡稱 RWB&#xff09;是對內存訪問順序的一種控制機制&#xff0c;用來保證在多核處理器環境下&#xff0c;內存訪問的正確順序&#xff0c;避免因亂序執行導致的數據一致性問題。它是操作系統內核…

Spring AI 和 Elasticsearch 作為你的向量數據庫

作者&#xff1a;來自 Elastic Josh Long, Philipp Krenn 及 Laura Trotta 使用 Spring AI 和 Elasticsearch 構建一個完整的 AI 應用程序。 Elasticsearch 原生集成了業界領先的生成式 AI 工具和服務提供商。查看我們關于超越 RAG 基礎或使用 Elastic 向量數據庫構建生產級應用…

TDengine 高可用——雙活方案

概述 部分用戶因為部署環境的特殊性只能部署兩臺服務器&#xff0c;同時希望實現一定的服務高可用和數據高可靠。本文主要描述基于數據復制和客戶端 Failover 兩項關鍵技術的 TDengine 雙活系統的產品行為&#xff0c;包括雙活系統的架構、配置、運維等。TDengine 雙活既可以用…

與 JetBrains 官方溝通記錄(PyCharm 相關問題反饋)

#工作記錄 溝通記錄&#xff1a; Subject: Feedback on Terminal and Environment Activation Issues in PyCharm : PY-81233 溝通進度&#xff1a; 【筆記】記一次PyCharm的問題反饋_the polyglot context is using an implementation th-CSDN博客 【筆記】與PyCharm官方溝通…

前端實戰:用 JavaScript 模擬文件選擇器,同步實現圖片預覽與 Base64 轉換

代碼 function 仙盟插件_通用_圖片_上傳(人間通道id,檢驗關卡img,仙界指引id){const 人間通道 document.getElementById(人間通道id);const 檢驗關卡 document.getElementById(檢驗關卡img);const 仙界指引 document.getElementById(仙界指引id);人間通道.addEventListener(…