前言
用 node 作為後端支援已經比較成熟了，很早以前就想自己動手，從零開始，前端+後端+資料庫+部署都自己操作。最近剛好 PM 想要一個公司內部的需求網站，並且公司的後端大佬們，沒時間來寫介面。? 那就讓我們動起手來，就有了這個專案。
前置技能：
本專案，難度不大，只需要稍微花一點時間和有一點耐心，就可以掌握。
涉及的技術點和需要了解掌握的的技術如下：（就是要看文件啦~，痛苦的一匹）
後端：
node （只是用了node的環境，基本上沒有它什麼事）
koa （基於koa搭建後端服務，提供api）
koa-router （koa的路由中介軟體）
koa-bodyparser （處理koa POST請求引數 的中介軟體）
koa-cors （處理跨域問題的中介軟體）
mysql （資料庫，沒啥好說的）
前端：
vue （基於vue搭建的後端服務）
vue-router （vue-cli搭建的時候選一下就好了）
axios （ajax請求庫）
element-ui （UI庫）
複製程式碼專案結構
└──needs
├── client （前端專案）
│ ├── build （vue-cli生成，專案配置）
│ ├── config （vue-cli生成，專案配置）
│ ├── src
│ │ └── api （api地址）
│ │ └── assets （靜態資源）
│ │ └── components （公共元件）
│ │ └── router （路由）
│ │ └── style （公共樣式）
│ │ └── views （各頁面）
│ │ └── App.vue （頁面入口）
│ │ └── elementUI.js （按需載入elementUI)
│ │ └── main.js （程式入口）
│ ├── needs (需求上傳地址)
├── server （後端專案）
│ ├── contorllers （控制器）
│ ├── models （資料層）
│ ├── routers （路由）
│ ├── util （工具）
│ ├── app.js （專案入口）
└── readme.md
複製程式碼資料庫
本專案需要兩個表
needs 表：
user 表：
手動建立即可，sql 語句建立也行，反正有資料庫，有表就 OK 了
後端程式碼實現
後端介面的具體工作流程如下：
訪問 api 地址
>>> 在 routers 裡面對應 api 地址，呼叫回撥函式
>>> 在 controllers 裡面響應回撥，呼叫運算元據庫函式
>>> 在 models 裡面實現了運算元據庫的函式，通過 util
裡面封裝的資料庫操作方法，完成對資料庫的讀寫操作，
並返回相應資料。
複製程式碼1、後端入口檔案：
server/app.js
引入 koa 已經相關中介軟體，new 一個 koa 物件 app，使用 app.use 進行載入各個中介軟體並監聽 3000 埠。
這樣的話，對外暴露的就是 3000 埠，等路由和資料庫操作部分操作完，就可以通過 http://localhost:3000/+路由地址進行介面請求
2、路由檔案：
server/router/api.js
server/router/index.js
引入 koa-router，根據文件編寫介面，並匯出介面
3、MySQL 資料庫
- 主要程式碼：
server/util/db.js
a、引入 mysql b、通過 mysql.createPool 建立連線池 c、編寫一個 query 方法用以執行 sql 語句 d、pool.getConnection 建立資料庫連結，通過回撥中的連線上下文 connection 中的 query 方法執行 sql 語句，執行完畢就釋放當前連線
- 自定義資料庫操作方法：
server/util/dbMethods.js
andWhere 函式用來處理多個可選引數的時 sql 語句的拼接
4、編寫控制器
server/controllers/needs.js
server/controllers/user.js
對應路由檔案裡面的回撥函式，呼叫 models 裡面對資料庫操作的 方法並返回相應的內容給到介面
5、編寫 models
server/models/needs.js
server/models/needs.js
models 裡面定義對資料庫操作的方法，在server/util/db.js中，定義了一個名為 query 的方法，主要是使用這個方法。
有一部分是可以在server/util/db.js裡面單獨定義一個函式，例如：insertData()、deleteNeedById()等，這樣可以讓程式碼看起來更加語義化，也減少了耦合
前端程式碼實現
1、採用 vue-cli 直接生成 vue 的模板專案，安裝依賴並且跑起來
vue init webpack needs
cd needs
npm install
npm run dev
複製程式碼2、編寫路由檔案
路由檔案：client/src/router/index.js
3、頁面編寫，程式碼比較多，就不貼了，附上傳送門吧
4、api 對接
axios 配置檔案：client/src/api/axios.js
主要是，介面地址以及對請求的攔截
需求相關的介面：client/src/api/modules/needs.js
使用者相關的介面：client/src/api/modules/user.js
api 的的入口檔案：client/src/api/index.js
前端部分比較簡單，需要講的不多，相信大佬們要寫一個出來，也是分分鐘的事~
如果覺得本文對你有一點幫助的話，留下一個start吧~