基于nodejs平台的下一代web开发框架Koa---（基本用法）---系列1

最新推荐文章于 2024-09-18 15:11:26 发布
最新推荐文章于 2024-09-18 15:11:26 发布
阅读量369 收藏
点赞数
文章标签： nodejs koa 中间件 第三方中间件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42863800/article/details/106210814
版权

O 前提

1.安装nodejs

官方文档：http://nodejs.cn/

  • 简介
    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

nodejs 热重载 Nodemon

Nodemon，它会监测项目中的所有文件，一旦发现文件有改动，Nodemon 会自动重启应用

npm i -g nodemon

运行文件

nodemon app.js (可以省略.js)

2.koa

官方文档：https://koa.bootcss.com/

  • 简介
    Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

安装：

npm i koa

I 起步

基本使用

//app.js  文件名

const Koa = require("koa");
 /* 第一种引入koa路由模块API  需要实例化const router = new Router();
 const Router = require("koa-router");
 const router = new Router(); */
//第二种  不需要实例化  推荐使用
const Router = require("koa-router")();
//实例化
const app = new Koa();



//  第一种路由的嵌套  访问 http://localhost:2560/list
// 编写路由   / 表示根目录   访问 http://localhost:2560/
router.get('/', async ctx => { 
  ctx.body = "Hello";  //f返回的数据  相当于 原生里面的 res.writeHead()  res.end()
})
router.get('/list', async ctx => { 
  ctx.body="Hello"
})

/* //第二种路由的嵌套
router.get('/', async ctx => { 
  ctx.body="Hello"
}).get('/list', async ctx => { 
  ctx.body="Hello"
})
 */

// 启动路由
app.use(router.routes());/* 启动路由 */
   .use(router.allowedMethods()); // 可以配置也可以不配置
//配置端口号   http://localhost:2560/
/* //配置端口号   http://localhost:2560/
app.listen(2560);*/

/* 
app.use(router.allowedMethods());  作用：这是官方文档推荐用法  当所有路由中间件
最后调用后 会根据 ctx.status设置 response的响应头

*/
客户端从发送请求到看到的内容

服务器：接收到请求（request）->处理请求，生成数据->发送数据（response）
在这里插入图片描述

koa帮助我们处理了request和response 我们只需要编写 中间件
ctx; koa处理过的对象
next: 中间件函数---->迭代器
可以判断当前用户是否有权限

知识点

  1. 使用koa模块可以使用俩种引入方式

  • 第一种引入koa路由模块API 需要实例化const router = new Router();
    const Router = require(“koa-router”);
    const router = new Router();

  • 第二种 不需要实例化 推荐使用
    const Router = require(“koa-router”)();

  • 最后启用router
    启动路由
    app.use(router.routes()); 启动路由
    app.use(router.allowedMethods()); 可以配置也可以不配置

  1. router.allowedMethods() 是给数据添加一个响应头

  2. 在中间建中需要添加 async await 也要习惯加 await next()

II koa 详解

0 中间件

通俗讲： 中间件就是匹配路由之前或者匹配路由完成做的一系列操作，我们就可以把它叫做中间件。
中间件的功能包括：
- 执行任何代码。
- 修改请求和响应。
- 终结请求-响应循环。
- 调用堆栈中的下一个中间件

如果我的get,post回调函数中，没有next参数，那么就匹配上第一个路由，就不会往下匹配了，如果想往下匹配的话。那么需要写next()

//匹配所有路由
app.use(async (ctx,next)=>{
await next()
})
//按需匹配路由

app.use(‘路由路径’，async (ctx,next)=>{
await next()
})

1 Koa 中间件的应用

  • 应用级中间件
  • 路由级中间件
  • 错误处理中间件
  • 第三方中间件

1.0 应用级中间件：匹配路由之前做的一系列操作

场景 在匹配所有路由之前打印当前日期

const Koa = require("koa");
const router = require("koa-router")();
//实例化
const app = new Koa();


//中间件
//匹配路由之前 打印时间
app.use((ctx, next) => {
  console.log(new Date())
  await next(); //当前路由匹配完成以后继续向下匹配
})

