node-koa搭建MVC/RESTful API项目

本文将介绍如何基于node-koa搭建一个完整的mvc及restAPI的项目，项目封装了路由、模板引擎、静态文件加载等基本功能；首先介绍项目的安装启动及目录结构说明，然后通过一个简单的登录页说明mvc的搭建和使用、通过一个人员表格的增删查改说明restAPI的搭建和使用，最后将简单说明各模块的实现方式；

完整项目地址： 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双向绑定实现，注意：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接口实现页面所示按钮的增删查改各项功能

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作为索引或唯一标识使用）

至此mvc及restAPI实现增删查改功能均已添加，项目中还有搜索的功能与其他筛选方法类似，不做说明；

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

测试模块可数据库这里不做说明，但在项目中已添加，可使用；

各个模块功能也说明完毕，实现方法可直接看代码，有较清晰注释；