koa【01】koa-router、get传值及获取传值、动态路由

 

koa2 的 中文文档： 

https://www.itying.com/koa/article-index-id-60.html

 

/*
 Koa 路由 get 传值
在 Koa2 中 GET 传值通过request接收，但是接收的方法有两种： query 和 querystring
query : 返回的是格式化好的参数对象
querystring ： 返回的是请求字符串

 */

// 引入模块
const Koa = require("koa");
const router = require("koa-router")(); //引入和实例化路由

// 实例化
var app = new Koa();

// 配置路由，ctx （上下万 context） 整合了 response 和 reject
router
  .get("/", async (ctx) => {
    ctx.body = "hi 首页123"; //返回数据  相当于 res.writeHead()  res.end()
  })
  .get("/news", async (ctx) => {
    ctx.body = "这是新闻页面";
  });
// 也可以如下写法
router.get("/newscontent", async (ctx) => {
  /*
  从ctx中读取get传值:
 访问 http://localhost:3002/newscontent?aid=123&bid=jack 时，
   */
  console.log(ctx.query); //返回 [Object: null prototype] { aid: '123', bid: 'jack' } ，用得最多的方式
  console.log(ctx.query.aid); //返回 123
  console.log(ctx.querystring); //返回 aid=123&bid=jack
  console.log(ctx.querystring.aid); // 返回 undefined
  console.log(ctx.url); // 返回： /newscontent?aid=123&bid=jack
  console.log("----------------");
  console.log(ctx.request);
  //   返回以下：
  // {
  //   method: 'GET',
  //   url: '/newscontent?aid=123&bid=jack',
  //   header: {
  //     host: 'localhost:3002',
  //     connection: 'keep-alive',
  //     'cache-control': 'max-age=0',
  //     'sec-ch-ua': '"Google Chrome";v="87", " Not;A Brand";v="99", "Chromium";v="87"',
  //     'sec-ch-ua-mobile': '?0',
  //     'upgrade-insecure-requests': '1',
  //     'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
  //     accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
  //     'sec-fetch-site': 'none',
  //     'sec-fetch-mode': 'navigate',
  //     'sec-fetch-user': '?1',
  //     'sec-fetch-dest': 'document',
  //     'accept-encoding': 'gzip, deflate, br',
  //     'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8'
  //   }
  // }
  console.log(ctx.request.url); // 返回： /newscontent?aid=123&bid=jack
  console.log(ctx.request.query); // 返回 ：  [Object: null prototype] { aid: '123', bid: 'jack' }
  console.log(ctx.request.querystring); // 返回 ： aid=123&bid=jack

  ctx.body = "新闻详情页面";
});

router.get("/productcontent/:aid", async (ctx) => {
  // 访问 http://localhost:3002/productcontent/666
  // 获取动态路由的传值
  console.log(ctx.params); // 返回 ： { aid: '666' }
  console.log(ctx.params.aid); // 返回 : 666
  ctx.body = "产品详情页";
});

// 动态路由里面可以传入多个值
router.get("/photos/:aid/:bid", async (ctx) => {
  // 访问 http://localhost:3002/productcontent/666
  // 获取动态路由的传值
  console.log(ctx.params); // 返回 ： { aid: '666', bid: '777' }
  console.log(ctx.params.aid); // 返回 : 666
  console.log(ctx.params.bid); // 返回 : 777
  ctx.body = "图文详情页";
});



/*
  //作用：启动路由
  app.use(router.routes())  

  //作用：这是官方推荐的用法，建议使用
  //我们可以看到 router.allowedMethods() 用在了路由匹配 router.routes() 之后，
  //所以在当所有路由中间件最后调用，此时根据 ctx.status 设置 response 响应头
  app.use(router.allowedMethods())  

  app.use(router.allowOrgins()) //跨域使用
*/
app.use(router.routes()).use(router.allowedMethods());
app.listen(3002);
console.log("http://localhost:3002");