• koa2入门(2) koa-router 路由处理


    项目地址:https://github.com/caochangkui/demo/tree/koa-test

    1. 创建项目

    1. 创建目录 koa-test
    2. npm init 创建 package.json,然后执行 npm install
    3. 通过 npm install koa 安装 koa 模块
    4. 通过 npm install supervisor 安装supervisor模块, 用于node热启动
    5. 在根目录下中新建 koa.js 文件,作为入口文件, 内容如下:
    const Koa = require('koa'); // Koa 为一个class
    const app = new Koa();
    
    app.use(async (ctx, next) => {
      await next();
      ctx.response.body = 'Hello, koa2!';
    });
    
    app.listen(3333, () => {
      console.log('This server is running at http://localhost:' + 3333)
    })
    
    1. 配置 package.json 文件
    {
      "name": "koa-test",
      "version": "1.0.0",
      "description": "",
      "main": "koa.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "serve": "supervisor koa.js"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "koa": "^2.7.0",
        "supervisor": "^0.12.0"
      }
    }
    
    
    1. 启动项目, 打开 http://localhost:3333 即可
    $ npm run serve
    

    打开页面后,显示 hello koa2

    2. 根据请求路径显示不同页面

    更改 koa.js

    const Koa = require('koa'); // Koa 为一个class
    const app = new Koa();
    
    app.use(async (ctx, next) => {
      await next();
      if (ctx.request.path == '/about') {
        ctx.response.type = 'html'; // 指定返回类型为 html 类型
        ctx.response.body = 'this is about page <a href="/">Go Index Page</a>';
      } else {
        ctx.response.body = 'this is index page';
      }
    });
    
    app.listen(3333, () => {
      console.log('This server is running at http://localhost:' + 3333)
    })
    

    访问:http://localhost:3333/about 显示:this is about page Go Index Page

    3. koa-router 路由管理模块的使用

    koa-router 是一个处理路由的中间件

    $ npm i koa-router
    

    修改koa.js

    const Koa = require('koa'); // Koa 为一个class
    const Router = require('koa-router') // koa 路由中间件
    const app = new Koa();
    const router = new Router(); // 实例化路由
    
    // 添加url
    router.get('/hello/:name', async (ctx, next) => {
      var name = ctx.params.name; // 获取请求参数
      ctx.response.body = `<h5>Hello, ${name}!</h5>`;
    });
    
    router.get('/', async (ctx, next) => {
      ctx.response.body = '<h5>Index</h5>';
    });
    
    app.use(router.routes());
    
    app.listen(3333, () => {
      console.log('This server is running at http://localhost:' + 3333)
    })
    

    也可给路由统一加个前缀:

    const router = new Router({
    	prefix: '/api'
    });
    

    然后访问 http://localhost:3333/api 即可,例如:http://localhost:3333/api/hello/koa2

    4. post 请求

    koa2 需要使用 koa-bodyparser 中间件来处理post请求

    $ npm i koa-bodyparser
    

    修改 koa.js

    const Koa = require('koa'); // Koa 为一个class
    const Router = require('koa-router') // koa 路由中间件
    const bodyParser = require('koa-bodyparser'); // 处理post请求,把 koa2 上下文的表单数据解析到 ctx.request.body 中
    const app = new Koa();
    const router = new Router(); // 实例化路由
    
    app.use(bodyParser())
    
    // 表单
    router.get('/', async (ctx, next) => {
      ctx.response.body = `<h1>表单</h1>
          <form action="/login" method="post">
              <p>Name: <input name="name" value="koa2"></p>
              <p>Password: <input name="password" type="password"></p>
              <p><input type="submit" value="Submit"></p>
          </form>`;
    });
    
    router.post('/login', async (ctx, next) => {
      let name = ctx.request.body.name;
      let password = ctx.request.body.password;
    
      console.log(name, password);
    
      ctx.response.body = `<h4>Hello, ${name}!</h4>`;
    });
    
    app.use(router.routes());
    
    app.listen(3333, () => {
      console.log('This server is running at http://localhost:' + 3333)
    })
    

    参考: https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001471087582981d6c0ea265bf241b59a04fa6f61d767f6000

  • 相关阅读:
    Socket和ServerSocket学习笔记
    跨域资源共享的10种方式
    javascript执行环境(执行期上下文)详解
    js 自动插入分号
    原型对象prototype和原型属性[[Prototype]]
    构造自己的动画函数:animation,stop功能的实现
    sizzle源码分析 (4)sizzle 技术总结及值得我们学习的地方
    sizzle源码分析 (3)sizzle 不能快速匹配时 选择器流程
    sizzle源码分析 (2)ID 类 tag querySelectorAll 快速匹配
    sizzle源码分析 (1)sizzle架构
  • 原文地址:https://www.cnblogs.com/cckui/p/10401563.html
Copyright © 2020-2023  润新知