Vue 3.0 + Element-Plus + Ruoyi

沫漓fighting發表於2024-04-01
Vue

1 專案搭建

1.1 專案原始碼

1.2 專案架構

  • 後端目錄結構
    • ruoyi-admin：後臺服務的核心模組，包含主要的業務處理邏輯。
    • ruoyi-common：公共模組，包含工具類和通用程式碼。
    • ruoyi-framework：框架核心，包含安全、配置和核心管理功能。
    • ruoyi-generator：程式碼生成模組，用於自動生成程式碼。
    • ruoyi-quartz：定時任務模組，管理定時任務。
    • ruoyi-system：系統基礎模組，包含使用者、許可權、日誌等基礎服務。
    • pom.xml：Maven配置檔案，管理專案依賴。
  • 前端目錄結構（ruoyi-ui）
    • src：存放原始碼。
      • api：存放各種API呼叫介面。
      • assets：存放靜態資源，如圖片、樣式檔案。
      • components：存放Vue元件。
      • layout：應用的佈局元件。
      • router：Vue路由配置。
      • store：Vuex狀態管理。
      • views：應用的檢視檔案。
    • public：存放公共檔案，如index.html。
    • package.json：Node.js的配置檔案，管理前端專案的依賴。

1.3 搭建

  • 專案下載或拉取到本地
  • 環境準備
    • node.js (npm命令)
    • mysql
    • redis
    • jdk
    • maven自定義倉庫
  • mysql資料庫搭建
    • 建立ry-vue資料庫，編碼規則為utf8mb4，否則執行指令碼後，專案執行報錯
    • 執行sql資料夾下兩個sql指令碼
  • 後端配置修改
    • ruoyi-admin\src\main\resources\application-druid.yml
      • 資料庫使用者名稱與密碼修改
      • 如果redis設定密碼，也需要修改

1.4 執行

  • 開啟redis服務（可直接執行redis-server.exe）
    image
  • 後端直接執行
    image
  • 前端
    • 使用cmd命令視窗，只一次執行需要先執行
      npm install
    • 再執行（非第一次直接執行該命令）
      npm run dev
      image
    • 訪問地址
    • 登入
      • 賬號admin
      • 密碼admin123
        image

2 新模組搭建

2.1 後端程式碼

2.1.1 模組搭建

  • 可以複製已有資料夾，如ruoyi-system，刪除內部檔案，修改下圖兩個藍色資料夾名為test
    Vue 3.0 + Element-Plus + Ruoyi

2.1.2 建立資料庫表

舉例

CREATE TABLE `test_order`  (
  `order_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '訂單ID',
  `order_name` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '' COMMENT '訂單名稱',
  `order_group` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'DEFAULT' COMMENT '訂單組名',
  PRIMARY KEY (`order_id`) USING BTREE
) ENGINE = InnoDB 
AUTO_INCREMENT = 1 
CHARACTER SET = utf8mb4 
COLLATE = utf8mb4_unicode_ci 
COMMENT = '訂單明細表' 
ROW_FORMAT = Compact

相關文章