router.get('/', async ctx => {
  ctx.body = "Hello";
})



router.get('/list', async ctx => {
  ctx.body = "Hello"  //打印Hello7897
})
router.get('/long', async ctx => {
  ctx.body = "Hello"  //打印Hello7897
})


// 启动路由
app.use(router.routes());/* 启动路由 */
app.use(router.allowedMethods()); // 可以配置也可以不配置
app.listen(5055)

1.2 路由级中间件 ： 与路由同路径 多一个参数 next

const Koa = require("koa");
const router = require("koa-router")();
//实例化
const app = new Koa();


router.get('/', async ctx => {
  ctx.body = "Hello";
})

/* 路由级中间件 */
router.get('/list', async (ctx,next) => {
  console.log("这是路由级中间件");//控制台打印这是路由级中间件

  await next();
})
router.get('/list', async ctx => {
  ctx.body = "这是路由级中间件"  //页面打印这是路由级中间件
})


// 启动路由
app.use(router.routes());/* 启动路由 */
app.use(router.allowedMethods()); // 可以配置也可以不配置
app.listen(5055)

1.3 错误处理中间件

const Koa = require("koa");
const router = require("koa-router")();
//实例化
const app = new Koa();

/* 
流程：从内向外依次执行

例1  http://localhost:5055/list/   正确流程

首先进入中间件控制台打印"这是一个中间件"-》》然后匹配路由 -->进入中间件的判断逻辑打印地址
例2  http://localhost:5055/list/ccc
首先进入中间件控制台打印"这是一个中间件"-》》然后匹配路由 -->进入中间件的判断逻，路由中并没有比配的所以打印404



*/
app.use(async (ctx, next) => { 
  console.log("这是一个中间件")
  await next();
  if (ctx.status) {   //如果找不到页面
    ctx.status = 404;
    ctx.body = "这是一个404页面"
  } else { 
    console.log(ctx.url);
    
  }
})

router.get('/list', ctx => { 
  ctx.body='hi'
})

// 启动路由
app.use(router.routes());/* 启动路由 */
app.use(router.allowedMethods()); // 可以配置也可以不配置
app.listen(5055)

1.4 第三方中间件

1.4.0 路由 koa-router

安装

npm i  koa-router

导入

//第一种
const Router = require("koa-router")();
//第二种
const Router = require("koa-router");
const router = new Router();

启动路由

// 启动路由
app.use(router.routes());/* 启动路由 */
   .use(router.allowedMethods()); // 可以配置也可以不配置
动态路由 Get传值
const Koa = require("koa");
const router = require("koa-router")();
//实例化
const app = new Koa();

router.get('/', async ctx => {
  ctx.body = "Hello";
})

//ctx.params.id  获取值   http://localhost:5055/list/7897
router.get('/list/:id', async ctx => {
  ctx.body = "Hello" + ctx.params.id   //打印Hello7897
})
//  传多个值   http://localhost:5055/list/7897/asd
router.get('/list/:id/:id2', async ctx => {
  ctx.body = "Hello" + ctx.params.id +ctx.params.id2  //打印Hello7897asd
})

// 启动路由
app.use(router.routes());/* 启动路由 */
app.use(router.allowedMethods()); // 可以配置也可以不配置
app.listen(5055)
1.4.2. 模板引擎 koa-swig

安装

npm init
npm install koa koa-router --save
npm install koa-swig --save
npm install co–save

导入

const Swig = require("koa-swig");
const co = require("co");

配置

/* 设置模板引擎 */
app.context.render = co.wrap(Swig({ 
  root: __dirname + '/views', // 视图文件路径
  autoescape: true, //   是否编码  一般为  true ，false:解析模板数据中的html
  cache: false, // 'memory':请用缓存，避免每次刷新页面都去解析模板,把解析后的结果保存在内存中，比如每次访问都会去解析，适合用于成产上线环境
  ext: 'html'
}))

使用：例子 实现一个简单的 todolist

图示：
在这里插入图片描述
app.js 代码：

