node-koa搭建MVC/RESTful API項目

時間 2019-11-13

標籤 node koa 搭建 mvc restful api 項目简体版

原文原文鏈接

本文將介紹如何基於node-koa搭建一個完整的mvc及restAPI的項目，項目封裝了路由、模板引擎、靜態文件加載等基本功能；首先介紹項目的安裝啓動及目錄結構說明，而後經過一個簡單的登陸頁說明mvc的搭建和使用、經過一我的員表格的增刪查改說明restAPI的搭建和使用，最後將簡單說明各模塊的實現方式；

完整項目地址： https://github.com/pangyongsheng/node-koa-REST-API css

查看效果：http://39.106.166.212:3000

http://39.106.166.212:3000/user

1、下載安裝並啓動項目

　　下載：　　　　 git clone https://github.com/pangyongsheng/node-koa-REST-API.githtml

　　切換到目錄： cd koa前端

　　安裝依賴包： npm installvue

　　啓動項目：　　 npm run start　node

訪問：　　 http://127.0.0.1:3000/ mysql

　　界面以下：git

　　

2、項目目錄結構說明

　　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.jsongithub

3、MVC搭建登陸頁

一、編寫頁面代碼

（1）在view目錄下建立base.html文件，編寫頁面頁面頭部和尾部的代碼做爲視圖部分，在這裏咱們用到了nunjucks的模板語法，這樣可讓其餘的頁面直接調用base.html的代碼；

　　　　　　

頁面代碼如上圖，這裏面把文檔申明及<head>內的代碼、<header>和<footer>三部分代碼做爲公共部分sql

其餘頁面能夠直接調用base.html而後編寫中間的內容（即{% block main%}到{% endblock}中間）便可；數據庫

這裏注意 <title>標籤內爲{{title}},這裏須要咱們在調用頁面時直接傳入標題名稱字段；

（2）在view'目錄下建立index.html，編寫登陸頁表單代碼；

　　　　　　

這裏咱們首先經過{{% extends "base.html" %}}引入公共視圖部分，而後在{{%block mian%}}和{{%block end%}}編寫登陸表單；

二、添加訪問接口

（1）在controllers目錄下建立index.js文件，做爲登陸頁面的接口文件；

　　　　　　

這裏，'GET /'表示請求方式爲 get 請求url爲/ 即默認路徑

ctx.render是已經封好的方法，傳入要返回的頁面文件便可，這裏咱們返回登陸頁，及index.html頁

傳參{title:'KOA'}是咱們給頁面模板傳的參數，及在前面模板中<title>預留的值，

（2）訪問hostlocal:3000/便可看到以下登陸頁：

　　　　　　

三、添加表單處理接口（post）

上一步總完成登陸頁的功能，在登陸點擊提交時，會將post請求提交到/signin,

首先咱們按以上的方式在view目錄下編寫頁面登陸成功signin-ok.html和失敗sigin-fialed.html;（詳細代碼見項目）

在controller目錄下編寫signin.js處理登陸提交到post /signin的信息；

　　　　　　

'POST /signin' 表示請求方式和請求url爲/signin

經過ctx.request.body獲取請求參數判斷數據是否正確，並返回對應的頁面

　　　　　　

4、restAPI實現表格信息的增刪查改

一、建立一我的員信息表格頁面

（1）在view目錄下編寫視圖文件userList.html （並在頁面中添加js邏輯代碼）

　　　　　　

　　　　　　

爲了簡化代碼這裏使用vue雙向綁定實現，注意：vue中模板編譯和nunjucks編譯{{}}符號會衝突，需修改vue的編譯格式，在vue中配置delimiters:['${', '}']

頁面中使用v-for循環顯示錶格，在js中添加方法getlist經過接口api/userlist獲取所有數據，並在vue生命週期created中調用改方法。（詳細代碼見項目中view/userList.html）

get/api/userlist接口在下一節介紹

（2）在controllers目錄下添加訪問接口list.js

　　　　　　　　

與前面登陸方法相似，訪問接口爲 get /user

（3）訪問hostlocal:3000/user便可看到以下頁面：

　　　　　　

頁面完成後咱們將經過restAPI接口實現頁面所示按鈕的增刪查改各項功能

二、編寫獲取所有人員信息的rest接口

（1）在data目錄下建立data-userlist.js做爲模擬數據，（模擬數據庫返回數據，爲方便這裏不使用數據庫）

　　　　　　

（2）在server目錄下編寫user.js編寫數據處理方法，供rest接口使用

這裏建立getAllUser方法直接返回data-userlist中的所有數據

　　　　　　

（3）在controllers目錄下建立api.js，用來放置restAPI接口

　　　　　　

ctx.rest方法中封裝了返回數據及錯誤處理等功能，這裏直接傳入返回的數據對象便可實現restAPI接口功能

（4）訪問調用接口

在上一部中咱們調用了該接口，返回人員列表數據，並經過列表渲染將數據展現到視圖。

二、添加性別篩選功能

（1）在頁面中添加篩選按鈕，並綁定事件，調用性別篩選接口

　　　　　　　

　　　　　　

（2）在api.js中添加api/userlist/m和api/user/f接口，分別用來返回男女人員信息列表

　　　　　　

（3）在server/user.js添加獲取數據方法

　　　　　　

三、添加增長用戶功能

（1）在頁面中添加輸入框及按鈕，綁定添加事件

　　　　　　

　　　　　　

點擊保存後put方式像接口api/adduser傳參新增用戶信息,在成功回調中調用getlist方法，獲取最新用戶信息；

（2）在api.js中添加put接口api/adduser-調用addUser方法

　　　　　　

（3）在server/user.js中添加addUser方法，處理添加的數據

　　　　　　

用戶姓名，性別，年齡有前端傳值，id由後臺根據序號排列，而後存入數組

四、刪除用戶

（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中添加刪除數據方法

　　　　　　

五、修改數據

（1）在頁面表格table的部分行列中（可修改的格子）中添加可編輯屬性，並在對應行操做區域添加保存按鈕，並未保存按鈕添加sev方法

　　　　　　

接着編寫sev方法，經過js操做dom的方法獲取表格中的屬性值，做爲修改後的參數調用發送post請求到後臺修改信息，在成功回調中調用getlist方法查詢最新數據顯示到頁面，提高保存成功

　　　　　　

（2）在api.js中添加修改信息接口

　　　　　　

（3）在server/user.js下編寫修改信息方法，（這把id做爲索引或惟一標識使用）

　　　　　　

5、mysql連接封裝

　　（1）添加數據庫配置文件，建立連接

　　（2）封裝數據庫查詢方法

　　　　

（3）在api中調用

　　　　

　　

至此mvc及restAPI實現增刪查改功能均已添加，項目中還有搜索的功能與其餘篩選方法相似，不作說明；

dome中用到了前端部分使用了vue.js、bootstrap、node模塊中用了koa-router、koa-cors等模塊詳情見 package.json;

測試模塊可數據庫這裏不作說明，但在項目中已添加，可以使用；

各個模塊功能也說明完畢，實現方法可直接看代碼，有較清晰註釋；

相關文章

相關標籤/搜索

搭建項目環境

gulp 前端項目搭建

紅包項目實戰

網站建設指南

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<