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

前言

vue-win10-admin

• 這多是目前惟一一個用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數據的搭建，更多其餘有趣的功能開發~

3、項目技術架構

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

4、項目搭建

（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文件

"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命令同時開啓多個監聽服務，並且若是一個進程服務失敗，其餘進程服務仍然繼續運行，甚至不會注意到其中的區別，贊~

（3）項目啓動

步驟1、建立一個空的mysql數據庫（如：db_win），能夠直接導入建立數據庫和數據, 在'server/mysql/db_win.sql'

步驟2、在server/config/config.js修改相關數據庫配置

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
複製代碼

登陸帳號：root, 密碼:root (數據庫存的密碼進行了md5加密)

接下來就能夠愉快的玩耍了~

5、項目拓展

一、 添加新頁面

如今⽂件 src/router/asyncRoutes.js 中按照其餘路由的格式添加新的⻚⾯，添加完成後在使⽤管理員帳號在系統設置-權限設置中新增權限，菜單的路徑與上述⽂件配置中的name字段對應，必須保持⼀致

二、 添加新功能

功能是依附於菜單的，須要先配置系統設置-權限設置 才能在菜單下⾯掛功能接⼝

三、 添加或者更新新數據庫表

在server/model 裏對應添加數據庫模型，根據模型自動建立表，只須要建完模型後，把server/config/db.js 裏把下面這段代碼放開，運行 npm run server或者npm run start ,看到 init db ok，說明數據庫表更新完~

// sequelize
//   .sync({alter: true} )
//   .then(() => {
//     console.log('init db ok')
//   })
//   .catch(err => {
//     console.log('init db error', err)
//   })
複製代碼

三、 添加功能接口

6、總結

【vue-koa2全棧擼win10風格管理系統】交個朋友系列（1）-基礎階段，主要講述：項目框架搭建思想和項目運行相關的配置。目前已經開發完一個基礎項目，接下來【vue-koa2全棧擼win10風格管理系統】交個朋友系列文章，會根據項目搭建和講功能點實現，歡迎你們一塊兒交流~
完整項目地址：vue-win10-admin