koa2的学习

最新推荐文章于 2024-05-08 23:57:59 发布
最新推荐文章于 2024-05-08 23:57:59 发布
阅读量811 收藏 5
点赞数 2
分类专栏： egg 文章标签： egg koa2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30638831/article/details/88677052
版权

koa2.x的学习

安装和搭建

安装


    ## 初始化package.json 初始化pa 
    npm init

    # 安装koa2 
    npm install koa

搭建


// 由于koa2是基于async/await操作中间件，目前node.js 7.x的harmony模式下才能使用，所以启动的时的脚本如下：


const koa = require('koa')
const app = new koa()


//express 自带路由
//koa需要自己配置  就是中间件



//express 写法
// app.use((req, res) => {
//     res.send('返回数据');
// })


//中间件
app.use(async (ctx) => {
    ctx.body = 'hello world';
})

app.listen(8000);

访问： http:localhost:8000 即可出现hello world

es6基础

  • let 块级作用域
  • const 是常量
  • 模板字符串 console.log(${name}的年龄${age}); 大话西游2的年龄15
  • 属性的简写 let name=“123” let app ={ name: name } ==>简写 let name=“123” let app ={ name }
  • 方法的简写
  • 箭头函数 箭头指向上下文
  • promise async await

Router

router是由一个URI和一个特定的HTTP方法(get,post)等组成，涉及到应用如何响应客户端对某个网站节点的访问。
通俗的说根据不同的URL加载不同的页面

express中自带路由， koa2中需要自己安装: npm install koa-router

koa-router

详情链接

例子1：

const Koa = require('koa')
const Router = require('koa-router'); // 注意引入方式

//实例化
const app = new Koa()
const router = new Router()



//配置路由
// ctx 上下文  包含request和response等信息
router.get('/', async (ctx)=> {
    
    ctx.body = '首页'  /*返回数据 相当于 res.writeHead() res.end() */
}).get('/news', async (ctx) =>{
    ctx.body = 'thia is news page.'
})


app
  .use(router.routes()) //启动路由
  .use(router.allowedMethods());   // 使用在router.routes()之后，所有的路由中间件最后调用，此时根据ctx.status设置response的响应头


//中间件
app.use(async (ctx) => {
    ctx.body = 'hello world';  //显示在浏览器中
})

app.listen(8000);

从ctx中读取get传值

通过request接收，但是接收的方法有两种query和querystring
query： 返回的格式化好的参数对象
querystring： 返回的是请求字符串

//访问  http://localhost:8000/newscontent?username=123&password=123
    方式1：
        console.log(ctx.query) //  { username: '123', password: '123' } 获取的是对象 用的最多的方式
        console.log(ctx.querystring) //  username=123&password=123  是一个字符串
        console.log(cts.url) // /newscontent?username=123&password=123
    方式2：
        console.log(ctx.request.query) //{ username: '123', password: '123' }
        console.log(ctx.request.querystring) //  username=123&password=123  是一个字符串
        console.log(cts.request.url) // /newscontent?username=123&password=123


const Koa = require('koa')
const Router = require('koa-router'); // 注意引入方式

//实例化
const app = new Koa()
const router = new Router()




//配置路由
// ctx 上下文  包含request和response等信息
router.get('/', async (ctx)=> {
   
   ctx.body = '首页'  /*返回数据 相当于 res.writeHead() res.end() */
}).get('/news', async (ctx) =>{
   ctx.body = 'thia is news page.'
}).get('/newscontent', async (ctx) =>{
   // 从ctx中读取get传值
   /*
       通过request接收，但是接收的方法有两种query和querystring
       query： 返回的格式化好的参数对象
       querystring： 返回的是请求字符串
   */

   //访问  http://localhost:8000/newscontent?username=123&password=123
   console.log(ctx.query) //  { username: '123', password: '123' } 获取的是对象 用的最多的方式

   console.log(ctx.querystring) //  username=123&password=123  是一个字符串

   console.log(cts.url) // /newscontent?username=123&password=123

   // 从ctx里面的request里面获取get传值
   // console.log(ctx.request)
   /*
   { method: 'GET',
   url: '/newscontent?username=123&password=123',
   header:
  { host: 
    connection:  
    'upgrade-insecure-requests': 
    'user-agent':
     accept:
    'accept-encoding': 
    'accept-language':  
     cookie:
     ....
   */

   console.log(ctx.request.query) //{ username: '123', password: '123' }
   console.log(ctx.request.querystring) //  username=123&password=123  是一个字符串
   console.log(cts.request.url) // /newscontent?username=123&password=123

})