const Koa = require('koa');
const Router = require('koa-router');
const Swig = require('koa-swig');  // 1. 引入模块 swig
const co = require('co');
 
const app = new Koa();
const router = new Router();
                                   
app.context.render = co.wrap(Swig({  // 2. 配置
  root: __dirname + '/views', // 视图文件路径。_dirname   绝对路径
  autoescape: true, // false:解析模板数据中的html
  cache: false, // 'memory':请用缓存，避免每次刷新页面都去解析模板
  ext: 'html'
}))
 
let datas = { // 自定义 数据
  appName: 'ToDoList',
  tasks: [
    { id: 1, title: '测试任务一', done: true },
    { id: 2, title: '学习koa', done: false },
    { id: 3, title: '学习sequelize', done: false },
  ]
}
 
router.get('/', async (ctx, next) => {
  ctx.body = await ctx.render('index.html', { datas }); // 3. 使用
})
 
app.use(router.routes())
app.listen(8879);

index.html 代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/static/index.css">
</head>
 
<body>
  <!-- 1. 渲染数据 {{}}  -->
  <h2>{{datas.appName}}</h2>
  <a href="/add">添加新任务</a>
  <hr>
  <ul>
    <!-- 2. for 循环 -->
    {% for task in datas.tasks %}
 
    <!-- 3. if else 判断 -->
    {% if task.done %}
    <li class="{{name}}">
      <input type="checkbox" checked>
      {{task.id}} - {{task.title}}
      <a href="">删除</a>
    </li>
 
    {% else %}
    <li class="{{name}}">
      <input type="checkbox">
      {{task.id}} - {{task.title}}
      <a href="">删除</a>
    </li>
 
    {% endif %}
    {% endfor %}
  </ul>
</body>
 
</html>

其他：

koa-swig 语法：

1. swig使用指南
http://www.iqianduan.net/blog/how_to_use_swig
https://www.jianshu.com/p/3b4354c6bc36
 
2. swig官方文档
http://node-swig.github.io/swig-templates/docs/
1.4.3. post提交数据使用 koa-bodyparser body解析

安装

npm install koa-bodyparser --save

导入

const bodyParser= require("koa-bodyparser");

配置

app.use(bodyParser())

使用：例子 获取登录的数据

index.html代码

  <form action="/doAdd" method="POST">
    用户名：<input type="text" name="username">
    密码：<input type="password" name="password">
    <br>
    <button type="submit">提交</button>
  </form>

app.js代码

  1. ctx.request.body 获取表单数据
  2. await ctx.render(‘index2’，{数据 }) 第二个参数为 传的数据 koa-swig模板： {{ 数据 }}
const Koa = require("koa");
const Router = require("koa-router");
const bodyParser = require('koa-bodyparser');
const Swig = require("koa-swig");
const co = require("co");
const app = new Koa();
/* 
配置koa-bodyparser
处理正文中的数据       post
*/
app.use(bodyParser())

const router = new Router();


/* 设置模板引擎 */

app.context.render = co.wrap(Swig({
  root: __dirname + '/views',
  autoescape: true,
  cache: false,
  ext: 'html'
}));

router.get('/', async ctx => {
  //获取表单提交的数据
  // await ctx.render('index2',第二个参数是参数数据);
  await ctx.render('index2')
})
/*
router.get('/', async ctx => {
let list={
	name:'张三'
}
  //获取表单提交的数据
  // await ctx.render('index2',{
		list:list
});
  await ctx.render('index2')
})

*/
/* 
添加 处理通过添加页面提交的数据
*/
router.post('/doAdd', async ctx => {
  //获取表单提交的数据ctx.request.body.username
  console.log(ctx.request.body.username)
  ctx.body = ctx.request.body

})

// 启动路由
app.use(router.routes());/* 启动路由 */
app.use(router.allowedMethods()); // 可以配置也可以不配置
app.listen(5055)
1.4.4.静态文件代理服 koa-static-cache

安装

npm install koa-static-cache --save

导入

const Koastaticcache= require("koa-static-cache");

