本文叫你如何輕松配置系統設計的功能架構，讓開發不再困難，剩下的你就可以cv操作了。
01 前言
如無意外，大家最近也應該也是在家里學（閑）習（魚）吧，不過我還是建議一下大家，新的風暴已經出現，怎么能夠停滯不前... 似乎想起了什么。不論如何現在是大四狗最忙碌的時候了，而且大家也應該利用這段時間好好鞏固自己的知識點，爭取在一兩個月內做出一個比較像樣的項目，好給自己的大學一個交代。
不管怎么說，一個好的項目是可以寫在自己的簡歷上面的，一不小心可能你就憑着這個項目拿到滿意的offer。所以本文就給那些還在困惑的孩子們一個導向，希望你們也可以做出一個屬於自己的項目。我深知大家的難處，因為我之前也是苦於這種設計系統的問題，找了多方資料也不怎么理想，所以我覺得分享是對我們程序員最好的回報。
最近我也是在弄相關的事情，奈何導師又給你一個新的需求。還能怎么辦，做唄。這一次我就新增了一個后台管理系統，方便管理人員的操作，折騰了一晚上加一早上，嘗試了幾種方案都不太滿意，現在我就把自己遇到的坑和問題都說出來，為大家填坑。我使用開源的項目vue+element-ui+mysql+node+express的組合。
02 開源管理系統
大家應該對現在的前端框架vue比較熟悉了，基本上如果你是從事前端行業的話是必學的框架之一。推薦這個框架是因為上手比較簡單，對新手比較友好，而且生態完善，每天都有無數的程序員為你排憂解難，這就是生態好的好處。好了廢話不多說，接下來就是推薦兩個比較好的開源項目。
- vue-element-admin
這是一個比較大型的后台管理系統，包含了很多的東西與功能，如果你是一個新手的話可能hold不住，畢竟他的項目是比較完善的，但好在也有完善的文檔。大家自己可以自由查看，當然你也可以好好研究里面的架構層次是怎么設計的。一般來說你要學習某一項新的技術，查看別人現成的項目是很有幫助的。畢竟人家可是掉了一地的頭發才開發出這么一個偉大的系統，造福大家年輕的程序員。
- Ant Design Pro
這是一個由螞蟻金服出品的后台管理系統，也是非常不錯的模板項目，可以做到開箱即用，界面美觀，文檔詳細，居家旅行都可以一看。跟前面的一樣，這也是一個龐大的框架，因為也有很多集成的功能，但是大家也可以看一下里面的架構是怎么設計的，相信你會有一個很不錯的收獲。
不過大家千萬不要直接拿來當畢業設計哦，但是說一個比較實在的話，很多高校的講師並不會關注互聯網的發展，也有一些還是教你用jQuery的，想想都覺得可怕。上面提到的模板有老師不知道也是正常。所以同學們一定要關注互聯網的發展，特別是前端，隔三差五更新一個新的技術出來也是正常的。
我相信很多高校也該沒有教你這些東西和技術，也沒有推薦你看一下那個開源項目很不錯，基本上都是c語言、c++、java、jsp等編程語言的入門級學習，好了不扯這個了。
比較好的我就覺得是這兩個了，有一些是結合bootstrap的，大家也可以看一下。不過現在主流的都是使用element-ui和ant-design組件庫，所以我們也順應潮流。
03 從零開始
說是從零開始，但是你也必須要有js基礎，有命令行的基礎，你知道什么是node和npm這些東西。你可以去官網上面先安裝vue，使用他們的腳手架vue-cli搭建一個項目。這個過程比較簡單，你只需要幾個常用的命令就可以實現了。不過這次我使用了github上面的一個開源項目，因為省去了自己配置的步驟（是因為懶）。查看地址
接下來講的就是如何自己寫接口，連接mysql數據庫以及通過前端的調用返回數據，這里就不是假數據了，而是真實存在的數據。
在開始之前，你需要把項目clone下來，執行npm i 安裝一下本身的依賴。
假如你的網不是很好，你可以切換到淘寶的鏡像源地址，只需在命令后面加上--registry= https: //registry.npm.taobao.org即可。國內的相對來說比較快，也不容易出錯，假如你不加的話可能會安裝失敗。示例如下：
npm install --registry=https://registry.npm.taobao.org
然后你還要安裝一下以下依賴：
npm install element-ui --save （回車，這是組件庫）
npm install axios --save （回車，這是請求發送的方法）
npm install mysql --save （回車，數據庫連接）
npm install express --save （回車，便於獲取數據）
npm install body-parser --save （回車，解析響應
然后我們可以在main.js下面把axios添加到vue的原型上面，方便調用。
import axios from 'axios'; Vue.prototype.$axios = axios //全局注冊，使用方法為:this.$axios
04 數據庫
數據庫我們選用的是關系型數據庫mysql，可視化工具是navicat。
首先大家可以看一下剛創建好的項目，我們可以在src目錄下面創建一個文件夾server，這個文件夾用於存放數據庫配置和數據庫連接相關的代碼。
文件夾里面創建幾個文件，分別用於存放配置，連接等相關內容。為什么要分這么多個呢？原因就是我們之前提到的解耦問題，把賣二手手機號碼地圖耦合性降到最低。方便以后修改和更新接口等操作，不然如果你全都寫在一個文件里面就會很繁瑣。
- api.js 用於配置一些接口，就是你以后調用的接口返回相應的數據庫數據
- sqlMap.js 用於編寫一些sql語句，就是上面的接口的實際實現過程
- router.js 接口路由相關
- index.js 這里就是總的導出文件，就是簡單的http服務
接下來實現每一個文件的編寫
api.js
const mysql = require('mysql'); const sqlMap = require('./sqlMap'); //創建鏈接對象 const pool = mysql.createPool({ host: '47.98.151.134', user: 'root', port: 3306, password: 'Wqs2019..', database: 'design', multipleStatements: true // 多語句查詢 }) module.exports = { getValue(req, res, next) { pool.getConnection((err, connection) => { var sql = sqlMap.getValue; connection.query(sql, (err, result) => { res.json(result); connection.release(); }) }) } }sqlMap.js
var sqlMap = { getValue: 'SELECT * FROM test;' } module.exports = sqlMap;
router.js
const express = require('express'); const router = express.Router(); const api = require('./api'); router.get('/getValue', (req, res, next) => { api.getValue(req, res, next); }); module.exports = router;
index.js
const routerApi = require('./router'); const bodyParser = require('body-parser'); // post 數據是需要 const express = require('express'); const app = express(); app.use(bodyParser.json()); // 后端api路由 app.use('/api', routerApi); // 監聽端口 app.listen(3000); console.log('success listen at port:3000......');
上面的代碼完善之后你就可以在server的目錄下面執行，node index.js開啟服務，它會監聽3000端口的內容。
05 前端文件
接下來我們就隨便找一個文件測試一下，我們可以選擇剛剛創建好的helloworld.vue文件測試一下，寫一個點擊事件，然后在methods里面實現請求。
<template> <div> <p @click="go">首頁</p> </div> </template> <script> export default { data() { return {} }, methods: { go() { this.$axios.get('/api/getValue', { params: {} }).then( (res) => { console.log('res', res); }) } } } </