node + koa + mysql + vue作一個公司內部需求網站

前言

用 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
    裏面封裝的數據庫操做方法，完成對數據庫的讀寫操做，
    並返回相應數據。
複製代碼

一、後端入口文件：server/app.js

引入 koa 已經相關中間件，new 一個 koa 對象 app，使用 app.use 進行加載各個中間件並監聽 3000 端口。 這樣的話，對外暴露的就是 3000 端口，等路由和數據庫操做部分操做完，就能夠經過 http://localhost:3000/+路由地址進行接口請求

二、路由文件：

server/router/api.js

server/router/index.js

引入 koa-router，根據文檔編寫接口，並導出接口

三、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 語句的拼接

四、編寫控制器

server/controllers/needs.js

server/controllers/user.js

對應路由文件裏面的回調函數，調用 models 裏面對數據庫操做的 方法並返回相應的內容給到接口

五、編寫 models

server/models/needs.js

server/models/needs.js

models 裏面定義對數據庫操做的方法，在server/util/db.js中，定義了一個名爲 query 的方法，主要是使用這個方法。

有一部分是能夠在server/util/db.js裏面單獨定義一個函數，例如：insertData()、deleteNeedById()等，這樣可讓代碼看起來更加語義化，也減小了耦合

---

前端代碼實現

---

一、採用 vue-cli 直接生成 vue 的模板項目，安裝依賴而且跑起來

vue init webpack needs

  cd needs

  npm install

  npm run dev
複製代碼

二、編寫路由文件

路由文件：client/src/router/index.js

三、頁面編寫，代碼比較多，就不貼了，附上傳送門吧

四、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吧~