配置 可以配置多个
选项设置
- prefix：URL前缀
- maxAge：缓存事件单位为毫秒 默认为0
- gzip：启用gzip压缩传输，默认为true


app.use(Koastaticcache(__dirname+'./static', {
  /* 
    选项设置
      prefix：URL前缀
      maxAge：缓存事件单位为毫秒 默认为0
      gzip：启用gzip压缩传输，默认为true
  
  */
  //不加prefix: "/static",则获取静态文件  <link rel="stylesheet" href="/index.css">
  //html 页面获取  <link rel="stylesheet" href="/static/index.css">
  prefix: "/static",

}))

示图
在这里插入图片描述

其他第三方中间插件
  1. Koa - 使用koa-multer上传文件（上传限制、错误处理）
    https://www.cnblogs.com/chanwahfung/p/11443089.html
  2. 高效字符模板ART-TEMPLATE 官方文档http://aui.github.io/art-template/

在这里插入图片描述

安装

npm install art-template --save
npm install --save koa-art-template

导入

const template= require("koa-art-template");
const path= require("path");

配置

template(app,{
  root: path.json(__dirname, 'views'), //视图的位置 需要导入node的path模块
  extname: '.html', //后缀名
  debug:process.env.NODE_ENV!=='production' //是否开启调试模式
})
  1. …
