本文將介紹如何基於node-koa搭建一個完整的mvc及restAPI的專案，專案封裝了路由、模板引擎、 靜態檔案載入等基本功能；首先介紹專案的安裝啟動及目錄結構說明，然後通過一個簡單的登入頁說明mvc的搭建和使用、通過一個人員表格的增刪查改說明restAPI的搭建和使用，最後將簡單說明各模組的實現方式；
檢視效果：http://39.106.166.212:3000
http://39.106.166.212:3000/user
檢視專案： https://github.com/pangyongsheng/node-koa-REST-API
一、下載安裝並啟動專案
下載： git clone https://github.com/pangyongsheng/node-koa-REST-API.git
切換到目錄 ： cd koa
安裝依賴包： npm install
啟動專案： npm run start
訪問： http://127.0.0.1:3000/
介面如下：
二、專案目錄結構說明
koa
├── app.js 服務啟動檔案
├── controller.js 遍歷controllers資料夾下全部介面檔案新增到路由中
├── rest.js 封裝restAPI返回資料處理，簡化api寫法--rest方法
├── templating.js 封裝模板引擎載入view下模板檔案，--render方法
├── static-file.js 封裝靜態檔案載入方法
│
├── controllers 該目錄下放置所有介面檔案，如：
├── api.js restAPI介面
├── index.js 首頁介面
├── ...
├── view 該目錄下放置檢視模板檔案，可使用nunjucks模板語法：如
├── base.html 基礎模板-header及footer
├── index.html 首頁
├── ...
├──server 該目錄下放置資料處理類js檔案：如抽取同類業務資料處理方法
├──server.js
├── ...
├──data 該目錄下放置資料庫處理檔案
├──config.js 資料庫配置檔案
├── ...
├──static 改目錄下放置前端靜態檔案，如一些前端類庫、ui、及圖片等
├──css
├──js
├──...
├── package.json
三、MVC搭建登入頁
1、編寫頁面程式碼
（1）在view目錄下建立base.html檔案，編寫頁面頁面頭部和尾部的程式碼作為檢視部分，在這裡我們用到了nunjucks的模板語法，這樣可以讓其他的頁面直接呼叫base.html的程式碼；
頁面程式碼如上圖，這裡面把文件申明及<head>內的程式碼、<header>和<footer>三部分程式碼作為公共部分
其他頁面可以直接呼叫base.html然後編寫中間的內容（即{% block main%}到{% endblock}中間）即可；
這裡注意 <title>標籤內為{{title}},這裡需要我們在呼叫頁面時直接傳入標題名稱欄位；
（2）在view'目錄下建立index.html，編寫登入頁表單程式碼；
這裡我們首先通過{{% extends "base.html" %}}引入公共檢視部分，然後在{{%block mian%}}和{{%block end%}}編寫登入表單；
2、新增訪問介面
（1）在controllers目錄下建立index.js檔案，作為登入頁面的介面檔案；
這裡，'GET /'表示請求方式為 get 請求url為/ 即預設路徑
ctx.render是已經封好的方法，傳入要返回的頁面檔案即可，這裡我們返回登入頁，及index.html頁
傳參{title:'KOA'}是我們給頁面模板傳的引數，及在前面模板中<title>預留的值，
（2）訪問hostlocal:3000/即可看到如下登入頁：
3、新增表單處理介面（post）
上一步總完成登入頁的功能，在登入點選提交時，會將post請求提交到/signin,
首先我們按以上的方式在view目錄下編寫頁面登入成功signin-ok.html和失敗sigin-fialed.html;（詳細程式碼見專案）
在controller目錄下編寫signin.js處理登入提交到post /signin的資訊；
'POST /signin' 表示請求方式和請求url為/signin
通過ctx.request.body獲取請求引數判斷資料是否正確，並返回對應的頁面
四、restAPI實現表格資訊的增刪查改
1、建立一個人員資訊表格頁面
（1）在view目錄下編寫檢視檔案userList.html （並在頁面中新增js邏輯程式碼）
為了簡化程式碼這裡使用vue雙向繫結實現，
get/api/userlist介面在下一節介紹
（2）在controllers目錄下新增訪問介面list.js
與前面登入方法類似，訪問介面為 get /user
（3）訪問hostlocal:3000/user即可看到如下頁面：
頁面完成後我們將通過restAPI介面實現頁面所示按鈕的增刪查改各項功能
2、編寫獲取全部人員資訊的rest介面
（1）在data目錄下建立data-userlist.js作為模擬資料，（模擬資料庫返回資料，為方便這裡不使用資料庫）
（2）在server目錄下編寫user.js編寫資料處理方法，供rest介面使用
這裡建立getAllUser方法直接返回data-userlist中的全部資料
（3）在controllers目錄下建立api.js，用來放置restAPI介面
ctx.rest方法中封裝了返回資料及錯誤處理等功能，這裡直接傳入返回的資料物件即可實現restAPI介面功能
（4）訪問呼叫介面
在上一部中我們呼叫了該介面，返回人員列表資料，並通過列表渲染將資料展示到檢視。
2、新增性別篩選功能
（1）在頁面中新增篩選按鈕，並繫結事件，呼叫性別篩選介面
（2）在api.js中新增api/userlist/m和api/user/f介面，分別用來返回男女人員資訊列表
（3）在server/user.js新增獲取資料方法
3、新增增加使用者功能
（1）在頁面中新增輸入框及按鈕，繫結新增事件
點選儲存後put方式像介面api/adduser傳參新增使用者資訊,在成功回撥中呼叫getlist方法，獲取最新使用者資訊；
（2）在api.js中新增put介面api/adduser-呼叫addUser方法
（3）在server/user.js中新增addUser方法，處理新增的資料
使用者姓名，性別，年齡有前端傳值，id由後臺根據序號排列，然後存入陣列
4、刪除使用者
（1）位頁面刪除按鈕繫結事件並編寫刪除方法向api/userlist介面傳送delete請求
在表格中我們已經新增了刪除按鈕並繫結了del方法，並傳參id,下面直接看del方法
在del方法中呼叫了$tttp.delete方法向 api/userlist傳送delete請求並 傳入引數 id (程式碼中'+x'),然後在成功回撥中刪除掉檢視中的資料（這裡也可以直接呼叫getuser方法）
（2）在api.js中增加delete請求借口，在介面中呼叫sever/user.js中的方法（注意這裡獲取引數方法）
這裡我們通過ctx.parames.id獲取上一步中的傳參id,這裡我們把引數在傳遞個server中的方法
（3）在server/user.js中新增刪除資料方法
5、修改資料
（1）在頁面表格table的部分行列中（可修改的格子）中新增可編輯屬性，並在對應行操作區域新增儲存按鈕，並未儲存按鈕新增sev方法
接著編寫sev方法，通過js操作dom的方法獲取表格中的屬性值，作為修改後的引數呼叫傳送post請求到後臺修改資訊，在成功回撥中呼叫getlist方法查詢最新資料顯示到頁面，提升儲存成功
（2）在api.js中新增修改資訊介面
（3）在server/user.js下編寫修改資訊方法，（這把id作為索引或唯一標識使用）
五、mysql連結封裝
（1）新增資料庫配置檔案，建立連結
（2）封裝資料庫查詢方法
（3）在api中呼叫
至此mvc及restAPI實現增刪查改功能均已新增，專案中還有搜尋的功能與其他篩選方法類似，不做說明；
dome中用到了前端部分使用了vue.js、bootstrap、node模組中用了koa-router、koa-cors等模組詳情見 package.json;
測試模組可資料庫這裡不做說明，但在專案中已新增，可使用；
各個模組功能也說明完畢，實現方法可直接看程式碼，有較清晰註釋；