axios 加 body-better-router 或者 koa-body-router 记录

最新推荐文章于 2023-02-21 10:47:56 发布
最新推荐文章于 2023-02-21 10:47:56 发布
阅读量206 收藏
点赞数
文章标签： 请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33269443/article/details/80860844
版权 
<!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>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id='wf'>fef</div>
</body>
<script>
  let wf = document.querySelector('#wf')
  /**
  axios.post('http://localhost:3002/workers/test',{
      name:'wi',
      interest:["ball","women"],
      age:25,
      idNum:'3303292',
      contentinfo:'我是一个'
  },{
    transformRequest: [function (data) {
      // Do whatever you want to transform the data  不做转换 是下面那样子
      // 做了转换提交的数据 name=wi&interest=ball%2Cwomen&age=25&idNum=3303292&contentinfo=%E6%88%91%E6%98%AF%E4%B8%80%E4%B8%AA&
      
      返回 ：fields:{name: "wi", interest: "ball,women", age: "25", idNum: "3303292", contentinfo: "我是一个"}
  
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
     //    必不可少，修改数据的提交方式  不做转换提交的数据 {"name":"wi","interest":["ball","women"],"age":25,"idNum":"3303292","contentinfo":"我是一个"}
  
     返回 ：fields:{' {"name":"wi","interest":["ball","women"],"age":25,"idNum":"3303292","contentinfo":"我是一个"}':''}
  
     headers : {
            "Content-Type":'application/x-www-form-urlencoded; charset=UTF-8'
        }
  })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
    */
  //正常是json  很正常
  // {"name":"wi","interest":["ball","women"],"age":25,"idNum":"3303292","contentinfo":"我是一个"}
  // fields:{name: "wi", interest: ["ball", "women"], age: 25, idNum: "3303292", contentinfo: "我是一个"}
  //   axios.post('http://localhost:3002/workers/test',{
  //     name:'wi',
  //     interest:["ball","women"],
  //     age:25,
  //     idNum:'3303292',
  //     contentinfo:'我是一个'
  // })
  //   .then(function (response) {
  //     console.log(response);
  //   })
  //   .catch(function (error) {
  //     console.log(error);
  //   });


  //正常是json  很正常

  /* formdata 的方式
  
  let formd=new FormData()
  
  formd.append('name','wi')
  formd.append('interest',["ball","women"])
  formd.append('age',25)
  formd.append('idNum','3303292')
  formd.append('contentinfo','我是一个')
  
  
  ------WebKitFormBoundary6QIF0YdAlfUAt5SV
  Content-Disposition: form-data; name="name"
  
  wi
  ------WebKitFormBoundary6QIF0YdAlfUAt5SV
  Content-Disposition: form-data; name="interest"
  
  ball,women
  ------WebKitFormBoundary6QIF0YdAlfUAt5SV
  Content-Disposition: form-data; name="age"
  
  25
  ------WebKitFormBoundary6QIF0YdAlfUAt5SV
  Content-Disposition: form-data; name="idNum"
  
  3303292
  ------WebKitFormBoundary6QIF0YdAlfUAt5SV
  Content-Disposition: form-data; name="contentinfo"
  
  我是一个
  ------WebKitFormBoundary6QIF0YdAlfUAt5SV--
  
  返回的：fields:{name: "wi", interest: "ball,women", age: "25", idNum: "3303292", contentinfo: "我是一个"}
  
  
  
    axios.post('http://localhost:3002/workers/test',formd,{
  
      headers : {
            "Content-Type":'application/json; charset=UTF-8'
        }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  
  
  
  
  
  ********************************
    一下 koa-body-parser
  */
  /*
  常规：json
  
  axios.post('http://localhost:3002/workers/test',{
      name:'wi',
      interest:["ball","women"],
      age:25,
      idNum:'3303292',
      contentinfo:'我是一个'
  })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  
  /* 
  
  request payload
  发出：
  {"name":"wi","interest":["ball","women"],"age":25,"idNum":"3303292","contentinfo":"我是一个"}
  返回：
  body:{name: "wi", interest: ["ball", "women"], age: 25, idNum: "3303292", contentinfo: "我是一个"}
  
  
  
  */

  /* 
  // 常规：formdata
  let formd=new FormData()
  
  formd.append('name','wi')
  formd.append('interest',["ball","women"])
  formd.append('age',25)
  formd.append('idNum','3303292')
  formd.append('contentinfo','我是一个')
  
  axios.post('http://localhost:3002/workers/test',formd)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  
  
  
  request payload
  发出：
  ------WebKitFormBoundaryP6a61UJDJIdu1LxN
  Content-Disposition: form-data; name="name"
  
  wi
  ------WebKitFormBoundaryP6a61UJDJIdu1LxN
  Content-Disposition: form-data; name="interest"
  
  ball,women
  ------WebKitFormBoundaryP6a61UJDJIdu1LxN
  Content-Disposition: form-data; name="age"
  
  25
  ------WebKitFormBoundaryP6a61UJDJIdu1LxN
  Content-Disposition: form-data; name="idNum"
  
  3303292
  ------WebKitFormBoundaryP6a61UJDJIdu1LxN
  Content-Disposition: form-data; name="contentinfo"
  
  我是一个
  ------WebKitFormBoundaryP6a61UJDJIdu1LxN--
  
  返回：
  body:{}
  
  */



  // 常规：urlcode 转换

