本文将介绍如何基于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;
测试模块可数据库这里不做说明,但在项目中已添加,可使用;
各个模块功能也说明完毕,实现方法可直接看代码,有较清晰注释;