node-koa搭建MVC/RESTful API项目

时间:2021-08-04 20:20:08

本文将介绍如何基于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/

  界面如下:

  node-koa搭建MVC/RESTful API项目

二、项目目录结构说明

  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的代码;

      node-koa搭建MVC/RESTful API项目

页面代码如上图,这里面把文档申明及<head>内的代码、<header>和<footer>三部分代码作为公共部分

其他页面可以直接调用base.html然后编写中间的内容(即{% block main%}到{% endblock}中间)即可;

这里注意 <title>标签内为{{title}},这里需要我们在调用页面时直接传入标题名称字段;

(2)在view'目录下创建index.html,编写登录页表单代码;

      node-koa搭建MVC/RESTful API项目

这里我们首先通过{{% extends "base.html" %}}引入公共视图部分,然后在{{%block mian%}}和{{%block end%}}编写登录表单;

2、添加访问接口

(1)在controllers目录下创建index.js文件,作为登录页面的接口文件;

      node-koa搭建MVC/RESTful API项目

这里,'GET /'表示请求方式为 get 请求url为/  即默认路径

ctx.render是已经封好的方法,传入要返回的页面文件即可,这里我们返回登录页,及index.html页

传参{title:'KOA'}是我们给页面模板传的参数,及在前面模板中<title>预留的值,

(2)访问hostlocal:3000/即可看到如下登录页:

      node-koa搭建MVC/RESTful API项目

3、添加表单处理接口(post)

   上一步总完成登录页的功能,在登录点击提交时,会将post请求提交到/signin,

首先我们按以上的方式在view目录下编写页面登录成功signin-ok.html和失败sigin-fialed.html;(详细代码见项目)

在controller目录下编写signin.js处理登录提交到post /signin的信息;

      node-koa搭建MVC/RESTful API项目

'POST /signin' 表示请求方式和请求url为/signin

通过ctx.request.body获取请求参数判断数据是否正确,并返回对应的页面

      node-koa搭建MVC/RESTful API项目node-koa搭建MVC/RESTful API项目

四、restAPI实现表格信息的增删查改

1、创建一个人员信息表格页面

(1)在view目录下编写视图文件userList.html (并在页面中添加js逻辑代码)

      node-koa搭建MVC/RESTful API项目

      node-koa搭建MVC/RESTful API项目

为了简化代码这里使用vue双向绑定实现,注意:vue中模板编译和nunjucks编译{{}}符号会冲突 ,需修改vue的编译格式,在vue中配置delimiters:['${', '}']  

   页面中使用v-for循环显示表格,在js中添加方法getlist通过接口api/userlist获取全部数据,并在vue生命周期created中调用改方法。(详细代码见项目中view/userList.html)

get/api/userlist接口在下一节介绍

(2)在controllers目录下添加访问接口list.js

        node-koa搭建MVC/RESTful API项目

与前面登录方法类似,访问接口为 get /user

(3)访问hostlocal:3000/user即可看到如下页面:

      node-koa搭建MVC/RESTful API项目

页面完成后我们将通过restAPI接口实现页面所示按钮的增删查改各项功能

2、编写获取全部人员信息的rest接口

(1)在data目录下创建data-userlist.js作为模拟数据,(模拟数据库返回数据,为方便这里不使用数据库)

       node-koa搭建MVC/RESTful API项目

(2)在server目录下编写user.js编写数据处理方法,供rest接口使用

这里创建getAllUser方法直接返回data-userlist中的全部数据

      node-koa搭建MVC/RESTful API项目

(3)在controllers目录下创建api.js,用来放置restAPI接口

      node-koa搭建MVC/RESTful API项目

ctx.rest方法中封装了返回数据及错误处理等功能,这里直接传入返回的数据对象即可实现restAPI接口功能

(4)访问调用接口

在上一部中我们调用了该接口,返回人员列表数据,并通过列表渲染将数据展示到视图。

2、添加性别筛选功能

(1)在页面中添加筛选按钮,并绑定事件,调用性别筛选接口

      node-koa搭建MVC/RESTful API项目 

      node-koa搭建MVC/RESTful API项目

(2)在api.js中添加api/userlist/m和api/user/f接口,分别用来返回男女人员信息列表

      node-koa搭建MVC/RESTful API项目

(3)在server/user.js添加获取数据方法

      node-koa搭建MVC/RESTful API项目

3、添加增加用户功能

(1)在页面中添加输入框及按钮,绑定添加事件

      node-koa搭建MVC/RESTful API项目

      node-koa搭建MVC/RESTful API项目

点击保存后put方式像接口api/adduser传参新增用户信息,在成功回调中调用getlist方法,获取最新用户信息;

(2)在api.js中添加put接口api/adduser-调用addUser方法

      node-koa搭建MVC/RESTful API项目

(3)在server/user.js中添加addUser方法,处理添加的数据

      node-koa搭建MVC/RESTful API项目

用户姓名,性别,年龄有前端传值,id由后台根据序号排列,然后存入数组

4、删除用户

(1)位页面删除按钮绑定事件并编写删除方法向api/userlist接口发送delete请求

在表格中我们已经添加了删除按钮并绑定了del方法,并传参id,下面直接看del方法

      node-koa搭建MVC/RESTful API项目

在del方法中调用了$tttp.delete方法向 api/userlist发送delete请求并 传入参数 id  (代码中'+x'),然后在成功回调中删除掉视图中的数据(这里也可以直接调用getuser方法)

(2)在api.js中增加delete请求借口,在接口中调用sever/user.js中的方法(注意这里获取参数方法)

      node-koa搭建MVC/RESTful API项目

这里我们通过ctx.parames.id获取上一步中的传参id,这里我们把参数在传递个server中的方法

(3)在server/user.js中添加删除数据方法

      node-koa搭建MVC/RESTful API项目

5、修改数据

(1)在页面表格table的部分行列中(可修改的格子)中添加可编辑属性,并在对应行操作区域添加保存按钮,并未保存按钮添加sev方法

      node-koa搭建MVC/RESTful API项目

接着编写sev方法,通过js操作dom的方法获取表格中的属性值,作为修改后的参数调用发送post请求到后台修改信息,在成功回调中调用getlist方法查询最新数据显示到页面,提升保存成功

      node-koa搭建MVC/RESTful API项目

(2)在api.js中添加修改信息接口

      node-koa搭建MVC/RESTful API项目

(3)在server/user.js下编写修改信息方法,(这把id作为索引或唯一标识使用)

      node-koa搭建MVC/RESTful API项目

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

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

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

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