app
 .use(router.routes()) //启动路由
 .use(router.allowedMethods());

//中间件
app.use(async (ctx) => {
   ctx.body = 'hello world';
})

app.listen(8000);

动态路由的使用并获取参数

当url为//http://localhost:8000/newscontent/123，对应的代码为
router.get('/newscontent/:aid', async (ctx) =>{
    console.log(ctx.params) //{ aid: '123' }

})
通过params获取参数

例子：


const Koa = require('koa')
const Router = require('koa-router'); // 注意引入方式

//实例化
const app = new Koa()
const router = new Router()

/**
 * 动态路由
 */

//配置路由
// ctx 上下文  包含request和response等信息
router.get('/', async (ctx)=> {
    
    ctx.body = '首页'  /*返回数据 相当于 res.writeHead() res.end() */
}).get('/news', async (ctx) =>{
    ctx.body = 'thia is news page.'
})

// 一个
router.get('/newscontent/:aid', async (ctx) =>{
    
    //http://localhost:8000/newscontent/123
    console.log(ctx.params) //{ aid: '123' }

})

//多个
router.get('/newscontent/:aid/:name', async (ctx) =>{
    
    //http://localhost:8000/newscontent/123
    console.log(ctx.params) //{ aid: '123', name: 'zhang' }

})


app
  .use(router.routes()) //启动路由
  .use(router.allowedMethods());

//中间件
app.use(async (ctx) => {
    ctx.body = 'hello world';
})

app.listen(8000);

中间件

路由官方地址：https://www.npmjs.com/package/koa-router
就是匹配路由之前或匹配路由完成做的一系列的操作。

中间件的功能：

  • 执行任何代码
  • 修改请求和响应对象
  • 终结请求-响应循环
  • 调用堆栈中下一个中间件

koa应用如下几种中间件：

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

应用级中间件

匹配路由之前做的操作
如果不写next， 这个路由被匹配到了就不会继续了
next() 当前路由匹配完成以后继续向下匹配
app.use(async (ctx)=>{}) //匹配任意路由的中间件，且在路由函数之前执行


const Koa = require('koa')
const Router = require('koa-router'); // 注意引入方式

const app = new Koa()
const router = new Router()

/*
// 匹配任何路由  
app.use(async (ctx) =>{
   
})

*/

// 匹配路由之前打印日期
//http://localhost:8000/xxx
//http://localhost:8000/
app.use(async (ctx, next) =>{
    console.log(new Date())
    await next()
})


//配置路由
// ctx 上下文  包含request和response等信息
router.get('/', async (ctx)=> {
    
    ctx.body = '首页'  /*返回数据 相当于 res.writeHead() res.end() */
})

router.get('/news', async (ctx) =>{
    ctx.body = 'thia is news page.'
})
router.get('/news1', async (ctx) =>{
    ctx.body = 'thia is news page.'
})
 
app
  .use(router.routes()) //启动路由
  .use(router.allowedMethods());

//中间件
app.use(async (ctx) => {
    ctx.body = 'hello world';
})

app.listen(8000);

路由级中间件

匹配到news路由以后继续向下匹配路由


const Koa = require('koa')
const Router = require('koa-router'); // 注意引入方式

const app = new Koa()
const router = new Router()

/**
 * 路由级中间件  匹配到news路由以后继续向下匹配路由
 * 
 * 例如 两个同样的router 如下
 * 
 * http://localhost:8000/news
 * 
 *  this is news page. 
 **/


//配置路由
// ctx 上下文  包含request和response等信息
router.get('/', async (ctx)=> {
    
    ctx.body = '首页'  /*返回数据 相当于 res.writeHead() res.end() */
})

// http://localhost:8000/news
router.get('/news', async (ctx, next) =>{
   console.log('this is news page.')

   await next()
})

router.get('/news', async (ctx) =>{
    ctx.body = ' this is news page. '
})


app
  .use(router.routes()) //启动路由
  .use(router.allowedMethods());

//中间件
app.use(async (ctx) => {
    ctx.body = 'hello world';
})

app.listen(8000);
  • 错误处理中间件

这里说下use与router的顺序问题，


const Koa = require('koa')
const Router = require('koa-router'); // 注意引入方式

const app = new Koa()
const router = new Router()

