【Vue-Koa2全棧擼win10風格管理系統】交個朋友系列（1）

時間 2020-07-21

標籤 vue koa2 koa win10 win 風格管理系統朋友系列欄目 Windows 简体版

原文原文鏈接

前言

vue-win10-adminhtml

這多是目前惟一一個用Vue+Koa構建較爲完整windows10風格的開源先後端集成的管理系統(效果以下圖)
前端 Vue + Vuex + Vue-Router + Element+UI
後端 Node + koa2 + Sequelize
數據庫 mysql

【vue-koa2全棧擼win10風格管理系統】交個朋友系列文章，帶各位全棧擼win10風格管理系統開發，固然項目也參考不少優秀的先後端項目構建方案（好比vue-element-admin、win10ui、winadmin、BBS_node）和我在工做中的一些中的一些經驗應用， 主要是交個朋友的心態，若是你對這個項目有興趣，也但願你的加入一塊兒完善維護這個項目，let go~~~

完整項目地址：vue-win10-admin前端

本篇文章是【vue-koa2全棧擼win10風格管理系統】交個朋友系列（1）-基礎階段，主要講述：項目框架搭建思想

1、目前項目狀況

序號	功能	功能	描述
0	前端系統功能	開發中	儀表盤工做臺、分析頁面、主題設置
1	前端系統UI	已完成	win10風格桌面系統：仿開始菜單、快捷菜單、任務欄、消息、支持窗口大小拖動（有小bug待修復）
2	前端功能	已完成	(1)登陸、動態菜單和權限生成 (2)系統設置：權限設置、角色設置、用戶設置、系統日誌 (3)平臺管理：桌面背景設置
3	後端	已完成	跨域解決、token 統一攔截、權限攔截、路由合併、基本完成相關功能的API開發

2、項目展望

Vue3發佈後會考慮同步更新，TS重寫，mock數據的搭建，更多其餘有趣的功能開發~vue

2、項目技術架構

粗糙畫了個技術棧圖，大概意思一下node

3、項目搭建

（0）項目初始化

開發環境: 安裝 node + mysql,項目框架是由 vue-cli 構建的
編譯器: Visual Studio Code(我的習慣,其餘也可)
數據庫可視化工具: Navicat for MySQL(我的習慣,其餘也可)
接口調試工具: Postman(我的習慣,其餘也可)

（1）項目目錄

├── public                     // 項目前端html模板
├── server                     // 服務端源代碼
│   ├── config                 // 服務端基礎配置
│   │    ├── config.js         // 數據庫信息配置和密鑰
│   │    ├── db.js             // 配置Sequelize的數據庫連接
│   ├── controllers            // 控制器
│   ├── module                 // 數據表模型
│   ├── routes                 // 服務端路由
│   ├── utils                  // 服務端封裝的基礎工具
│   ├── validate               // 服務端請求參數校驗文件
│   ├── app.js                 // 服務端啓動文件
├── src                        // 前端源代碼
│   ├── api                    // 前端全部請求
│   ├── assets                 // 前端主題 字體等靜態資源
│   ├── components             // 前端全局公用組件
│   ├── dictionary             // 前端字典
│   ├── filtres                // 前端全局 filter
│   ├── layout                 // 前端基礎公共佈局
│   ├── mock                   // 前端項目mock 模擬數據
│   ├── router                 // 前端路由
│   ├── store                  // 前端全局 store管理
│   ├── styles                 // 前端全局樣式和字體圖標
│   ├── utils                  // 前端全局公用方法
│   ├── views                  // 前端view
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 加載組件 初始化等
│   ├── permission.js          // 權限管理
│   └── settings.js            // 基礎設置
├── .env.development           // 開發環境全局變量配置
├── .env.prod                  // 生產環境全局變量配置
├── .env.test                  // 測試環境全局變量配置
├── babel.config.js            // babel 配置項
├── package.json               // package.json
├── .gitignore                 // git 忽略項
└── vue.config.js              // vue配置文件

（2）項目運行介紹

咱們看到 package.json文件mysql

"scripts": {
    "dev": "vue-cli-service serve",
    "server": "nodemon server/app",
    "start": "concurrently -k \"npm run server\" \"npm run dev\"",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

dev 是啓動前端項目，方便單獨開發前端
server 是啓動服務端，方便單獨開發服務端
start 是同時啓動服務端和前端服務

值得一提是這裏用了同時啓動服務端和前端服務的方案
用concurrently插件，這樣可讓npm script命令同時開啓多個監聽服務，並且若是一個進程服務失敗，其餘進程服務仍然繼續運行，甚至不會注意到其中的區別，贊~git

（3）項目啓動

步驟1、建立一個空的 mysql數據庫（如：db_win），能夠直接導入建立數據庫和數據, 在'server/mysql/db_win.sql'
步驟2、在server/config/config.js修改相關數據庫配置github

const config = {
  // 啓動端口
  port: 3000,
  //祕鑰
  secret:'win10',
  // 數據庫配置
  database: {
    dbName: 'db_win',
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: '123456@cao',
    timezone: '+08:00'
  }
}

module.exports = config