基於 Vue & Koa 的 WebDesktop 視窗系統

基於 Vue & Koa 的 WebDesktop 視窗系統

介紹

X-WebDesktop 是一個基於 Vue && Koa 的仿 Microsoft Windows 風格的web視窗系統。

在線預覽

Url：http://oxoyo.co/X-WebDesktop-Vue/

Account：admin

Password：123456

Screenshot

更新日誌

最新穩定版本：2.0.0

FrontEnd	API
3.x	3.x
2.0.0	2.0.0
1.0.1	1.0.1
1.0.0	-

起步

在你開始閱讀如下章節時，官方指南假設你已瞭解 Vue 和 Koa 相關生態的知識點，並有必定的實際項目經驗。若是你還不是很瞭解請先閱讀 Vue && Koa 相關的文檔。

本地運行

1.clone 前端工程

git clone https://github.com/OXOYO/X-WebDesktop-Vue.git

1.1.安裝依賴

npm i

1.2.運行開發環境

npm run dev
> Starting dev server...
> Listening at http://localhost:8899

2.clone API工程

git clone https://github.com/OXOYO/X-WebDesktop-Api-Koa.git

2.1.安裝依賴

npm i

2.2.導入數據庫文件

Import the "X-WebDesktop-Api-Koa/src/sql/x-webdesktop-v2.sql" file into the database;

2.3.運行開發環境

npm run dev
> Starting dev server...
> x-webdesktop-api is listening to http://localhost:3000

前端架構

技術棧

vue-cli       腳手架

Vue           核心框架
vue-router    路由
vuex          狀態管理
iview         UI庫
axios         Ajax庫
animate.css   動畫庫

webpack       工程化

項目結構

\_ build                      // webpack配置
  \_ config                     // webpack配置
  \_ dist                       // 打包輸出目錄
  \_ docs                       // gh_pages文件目錄
  \_ document                   // 文檔
  \_ src                        // 源碼
    \_ apps                     // 【自開發應用】
      \_ DemoApp                // 【DemoApp】應用
        \_ components           // 組件
        \_ containers           // 容器
        \_ pages                // 頁面
        \_ install              // 自定義應用安裝界面
          \_ Index.vue          // 自定義應用安裝界面入口
        \_ uninstall            // 自定義應用卸載界面
          \_ Index.vue          // 自定義應用卸載界面入口
        \_ store                // Store
          \_ index.js           // Store入口
          \_ actions.js         // action定義
          \_ mutations.js       // mutation定義
          \_ state.js           // state定義
        \_ api.js               // 接口
        \_ config.js            // 配置文件
        \_ Index.vue            // 應用入口文件
        \_ openApi.js           // 對外接口【暫無心義】
        \_ contextMenu.js       // 右鍵菜單配置【暫無心義】
    \_ global                   // 【全局公用】目錄
      \_ components             // 公用組件
      \_ directives             // 公用指令
      \_ plugin                 // 公用插件
      \_ utils                  // 公用工具
    \_ platform                 // 【平臺】
      \_ apps                   // 平臺默認應用
        \_ Admin                // 後臺容器
          \_ components         // 組件
          \_ containers         // 容器
          \_ pages              // 頁面
          \_ store              // Store
          \_ api.js             // 接口
          \_ config.js          // 配置文件
          \_ Index.vue          // 入口組件
          \_ openApi.js         // 對外接口
          \_ contextMenu.js     // 右鍵菜單配置
        \_ ContextMenu          // 右鍵菜單
        \_ Desktop              // 桌面
        \_ DesktopIcon          // 桌面圖標
        \_ DekstopWidget        // 桌面控件
        \_ Home                 // 前臺容器
        \_ Login                // 前臺登陸
        \_ StartMenu            // 開始菜單
        \_ TaskBar              // 任務欄
        \_ TaskBarIcon          // 任務欄圖標
        \_ TaskBarWidget        // 任務欄控件
        \_ Window               // 應用窗口
      \_ store                  // 平臺Store
      \_ config.js              // 平臺配置
      \_ Index.vue              // 平臺入口文件
    \_ App.vue                  // 根入口組件
    \_ config.js                // 根配置信息
    \_ main.js                  // 根入口js
    \_ routers.js               // 根路由js
  \_ static                     // 靜態文件目錄
  \_ index.html                 // 根入口html

API架構

技術棧

Koa               核心框架
koa-router        路由中間件
koa-cors          跨域中間件
axios             Ajax庫
jsonwebtoken      JsonWebToken
log4js            日誌輸出
mysql2            數據庫
sequelize         數據庫ORM

gulp              工程化
pm2               進程管理

項目結構

\_ assets                   // 靜態文件目錄
  \_ build                    // 打包腳本
  \_ dist                     // 打包輸出目錄
  \_ logs                     // 日誌輸出目錄
  \_ src                      // 源碼
    \_ apps                   // 【應用】對應接口目錄
      \_ AccountManagement    // 【帳號管理】應用
        \_ Ctrl.js            // 控制器
        \_ Model.js           // 模型
        \_ Routers.js         // 路由
      \_ ApplicationMarket    // 【應用市場】應用
        \_ Ctrl.js            // 控制器
        \_ Model.js           // 模型
        \_ Routers.js         // 路由
      \_ MyApplication        // 【個人應用】應用
        \_ Ctrl.js            // 控制器
        \_ Model.js           // 模型
        \_ Routers.js         // 路由
      \_ PersonalCenter       // 【我的中心】應用
        \_ Ctrl.js            // 控制器
        \_ Model.js           // 模型
        \_ Routers.js         // 路由
    \_ middleware             // 中間件
    \_ schema                 // 數據庫模型
    \_ platform               // 【平臺】基礎接口目錄
      \_ Ctrl.js              // 控制器
      \_ Model.js             // 模型
      \_ Routers.js           // 路由
    \_ sql                    // 備份SQL文件
    \_ utils                  // 全局工具
    \_ api.js                 // 封裝提供給前端的API
    \_ auth.js                // 鑑權
    \_ config.js              // 全局配置
    \_ db.js                  // 數據庫實例
    \_ routers.js             // 封裝應用路由表
  \_ ecosystem.config.js      // PM2配置
  \_ gulpfile.js              // gulp任務腳本