/**
 * 路由级中间件  匹配到news路由以后继续向下匹配路由
 * 
 * 
 * 这个第一个中间件01
 * 新闻页面02
 * 打印url->03
 * /news
 * 
 * 
 * 
 * 执行过程 http://localhost:8000/news  => console.log('这个第一个中间件01'); ==>执行 await next() ==>寻找对应的路由 ==>console.log('新闻页面02')
 * 再返回到 app.use  接着执行下面的代码  ==> console.log('打印url->03'); ...
 * 
 * 洋葱模式
 * 
 * 
 * 
**/
app.use(async (ctx, next)=>{
    
    console.log('这个第一个中间件01');

    await next();

    if(ctx.status === 404) {
        ctx.status = 404;
        ctx.body = 'this is 404 page';
    }else {
        console.log('打印url->03');
        console.log(ctx.url)
    }

})
 
//配置路由
// ctx 上下文  包含request和response等信息
router.get('/', async (ctx)=> {
    
    ctx.body = '首页'  /*返回数据 相当于 res.writeHead() res.end() */
})

// http://localhost:8000/news
router.get('/news', async (ctx, next) =>{
   console.log('新闻页面02')

   await next();
   
})

router.get('/news', async (ctx) =>{
    ctx.body = ' this is news page. '
})
 
app
  .use(router.routes()) //启动路由
  .use(router.allowedMethods());

//中间件
app.use(async (ctx) => {
    ctx.body = 'hello world';
})

app.listen(8000);

执行的流程


const Koa = require('koa')
const Router = require('koa-router'); // 注意引入方式

const app = new Koa()
const router = new Router()

/**
 * 路由级中间件  匹配到news路由以后继续向下匹配路由
 * 
 * 
 * 这个第一个中间件01
 * 新闻页面02
 * 打印url->03
 * /news
 * 
 * 
 * 
 * 执行过程 http://localhost:8000/news  
 *              这个第一个中间件01
                这个第二个中间件02
                匹配news路由03
                返回到这里03
                返回到这里04
 * 洋葱模式
**/

app.use(async (ctx, next)=>{
    
    console.log('这个第一个中间件01');
    next();
    console.log('返回到这里04');
})
 

app.use(async (ctx, next)=>{
    
    console.log('这个第二个中间件02');
    next();
    console.log('返回到这里03');
})


//配置路由
// ctx 上下文  包含request和response等信息
router.get('/', async (ctx)=> {
    
    ctx.body = '首页'  /*返回数据 相当于 res.writeHead() res.end() */
})

// http://localhost:8000/news
router.get('/news', async (ctx) =>{
   console.log('匹配news路由03  ')
    
   ctx.body = '新闻'
   
})

app
  .use(router.routes()) //启动路由
  .use(router.allowedMethods());

//中间件
app.use(async (ctx) => {
    ctx.body = 'hello world';
})

app.listen(8000);

ejs模板引擎

官网文档: https://www.npmjs.com/package/koa-views

  1. 安装： npm install koa-views
    npm install ejs
  2. 引入 koa-views 配置中间件
    方式1：
        const views = require('koa-views');
        app.use(views('views', { map: {html: 'ejs' }})); // //这样配置也可以  注意如果这样配置的话 模板的后缀名是.html

方式2：

        app.use(views('views',{
            extension:'ejs'  /*应用ejs模板引擎*/
        }))
  1. 使用：
    router.get(’/add’,async (ctx)=>{
    let title = ‘hello koa2’
    await ctx.render(index’,{
    title
    })
    })

4、Ejs 引入模板

<%- include header.ejs %>

5、Ejs 绑定数据

<%=h%>

6、Ejs 绑定 html 数据

<%-h%>

7、Ejs 模板判断语句

    <% if(true){ %>
    <div>true</div>
    <%} else{ %>
    <div>false</div>
    <%} %>

8、Ejs 模板中循环数据

    <%for(var i=0;i<list.length;i++) { %><li><%=list[i] %></li>
    <%}%>
  1. 公共数据

注意：我们需要在每一个路由的render里面都要渲染一个公共的数据

公共的数据放在这个里面，这样的话在模板的任何地方都可以使用

//写一个中间件配置公共的信息
app.use(async (ctx,next)=>{

    ctx.state.userinfo='张三';

    await next();/*继续向下匹配路由*/
})

待完善。。。。。
https://www.itying.com/koa/article-index-id-90.html

