後端搭建部分

首先去若依官網下載最新的若依代碼,或者在我的git上進行下載(沒有跟隨官方版本更新)
若依後端項目初始化: 用於在本地快速搭建若依的後端初始化項目

注意:這裏我們需要點擊下載,下載對應的zip壓縮文件並解壓,而不是直接用克隆的方式到本地,因為這樣可以更方便的上傳到自己的gitee遠程倉庫。

若依框架 -------- vue3+element-plus(三)_51CTO博客_#java

在本地解壓完成後,我們首先需要對maven倉庫進行下載,步驟如下:

  1. 找到idea右側的maven標籤,在按照如下步驟完成maven驗證,maven會自動檢測沒有下載的內容並下載。

若依框架 -------- vue3+element-plus(三)_51CTO博客_數據庫_02

配置完成後的後端代碼文件會變成加粗樣式:

若依框架 -------- vue3+element-plus(三)_51CTO博客_數據庫_03

這裏的加粗部分為後端代碼,"ruoyi-ui"為前端代碼內容,但是這裏的前端是用vue2編寫,我們不採用,後面會用vue3來運行前端。

後端環境配置完成後,我們需要鏈接我們的數據庫mysql,並創建一個數據庫,我的名字為"ry",並在數據庫中運行若依自帶的數據庫構建文件,文件位於sql文件夾中。

若依框架 -------- vue3+element-plus(三)_51CTO博客_數據庫_04

右擊我們所在的ry庫,按照如下步驟找到導入sql文件的地方:

若依框架 -------- vue3+element-plus(三)_51CTO博客_#java_05

接着找到剛才説的sql文件,點擊並運行,ry庫中會出現若依給的一系列表。

數據庫構建完成後,我們需要對本地的數據庫連接進行一些配置:

  1. 對redis進行配置

若依框架 -------- vue3+element-plus(三)_51CTO博客_#intellij-idea_06

在如上地方找到redis的配置代碼,對地址、端口、密碼進行配置,改成自己需要的,如果沒有設置密碼等則保持不變。

若依框架 -------- vue3+element-plus(三)_51CTO博客_數據庫_07

在如上地方找到mysql的配置代碼,把url部分改成自己的端口和數據庫,如我的 “…端口/數據庫名?…”,並輸入自己數據庫的賬號和密碼。

完成了上述內容,則可以運行若依後端項目:

若依框架 -------- vue3+element-plus(三)_51CTO博客_數據庫_08

運行成功的標誌為下方圖片:

注意:確保自己的mysql和redis服務都已經啓動

若依框架 -------- vue3+element-plus(三)_51CTO博客_#intellij-idea_09

我們進入8080端口查看是否真的啓動成功,啓動成功如下:

若依框架 -------- vue3+element-plus(三)_51CTO博客_#後端_10

至此,後端的搭建已經完成。

前端vue3搭建部分:

首先還是下載對應的gitee項目,這裏給出我的gitee前端初始化倉庫地址若依Vue3前端項目初始化: 用於快速在本地初始化Vue3的若依前端工程

當然大家可以去找最新的地址

下載到本地後,用vscode或WS打開前端項目,並進行依賴下載,在此之前我們需要確保我們的node版本在16及以上:

若依框架 -------- vue3+element-plus(三)_51CTO博客_#前端_11

接着在vscode或ws終端中,輸入如下命令:

npm install --registry=https://registry.npmmirror.com

該過程中可以有人會出現如下情況:VSCode無法運行npm和yarn,顯示"···因為此係統上禁止運行腳本···"

這個情況在我的博客裏也有解決方法,自行查看即可。

等待依賴下載完成後執行如下命令:

npm run dev

這裏要注意的是,我把前端的默認端口改成了81,如果需要改成別的,在如下位置修改:

若依框架 -------- vue3+element-plus(三)_51CTO博客_數據庫_12

運行成功後,會自動打開前端窗口,在此之前確保後端項目正常運行。

如果都成功了,則會出現若依前端界面,並出現驗證碼功能(這是驗證前後端是否聯通的標誌)

若依框架 -------- vue3+element-plus(三)_51CTO博客_#後端_13

至此,你的若依初始化工程已經搭建完成,開始你的二次開發吧,祝賀!