当前位置 博文首页 > 文章内容

    koa2简单入门

    作者: 栏目:未分类 时间:2020-07-24 16:01:08

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    koa2笔记

    安装:npm i koa --save / cnpm i koa --save

    koa项目生成器

    安装

    npm i -g koa-generator

    创建项目

    koa2 项目名称

     

    1.简单入门

    //导入koa框架
    const koa = require('koa')
    //创建服务器对象
    const app =new koa()

    //中间配置
    app.use(async (etx)=>{ //把req,res都封装成etx
       etx.body='你好 koa2' //响应数据的格式
    })
    //对比express框架
    //app.use((req,res,next)=>{
       //res.send('你好express')
    //})
    //监听端口
    app.listen(3000)
    console.log('服务器启动成功')

    2.Koa路由koa-router

    //安装
    cnpm i koa-router --save  / npm i koa-router
    //导入并实例化
    const router = require('koa-router')()

    router.get('/',async (etx)=>{
       etx.body = '首页'
    }).get('/news',async (etx)=>{
       etx.body='新闻页面'
    })

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

    1.1get传值

    /*
      在koa2中GET传值通过request接收 但是接收的方法有两种query和querystring
      query返回的是格式化好的参数对象
      querystring返回的是请求的字符串
    */
    router.get('/newsDetail', async (etx, next) => {
       console.log(etx.query)
       console.log(etx.querystring)
       //在etx中有个request对象,也可以拿到参数,其实就是express中req,包含了请求的信息
       console.log(etx.request.query)
       console.log(etx.request.querystring)
       etx.body = '新闻详情页面'
    })


    1.2动态路由

    /*
      动态路由
      接收:etx.params
    */

    //动态路由
    router.get('/newsDetail/:id', async (etx, next) => {
       console.log(etx.params)
       const id = etx.params['id']
       etx.body = '新闻详情页面' + id
    })
    //可以接受多个动态参数
    router.get('/newsDetail/:id/:aid', async (etx, next) => {
       console.log(etx.params)
       const id = etx.params['id']
       etx.body = '新闻详情页面' + id
    })

    1.3中间件

    //匹配路由前的中间件,第一个参数不加默认拦截所有路由,满足条件就next放行
    app.use(async (etx, next) => {
       console.log(new Date())
       await next() //向下执行
    })

    //路由级中间件
    router.get('/news', async (etx, next) => {
       etx.body = '新闻页面1'
       await next() //放行
    })
    //这个路由才会被匹配到
    router.get('/news', async (etx, next) => {
       etx.body = '新闻页面'
    })

    1.4错误处理中间件

    //引入koa框架
    let Koa = require('koa')
    let Router = require('koa-router')
    //创建网站服务器
    let app = new Koa()
    //创建路由实例对象
    let router = Router()

    /*
      错误处理中间件
      不管放在路由的下面还是路由的上方都会首先执行中间件
      express执行顺序是从上往下依次执行


      当处理完之后返回来处理中间件next()后面的内容

      就像洋葱一样
      request一层一层往里走,走完之后response一层层往外走
      就相当于先进后出
      最先匹配到的中间件,他next后面的内容最晚执行
    */

    router.get('/', async (etx, next) => {
       etx.body = '首页'
    })

    router.get('/news', async (etx, next) => {
       console.log('匹配到news路由')
       etx.body = '新闻页面'
    })

    //动态路由
    router.get('/newsDetail/:id/:aid', async (etx, next) => {
       console.log(etx.params)
       const id = etx.params['id']
       etx.body = '新闻详情页面' + id
    })
    //放在路由下面也会比路由先执行
    app.use(async (etx,next)=>{
       console.log('这是一个错误处理中间件1')
       await next()

       if(etx.status == 404){
           etx.status = 404
           etx.body='Not Found'
      }else{
           console.log('1')
      }
    })
    app.use(async (etx,next)=>{
       console.log('这是一个错误处理中间件2')
       await next()

       if(etx.status == 404){
           etx.status = 404
           etx.body='Not Found'
      }else{
           console.log('2')
      }
    })


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


    app.listen(3000)
    console.log('服务器启动成功')

    1.5第三方中间件

    /*
      第三方中间件
      配置模板引擎
      1.下载koa-views插件
      cnpm i koa-views --save
      2.下载ejs模板引擎
      cnpm i ejs --save
      3.导入koa-views模块
      const views = require('koa-views)
      4.使用中间件配置模板引擎
      配置1:app.use(views('views',{extension:'ejs}))//告诉模板引擎的位置和使用哪个模板引擎
      配置2:app.use(views('views',{map:{html:'ejs'}}))//这样配置views中的模板后缀名要是html

    */

    //导入koa模板引擎
    let views = require('koa-views')
    //第三方中间,模板引擎的位置
    app.use(views('views',{extension:'ejs'}))//告诉模板引擎的位置和使用哪个模板引擎

    1.6ejs模板的使用

    //导入公共模板
    <%- include ('common/header.ejs') %>
    //循环
    <%for(let i =0;i < arr.length;i++){%>
           <li><%=arr[i]%></li>
    <%}%>

    //解析html語句
    <%-  %>
    <%- comment%>

    //条件判断
    <%if(age >= 18){%>
           <h3>可以访问此网站</h3>
    <%}else{%>
           <h3>未成年禁止访问</h3>
    <%}%>

     

    1.7post传值

    • 原生js获取post和get

    const http = require('http');
    const url = require('url');
    const querystring = require('querystring');
    const fs = require('fs');
    let users = {};
    let server = http.createServer(function(req,res){
       // console.log('请求来了',req.url);
       
       // console.log(req.method);
       let path ='',get={},post={};
       if(req.method == 'GET'){
           let {pathname,query}=url.parse(req.url,true);
           path=pathname;
           get=query;
           complete();
      }else if(req.method == "POST"){
           path=req.url;
           let arr = [];//定义一个空数组
       req.on('data',buffer=>{
           // console.log(buffer);//返回的是二进制形式
           arr.push(buffer);//把返回的二进制追加到数组里面
      });
       req.on('end',()=>{
           let buffer = Buffer.concat(arr);
           // console.log(buffer.toString());
           post = querystring.parse(buffer.toString());
           // console.log(query);
           complete();
      });
      }  
       function complete(){
           // console.log(path,get,post);
           if(path == '/reg'){
               let {username,password} = get;
               if(users[username]){
                   console.log('用户名已存在,用户名:',users[username],'密码',password);
              }
               if(users[username]){//如果user里面有这个username就报错
                   res.write(JSON.stringify({error:1,msg:"此用户已存在"}));//只能是字符串,所以用json的方法
                   res.end();
              }else{//如果没有这个用户就把这个密码赋给这个用户
                   users[username] = password;
                   res.write(JSON.stringify({error:0,msg:''}));
                   res.end();
              }
          }else if(path == '/login'){
               let {username,password}=get;
               if(users[username]){
                   console.log('用户名:',users[username],'密码',password);
              }
               if(!users[username]){
                   res.write(JSON.stringify({error:1,msg:'找不到此用户'}));
                   res.end();
              }else if(users[username] != password){
                   res.write(JSON.stringify({error:1,msg:'密码不正确'}));
                   res.end();
              }else{
                   res.write(JSON.stringify({error:0,msg:''}));
                   res.end();
              }
          }else{
               fs.readFile(`www${path}`,(err,buffer)=>{
                   if(err){
                       res.writeHeader(404);
                       res.write('Not Found');
                       res.end();
                  }else{
                       res.write(buffer);
                       res.end();
                  }
              })
          }
           
      }
    });

    server.listen(8888);
    • koa-bodyparser

      //1.安装koa-bodyparser
      cnpm i koa-bodyparser --save / npm i koa-bodyparser --save
      //2.引入
      const bodyParser = require('koa-bodyparser')
      //配置中间件
      app.use(bodyParser())

       

    1.8koa-static静态资源服务

    //1.安装
    cnpm i koa-static --save
    //引入
    const static = require('koa-static')
    //配置中间件
    app.use(static(path.join(__dirname,'public')))
    //引入koa框架
    let Koa = require('koa')

    const path = require('path')

    //创建网站服务器
    let app = new Koa()

    //引入koa-static
    const static = require('koa-static')


    //配置中间件
    app.use(static(path.join(__dirname,'public')))



    /*
    koa中使用koa-static 来获取静态资源
    1.安装
    cnpm i koa-static --save / npm i koa-static --save

    2.引入
    const static = require('koa-static)

    3.配置中间件
    app.use(static(path.join(__dirname,'public')))

    */


    app.listen(3000)
    console.log('服务器启动成功')

    1.9koa-art-template模板

    //1.安装
    cnpm i koa-art-template --save / npm i koa-art-template

    //2.引入
    const render = require('koa-art-template')

    //配置
    render(app,{
    root:path.join(__dirname,'views'),
    extname:'.art',
    debug:process.env.NODE.ENV !== 'production'
    })
    • 基本使用

      //引入koa框架
      let Koa = require('koa')

      const path = require('path')

      //引入koa-art-template
      const render = require('koa-art-template')

      //创建网站服务器
      const app = new Koa()

      //配置
      render(app,{
         root:path.join(__dirname,'views'),//模板的位置
         extname:'.html', //模板的后缀名
         debug:process.env.NODE_ENV !== 'production'//是否启用调试模式
      })

      app.use(async (etx)=>{
         await etx.render('user.html')
      })

      /*
      koa-art-template的基本使用
      1.安装
      cnpm i koa-art-template / npm i koa-art-template

      2.引入
      const render = require('koa-art-template')

      3.配置
      render(app,{
          root:path.join(__dirname.'views),
          extname:'.art',
          debug:process.env.NODE.ENV !== 'production'
      })

      */


      app.listen(3000)
      console.log('服务器启动成功')
      • 模板语法

         <h1>标准语法</h1>

           <h2>{{title}}</h2>
           <div>
              {{@h1}}
           </div>
           <ul>
              {{each arr}}
               <li>{{$index}}---{{$value}}</li>
              {{/each}}
           </ul>

          {{ 1+1== 2 ? 1 : -1}}
           <br>
          {{age + 1}}
           <br>

          {{if age >= 18}}
          年龄大于18
          {{else if age < 15}}
           年龄小于15
           {{else}}
           年龄不符合要求
           {{/if}}

           {{include './common/footer.html'}}
           <hr>
           <!-- 原始语法 -->
           <h1>原始语法</h1>
           <h2><%= title%></h2>
           <%- h1%>
           <ul>
               <%for(var i = 0;i < arr.length; i++){%>
               <li><%= arr[i]%></li>
               <%}%>
           </ul>

               <%if(age>=18){%>
               <span>欢迎</span>
               <%}else{%>
               <span>访问失败</span>
               <%}%>

               <% include ('./common/footer.html')%>

       

    3.cookie的使用

    3.1cookie简介

    ● cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域 名的时候共享数据。

    ● HTTP 是无状态协议。简单地说,当你浏览了一个页面,然后转到同一个网站的另一个页 面,服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问,都是没有任何 关系的。

     

    3.2koa cookie 的使用

    //设置
    await etx.cookies.set('userInfo', 'zhangsan', { //设置cookie
           maxAge: 60 * 1000 * 24,

      })

    //获取
    const cookie = await etx.cookies.get('userInfo') //获取cookie

    3.3cookie中的参数

    option名称option值
    maxAge 过期时间 一个数字表示多久之后过期
    expires cookie过期的具体时间
    path 可以获取cookie的路径默认是/
    domain 可以访问cookie的域名
    secure 安全cookie 默认false设置成true表示只有HTTPS可以访问
    httpOnly 是否只是服务器可以访问cookie,默认是false

    3.4koa中cookie设置中文

    /*
    koa中cookie无法直接设置中文,要将中文先转换为base64在设置
    const username = new Buffer('张三').toString('base64')
    await etx.cookies.set('username',username,{
    maxAge:60 * 1000 * 24
    })

    获取
    const username = await etx.cookies.get('username')
    console.log(new Buffer(username,'base64').toString())

    */

    //引入koa框架
    let Koa = require('koa')

    const path = require('path')
    //引入路由
    const Router = require('koa-router')
    const router = Router()
    //创建网站服务器
    const app = new Koa()

    /*
    koa使用cookie
    设置cookie
    etx.cookies.set(name,value,{option})
    */

    router.get('/', async (etx, next) => {
       await etx.cookies.set('userInfo', 'zhangsan', { //设置cookie