/*   axios.post('http://localhost:3002/workers/test', {
    name: 'wi',
    interest: ["ball", "women"],
    age: 25,
    idNum: '3303292',
    contentinfo: '我是一个'
  }, {
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      headers: {
        "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

 */

// form data
// 发出：
// name=wi&interest=ball%2Cwomen&age=25&idNum=3303292&contentinfo=%E6%88%91%E6%98%AF%E4%B8%80%E4%B8%AA&
// 返回：
// body:{name: "wi", interest: "ball,women", age: "25", idNum: "3303292", contentinfo: "我是一个"}



  //urlcode 不转换

  axios.post('http://localhost:3002/workers/test', {
    name: 'wi',
    interest: ["ball", "women"],
    age: 25,
    idNum: '3303292',
    contentinfo: '我是一个'
  }, {
      headers: {
        "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });



// form data
// 发出：
// {"name":"wi","interest":["ball","women"],"age":25,"idNum":"3303292","contentinfo":"我是一个"}
// 返回：
//body:{{"name":"wi","interest":: {"ball","women": ""}}


</script>

</html>

qq_33269443
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
KOA框架编程16-多文件上传-①-拖拽上传 + axios
wltsysterm的博客
07-23 275
背景 文件上传在实际的项目中用的还是比较频繁的，方式比较多。在未来的三篇文章里头，我们分别介绍下三种方式实现多文件上传。然后服务端都是使用koa作为基础。 拖拽上传 + axios 前端使用axios进行文件上传。这个过程主要是构建FormData来装载多个文件。然后示例的场景是拖拽（类比qq邮箱里头添加附件）。 本篇案例是在vue + elementui的基础上来编写的，大家在普通的h5里头也是同样做法。 1） 拖拽物的容器-textarea 任意一个标签都可以充当容器，用来装载被拖拽进来文件
koa-better-router:`koa`的稳定和可爱的路由器，使用`path-match`。 轻松构建强大，灵活和RESTful API的基础
05-17
koa更好的路由器 稳定可爱的路由器，使用 。 轻松构建强大，灵活和RESTful API的基础。 您可能也对感兴趣。 它使用此路由器轻松为企业创建强大，灵活和RESTful的API！ 强调 生产：准备用于 基础：用于构建功能更强大的路由器（例如非常简单的核心 可组合性：将多个路由和多个路由器组合-请参阅和 灵活性：同一路由器上有多个前缀 兼容性：接受旧的和现代的中间件，而不会弃用消息 强大：同一koa应用上的多个路由器-甚至可以组合多个路由器 轻：不污染您的路由器实例和应用程序-请参见.loadMethods 聪明：只会按照您说的去做 小：非常小的依赖关系-精心策划，只需要最 向后兼容：适用于koa v1-使用.legacyMiddleware 可维护性：很小，漂亮，可维护且带有注释的代码库 稳定性：严格的语义版本控制，并且有据可查 已测试： 100％覆盖率经过良好测试 可爱的
node-koa2-axios:实现axios请求数据
04-28
node-koa2-axios 实现axios请求数据 本版本主要实现的有： 将路由文件单独分开--- index页面由多个子页面构成-----使用axios请求url获得数据，并将数据渲染到页面 ----增加内存缓存处理（减少页面的请求，加快请求速度） 运行程序：node server
koa配合axios做接口
weixin_42349568的博客
08-10 5535
一，爬虫的原理 说得简单些，就是获取到页面的html,然后从中提取想要的数据，整理成自己的接口。 所以说，理论上，所有的后端语言，只要能发送请求的，都可以做爬虫。 二，koa配合axios做爬虫 koa是node的一个轻量化后台框架。axios是http请求库，于是就可以利用koa搭建后台服务器，然后axios发送请求，获取到页面的html,然后处理数据，形成后端接口。 三，处理数据的工具 我们爬取的数据，还需要进行处理，我这边获取到的主要是html形式的数据，这个库就可以： npm install che
koa+vue+axios，token生成，jwt的使用
weixin_44434938的博客
11-12 449
koa+vue+axios，token生成，jwt的使用
Koa + axios前后端通信
liluo101的博客
05-28 549
1.koa2.x版本 跨域问题： 采用CORS方案（支持任何请求方式，方便快捷，兼容性强） const cors = require('koa-cors') app.use(cors({ origin: 'http://localhost:3000', credentials: true //允许携带cookie }))
Axios模拟路由器
02-16
像koa-router一样模拟axios 例子 import AxiosMockRouter from 'axios-mock-router' import axios from 'axios' const router = new AxiosMockRouter(axios); router .get('https://github.com/', (ctx, next) => {...
message-board:node实现的朋友圈
04-30
【描述】：“技术栈：koa，mongoose，vue，axios npm i npm start” 描述中提到了四个关键的技术组件： 1. **Koa**：这是一个由Express团队开发的轻量级Web应用框架，用于构建API和服务。它提供了一套强大的中间件...
cykspace-node：博客后台服务～～ http://www.cykspace.com
02-03
相关技术栈Vue + Vue路由器+更少+ Axios 节点+ koa2 + koa-router mysql +续集Nginx + PM2未来可能加入后台管理评论网易云音乐页面数据可视化统计...测试克隆git clone git@github.com:chenyinkai/cykspace.git 安装...
koa2-vue：nodejs + vuejs全栈最佳实践
02-03
vue-router前端路由管理库 axios前瞻性请求库 koa2 nodejs Web开发框架 mongodb数据库 猫鼬数据库模型 木偶爬虫实现 七牛上传 开发模式包含前预期分离和服务端渲染 Linux的ubuntu16 Nginx的 自动化发布部署 笔记：
axios携带cookie配置详解(axios+koa)
10-17
主要介绍了axios携带cookie配置详解(axios+koa)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端框架的插件机制全梳理（axios、koa、redux、vuex）
油墨香^-^的博客
02-21 306
前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。本文将从koaaxiosvuex和redux的实现来教你怎么编写属于自己的插件机制。对于新手来说：本文能让你搞明白神秘的插件和拦截器到底是什么东西。对于老手来说：在你写的开源框架中也加入拦截器或者插件机制，让它变得更加强大吧！axios。
axios拦截器/koa中间件/express中间件/redux中间件的原理
Wopelo的博客
03-29 818
1.前言 最近在看redux相关的东西，发现redux也有中间件一说。之前接触的express、koa也有中间件的概念，而axios中也有拦截器这种相似的机制，那就正好梳理下这些概念的原理。 阅读本篇文章之前，读者应该对axios、koa、express、redux有所了解。 2.axios拦截器 2.1 注册 const axios = require('axios') axios.interceptors.request.use((config) => { console.log('请求拦截
axios、koa、redux、vuex插件机制
油墨香^-^的博客
09-08 149
前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。本文将从koa、axios、vuex和redux的实现来教你怎么编写属于自己的插件机制。对于新手来说：本文能让你搞明白神秘的插件和拦截器到底是什么东西。对于老手来说：在你写的开源框架中也加入拦截器或者插件机制，让它变得更加强大吧！axios。
axios拦截器_前端网红框架的插件机制全梳理（axios、koa、redux、vuex）
weixin_39745269的博客
11-27 218
前言 前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。本文将从koa、axios、vuex和redux的实现来教你怎么编写属于自己的插件机制。对于新手来说：本文能让你搞明白神秘的插件和拦截器到底是什么东西。对于老手来说：在你写的开源框架中也加入拦截...
使用axios和Koaji进行post传输数据
qq_44988115的博客
05-14 649
前端 使用axios发送前端post请求到后端，url为后端服务器地址 axios({ method: 'post', url: 'http://localhost:3000/login', data: { name: this.user.username, email: this.user.email, password: this.user.password }
使用 axios 实现 ajax 方案
热门推荐
fantian001的博客
04-16 4万+
使用 axios 实现 ajax 方案 vue.js 自2.0版本已经不对 vue-resource 更新了，官方推荐使用 axios 解决方案。axios 使用了 Promise,而 jquery 自3.0 版本才支持 Promise,如果你只是想使用 jquery 的 ajax 的话，引入整个 jquery 是很大的负担，所以 axios 是一个很好的工具。 知识点： 1.we...
vue+node+axios实现图片上传
luckylqh的博客
01-16 9463
用vue做前端，用axios上传图片，用node做后台接收数据 前端部分 上传图片用的是formData方法上传，用axios上传需要注意的地方： import axios from 'axios' methods:{ getImg(){ //用axios()方法 //需要注意的是在ajax中使用formdata需要配置anync:true,contentType:fal
Axios的Restful风格与koa2接收参数形式
❤的博客
05-23 557
Axios的Restful风格与koa2接收参数形式 因为项目中涉及到了axios的delete的方法就查询了一下aixos的官网后来在网上搜了一篇axios与restful请求规范的帖子，于是找到自己毕业设计所写的koa2后端项目打算小小的试一下。 axios官网的方法： axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios
使用koa2_vue2搭建一个后台管理系统 功能有:表格,表单,登录,添加,删除,修改等
最新发布
03-27
首先在app.js中引入koa2-cors、koa-bodyparser、koa-session、koa-router等中间件。 然后在routes目录下创建api.js文件，编写路由和接口代码，包括登录、查询、添加、删除、修改等功能。 7.编写前端代码 在client...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值