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;

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

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