前言

用 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 資料庫

1. 主要程式碼：server/util/db.js

a、引入 mysql b、通過 mysql.createPool 建立連線池 c、編寫一個 query 方法用以執行 sql 語句 d、pool.getConnection 建立資料庫連結，通過回撥中的連線上下文 connection 中的 query 方法執行 sql 語句，執行完畢就釋放當前連線

2. 自定義資料庫操作方法：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

前端部分比較簡單，需要講的不多，相信大佬們要寫一個出來，也是分分鐘的事~

完整程式碼移步到 github

如果覺得本文對你有一點幫助的話，留下一個start吧~