醉小义
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
koa2框架
visibleforest的博客
12-16 4320
框架frame： 1.框架的作用： 封装原生代码的API；规范流程和格式；让开发人员更加关注与业务代码，提高开发效率。 2.框架frame和lib库的区别： 框架是唯一的，库可以共存；框架关注全流程，库关注单个功能。 koa2 koa2是nodejs web server 框架； 官网和文档：Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架 | Koajs 中文文档 通过async/await语法高效编写web server； koa2的中间件机制，能合理.
koa学习
weixin_45746826的博客
11-14 126
为了弥补httpServer的不足，koa对其进行了一层封装，使之api更加的人性化。 比如http中的res.end()api响应给客户端，因为是数据流，所以用end来结束好像也很合理，但是总觉得挺奇怪的，koa里则直接是res.body = {}，这样子的api就更加的人性化了。 特点 ·koa2完全使⽤用Promise并配合 async 来实现异步 ·轻量量，⽆无捆绑 ·中间件架构 ·优雅的API设计 ·增强的错误处理理 基础使用 const Koa = require('koa') const ap
浅谈Koa2框架
BradenHan的专栏
05-18 1897
前端框架一般指用于简化网页设计的框架，使用广泛的前端开发套件。比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等），使用前端框架可以帮助快速地搭建网站。框架是提供一套完整的解决方案，按照规定好的代码结构来做编排，使用前段框架可以降低界面开发周期和提高界面的美观性。封装原生代码的API规范流程和格式让开发人员更加关注于业务代码，提高开发效率更多精彩内容，请微信搜索“前端爱好者戳我查看。
Web前端最全入门基于Node的Web框架——Koa，循序渐进
最新发布
2301_82243626的博客
05-08 602
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】})上面我们已经介绍了，使用这个中间件可以把所有的中间件一次性引入，能够提高代码的可读性，中间件也可以单独写在一个js文件里面进行引入。这样就可以使页面更加简洁，耦合性更低，符合软件开发的要求。
Koa2 框架入门与进阶
weixin_49809163的博客
06-23 1675
Koa 是一个新的 **web 框架**，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 利用 **async 函数** 丢弃传统的回调函数，并增强错误处理。Koa 没有 **任何预置** 的中间件，可快速而愉快地编写服务端应用程序。 koa 是基于 nodejs 平台的下一代 web 开发框架（koa2 是 nodejs web server 框架）
大前端之Koa2学习
qq_34185872的博客
05-30 2159
Koa2是一个基于Node.js的Web框架，它使用了ES6的语法和async/await特性，使得编写异步代码更加简单和优雅。Koa2的核心思想是中间件，它允许开发者将应用程序拆分成小的、可重用的部分，从而使得代码更加模块化和易于维护。Koa2还提供了一些常用的中间件，如路由、静态文件服务、错误处理等，使得开发者可以更加快速地构建Web应用程序。总的来说，Koa2是一个轻量级、灵活、易于扩展的Web框架，适合用于构建中小型的Web应用程序。
Koa2篇-简单介绍及使用
qq_54379580的博客
02-12 1923
关于koa2框架的简单使用
koa2Demo1:koa 2学习计划
05-14
koa2koa2 学习笔记koakoa是Express的下一代基于Node.js的web框架，目前有1.x和2.0两个版本,2.0基于ECMA7 async awaitBabelBabel是一个JavaScript编写的转码器，它可以把高版本JavaScript代码转换成低版本JavaScript...
vue-koa2:vue+koa2学习
05-30
vue-koa2学习视频 跟随技术胖的脚步学习vue+koa2全栈开发 前端启动项目在主目录下 npm install npm run dev npm run build 后台服务在service目录下cd service node index.js启动后台服务 需要安装mongoDB...
详解koa2学习中使用 async 、await、promise解决异步的问题
01-21
在学习koa2的时候遇到了获取数据后再进行模板渲染的异步问题。在查找各种资料后成功的解决了该问题，现在写个笔记记录一下。 先说一下async、await，第一次见到这两个词是在学习vue的时候。因为前端在写代码的时候...
koa2-study:koa 学习笔记
05-18
koa2-studykoa 学习笔记详细教程可以参照
Koa2框架快速入门与基本使用
终生学习，终生成长
06-03 6141
简单来讲，Koa2是一个基于nodejs的web server框架。 官方文档 Koa2框架使用入门 不使用脚手架，直接使用Koa框架： # 新建文件夹，控制台进入文件夹 npm init npm install koa 然后就可以新建js文件写Koa代码了。带有详细注释的示例代码如下。 const Koa = require('koa') const app = new Koa() // ctx: context, 上下文 app.use((ctx) => { ctx.body =
快速入门koa2
黑马程序员官方博客
12-21 1147
总耗时中间件的功能就是计算出服务器所有中间件的总耗时，应该位于第一层，因为第一层的中间件是最先处理请求的中间件，同时也是最后处理请求的中间件。当一个请求到达咱们的服务器，最先最先处理这个请求的是第一层中间件。第一层的中间件在处理这个请求之后，它会把这个请求给第二层的中间件。第二层的中间件在处理这个请求之后，它会把这个请求给第三层的中间件。会到了第二层的中间件，所以第二层中间件对这个请求经过了两次的处处理。这个命令可以在线的联网下载最新版本 koa。第二层的中间件在处理完这个请求之后，又到了第一层的中间件。
Koa 学习 01 Koa 介绍和基本使用（路由、静态资源托管、中间件）
皮蛋很白的博客
04-02 2799
Koa 介绍 Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 官网：https://koajs.com/ GitHub 仓库：https://github.com/koajs/koa 一个翻译的中文网：https://koa.bootcss.com/ Koa 的原理和内部结构很像 Express，但是语法和内部结构进行了升级 Koa 内部使用 ES6 编写，号称是下一代 Node.js
KOA2快速上手以及项目开发
不想学习的打工人的博客
11-04 1213
基于平台的Web服务器框架由Express 原班人马打造，,Koa2都是Web服务器的框架,他们之间的差别和关系可以通过下面这个表格表示出由于Koa2它是支持async和await，所以它要求Node 的版本至少是在7.6级以上,因为语法糖async和await是在Node7.6版本之后出现才支持洋葱模型的中间件：如下图所示,对于服务器而言，它其实就是来处理一个又一个的请求，
koa2 入门学习（一）
Juwenzhe_HEBUT的博客
09-18 442
koa2 入门 koa2是什么 koa2基本用法 koa2进阶 一、koa2是什么 官网地址：https://koa.bootcss.com/ 1.基于nodejs平台的下一代web开发框架 2.Express原班人马打造，更精简 3.Async+await处理异步 4.洋葱圈型的中间件机制 二、koa2基本用法 dem...
【Nodejs】学习之koa2框架
前端学习博客
07-09 2727
执行 , 生成package.json 2.安装Koa 执行命令 3.编写服务程序 编写 注意：是返回给客户端的响应, 如果没有通过返回给客户端, 最终会得到顾名思义, 中间件就是在什么的中间有时候从请求到响应的业务比较复杂, 将这些复杂的业务拆开成一个个功能独立的函数, 就是中间件对于处理请求来说，在响应发出之前，可以在请求和响应之间做一些操作，并且可以将这个处理结果传递给下一个函数继续处理 2) 基本使用 输出结果 3) 链式调用 app.usethis上述代码可以写成 2.洋葱圈模型 当我们发送
入门基于Node的Web框架——Koa，系统盘点前端开发者必须掌握的知识点
m0_58269070的博客
04-16 315
举个例子：比如你购买商品，添加购物是要在登录状态的，下单也是要在登录状态的。其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。个人的收获是很大的，我也认为这是一种不错的学习方式。koa-bodyparser这个中间件可以用于解析post方法传递过来的参数，常用于表单的提交信息获取，以一个JSON对象的形式返回，可以很方便地获取数据。中间件有两个参数，第一个就是我们上面提到的ctx，还有一个就是next参数，下面就讲一下next参数到底是怎么用的，我们先来了解一下“洋葱模型”。
koa2 快速入门
缚己
03-18 5424
简单说说 koa2 koa2 是由 express 的原班人马开发的，koa 框架有两个版本：koa 和 koa2。 koa 使用 ES6 的 generator 来编写的，当 node 引擎支持 ES7 之后，koa 的创始人立即使用 async 和 await 重构了 koa 框架，就有了现在的 koa2。 所以，下文中下载 koa2 的脚手架工具时，下载的是 koa....（详见下文）。 脚手架和基础配置 脚手架 koa2 提供了脚手架工具，可以用来更好的创建 koa2 项目。 npm 下载地址：ht
koa koa-body
09-06
koa是一个基于Node.js的Web开发框架，它可以帮助开发者更轻松地构建高性能的Web应用程序。...<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值