自律自强的鱼
关注
用Node.js编写Web框架
2301_79331230的博客
09-20 186
通过这个简单的示例，我们可以看到Node.js提供了强大的功能和灵活性，使我们能够轻松地构建自己的Web框架。当然，这只是一个开始，实际的Web框架通常包含更多的功能和复杂性，例如路由、中间件等。但是通过这个例子，你可以理解如何使用Node.js构建一个简单的Web框架，并为你的应用程序添加更多的功能。现在，我们已经完成了一个简单的Web框架。然后，我们从解析后的URL中获取请求的路径，并将其输出到控制台。接下来，我们创建一个新的文件夹，用于存放我们的Web框架项目。的文件，作为我们的应用程序入口点。
koa-web-api：Koa Web Api样板
02-03
Koa 是一个由 Express 团队开发的下一代 Node.js Web 框架，它以其简洁、高效和模块化的设计理念深受开发者喜爱。Koa 的核心是使用了 ES6 的生成器（Generators），这使得异步处理变得更加优雅。在“Koa Web Api”...
基于NodeJS的14款Web框架
03-26 523
发表于18小时前| 730次阅读| 来源CODECONDO| 3 条评论| 作者张红月编译 前端开发Node.jsJavaScriptKnockoutJSCompoundJS web框架 摘要：NodeJS是一个服务器端JavaScript解释器，它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个（只有一个）物理机的连接代码。 在
Koa (下一代web框架) 【Node.js进阶】
最新发布
XH_jing的博客
09-18 2568
koa (中文网) 是基于 Node.js 平台的下一代 web 开发框架，致力于成为应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石；利用 `async 函数` 丢弃回调函数，并增强错误处理，koa 没有任何预置的中间件，可快速的编写服务端应用程序。
基于nodejs平台的下一代web开发框架Koa2---（koa2j脚手架）---系列3
三季雨
05-22 249
I Koa 应用生成器 通过应用Koa脚手架生成工具 可以快速创建一个基于koa2的应用的骨架 1.全局安装 npm install koa-generator -g 2.创建项目 koa koa_dome 3.安装依赖 yarn 或者 npm install 4.启动项目 npm run start 或者 yarn start koa2 详解 ...
Koa (koajs) 基于 Node.js 平台的下一代 web 开发框架
weixin_34075551的博客
07-27 128
2019独角兽企业重金招聘Python工程师标准>>> ...
基于nodejs平台的下一代web开发框架Koa---（Cookie和Session）---系列2
三季雨
05-21 307
I Koa Cookie Cookie 简介 cookie 是储存于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据 （储存在浏览器客户端） HTTP 是无状态协议。简单的说当你浏览了一个页面，然后转到同一个网站的另一个页面。服务器无法认识到这是同一个浏览器在访问同一个网站。每次的访问，都是没有任何关系的 为啥不用HTTP 因为是无状态协议 无法识别同一个人 Cookie 可以保存用户信息 Cookie 可以储存浏览记录 例如 猜你喜欢的功能 Cookie 可
koa-mvc：简约的koa mvc框架
02-03
1. **Koa**: `Koa`是`Node.js`的一个下一代Web应用框架，其特点是不包含任何内置的路由或视图系统，而是依赖于中间件来处理请求和响应。`Koa`通过`async/await`语法糖简化了错误处理，并提供了更强大的上下文对象，...
NodeJsFrame：nodejs框架-Express，Koa
02-03
Koa是Express团队推出的新一代Web框架，其目标是为了解决Express的一些局限性，如回调地狱、错误处理等。Koa采用了ES6的async/await语法，使得异步编程更加优雅。 1. **async/await**：Koa的核心在于使用了Promise...
Node.js-基于koa2实现数据库增删改查逻辑
08-10
Koa2是Express.js作者创建的下一代Web应用框架，它摒弃了传统的中间件层，引入了async/await语法，使得异步处理更加简洁。Koa2通过洋葱模型处理请求和响应，每个中间件可以读取、修改请求和响应对象，或者将控制权...
koa-elasticsearch：koa，elasticsearch
02-03
Koa是Express之后的一个新一代Web应用框架，由Express的核心团队成员创建。Koa的设计目标是通过更小、更富有表现力的API来提高开发效率，减少回调函数的使用，利用async/await语法糖进行错误处理，使代码更易于理解...
lizard-engine:基于 Express.js 和 MongoDB 的 NodeJS Web 应用程序框架
06-14
模块化 NodeJS 框架，用于构建基于和Web 应用程序。 蜥蜴引擎详解 、模块、控制器的器......（我们为您做例程） 模块化MVC架构 Mozilla Nunjucks 模板引擎 插件和组件 能够通过模板在子组件上快速构建应用程序 文档 模块结构： 路由 控制器 组件 模型 模板 插件附加组件目录：插件、模块 执照 版权所有 (c) 2015 Poluosmak Andrew 本许可允许收到本软件及相关文档（以下简称“本软件”）副本的人无限制地免费使用本软件，包括不受限制的使用、复制、修改、添加、发布、分发、再许可和/或销售本软件的副本，以及向随本软件提供的人员，但须符合以下条件： 上述版权声明和这些条款和条件必须包含在本软件的所有副本或重要部分中。 本软件“按原样”提供，不提供任何类型的明示或暗示保证，包括适销性保证，但在任何地方、任何地方均以同类形式提供。
Node.js-asgc-web是傲世孤尘开源的一个nodejs一站式web框架
08-10
asgc-web是傲世孤尘开源的一个nodejs一站式web框架，它包含一个后端服务器，和一个支持双向绑定的前端库
基于Express的nodejs的快速、开放、极简的 Web 开发框架
11-30
该开发框架是在Express的基础上进行改造，可以进行web网站的开发，也可以只做node服务器开发，可以使用pm2进行进程管理的开发框架！
node js + koa2 简单新闻管理系统
09-11
node js + koa2 简单新闻管理系统 mysql 数据库 新建数据库 mybookdb 然后后运行转储sql文件mybookdb.sql
十大 Node.js 的 Web 框架，快速提升工作效率
weixin_33712987的博客
06-14 778
2019独角兽企业重金招聘Python工程师标准>>> ...
Node.js的Web框架
fxbar的博客
11-13 420
Node.js的Web框架 NodeJS也就是Node，是众所周知的使用javascript构建Web应用框架，它启动一个服务器非常简单，如下： var http = require(‘http’); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/pla...
nodejs的koa2.0 web框架
qq_43505774的博客
06-15 438
直接上代码 var koa=require("koa")//koa web框架 var http=require("http")//http服务器创建 var Router=require("koa-router")//路由 var Static=require("koa-static")//静态资源 var Views=require("koa-views")//视图 npm install ejs 搭配使用 var body=require("koa-bodyparser")//用于表单简单提交 文本上
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值