Vue-Koa2全棧實現win10風格管理系統（一）

首頁>技術>Echa攻城獅2020-07-21 11:31

Vue-Koa2全棧實現win10風格管理系統（一）

前言

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~~~

完整專案地址：https://github.com/HongqingCao/vue-win10-admin

本篇文章是【Vue-Koa2全棧實現win10風格管理系統】交個朋友系列（1）-基礎階段，主要講述：專案框架搭建思想一、目前專案情況

二、專案展望

Vue3釋出後會考慮同步更新，TS重寫，mock資料的搭建，更多其他有趣的功能開發~

二、專案技術架構

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

三、專案搭建（0）專案初始化

開發環境: 安裝 node + mysql,專案框架是由vue-cli 構建的編譯器: Visual Studio Code(個人習慣,其他也可) 資料庫視覺化工具: Navicat for MySQL(個人習慣,其他也可) 介面除錯工具: Postman(個人習慣,其他也可)

（1）專案目錄

├── public // 專案前端html模板├── server // 服務端原始碼│&nbsp;&nbsp; ├── config  // 服務端基礎配置│&nbsp;&nbsp; │&nbsp;&nbsp;&nbsp;&nbsp;├── config.js // 資料庫資訊配置和金鑰│&nbsp;&nbsp; │&nbsp;&nbsp;&nbsp;&nbsp;├── db.js // 配置Sequelize的資料庫連結│&nbsp;&nbsp; ├── controllers // 控制器│&nbsp;&nbsp; ├── module  // 資料表模型│&nbsp;&nbsp; ├── routes  // 服務端路由│&nbsp;&nbsp; ├── utils // 服務端封裝的基礎工具│&nbsp;&nbsp; ├── validate // 服務端請求引數校驗檔案│&nbsp;&nbsp; ├── app.js  // 服務端啟動檔案├── src // 前端原始碼│&nbsp;&nbsp; ├── api  // 前端所有請求│&nbsp;&nbsp; ├── assets  // 前端主題 字型等靜態資源│&nbsp;&nbsp; ├── components // 前端全域性公用元件│&nbsp;&nbsp; ├── dictionary // 前端字典│&nbsp;&nbsp; ├── filtres // 前端全域性 filter│&nbsp;&nbsp; ├── layout  // 前端基礎公共佈局│&nbsp;&nbsp; ├── mock  // 前端專案mock 模擬資料│&nbsp;&nbsp; ├── router  // 前端路由│&nbsp;&nbsp; ├── store // 前端全域性 store管理│&nbsp;&nbsp; ├── styles  // 前端全域性樣式和字型圖示│&nbsp;&nbsp; ├── utils // 前端全域性公用方法│&nbsp;&nbsp; ├── views // 前端view│&nbsp;&nbsp; ├── App.vue // 入口頁面│&nbsp;&nbsp; ├── 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檔案

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

dev 是啟動前端專案，方便單獨開發前端 server 是啟動服務端，方便單獨開發服務端 start 是同時啟動服務端和前端服務

值得一提是這裡用了同時啟動服務端和前端服務的方案用concurrently外掛，這樣可以讓npm script命令同時開啟多個監聽服務，而且如果一個程序服務失敗，其他程序服務仍然繼續執行，甚至不會注意到其中的區別，贊~

（3）專案啟動

步驟一、建立一個空的mysql資料庫（如：db_win），可以直接匯入建立資料庫和資料, 在'server/mysql/db_win.sql'

步驟二、在server/config/config.js修改相關資料庫配置

const config = { // 啟動埠 port: 3000, //祕鑰 secret:&#39;win10&#39;, // 資料庫配置 database: { dbName: &#39;db_win&#39;, host: &#39;localhost&#39;, port: 3306, user: &#39;root&#39;, password: &#39;123456@cao&#39;, timezone: &#39;+08:00&#39; }}module.exports = config