【Vue】axios入门(二)

最新推荐文章于 2022-11-14 09:15:31 发布
最新推荐文章于 2022-11-14 09:15:31 发布
阅读量509 收藏 12
点赞数 2
分类专栏： # Java实训 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48180029/article/details/118656176
版权

视频

中文文档

ajax封装

在这里插入图片描述
axios视频

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
      .show{
        padding-left: 30px;
        padding-top: 30px;
        position: absolute;
        top:40px;
        left:50px;
        width: 500px;
        height: 300px;
        background: #f1f1f1;
      }

    </style>
</head>
<body>
  <div class="show">
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

</body>
<script>
  axios({
    url:'http://localhost:8082/depart/findAll'
  }).then(res=>{
    console.log(res);
  })
</script>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用axios.get发送请求
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
      .show{
        padding-left: 30px;
        padding-top: 30px;
        position: absolute;
        top:40px;
        left:50px;
        width: 500px;
        height: 300px;
        background: #f1f1f1;
      }

    </style>
</head>
<body>
  <div class="show">
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

</body>
<script>
  axios.get('http://localhost:8082/depart/findByDname',
    {params:{Dname:'学生部'}})
  .then(res=>{
    console.log(res);
  }).catch(err=>{
    console.log(err)
  })
  
</script>
</html>

axios全局配置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
      .show{
        padding-left: 30px;
        padding-top: 30px;
        position: absolute;
        top:40px;
        left:50px;
        width: 500px;
        height: 300px;
        background: #f1f1f1;
      }

    </style>
</head>
<body>
  <div class="show">
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

</body>
<script>
  axios.defaults.baseURL = 'http://localhost:8082/depart';
  axios.defaults.timeout=5000;
  axios.get('/findByDname',
    {params:{Dname:"学生部"}})
  .then(res=>{
    console.log(res);
  }).catch(err=>{
    console.log(err)
  })

</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
      .show{
        padding-left: 30px;
        padding-top: 30px;
        position: absolute;
        top:40px;
        left:50px;
        width: 500px;
        height: 300px;
        background: #f1f1f1;
      }

    </style>
</head>
<body>
  <div class="show">
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

</body>
<script>
  //创建实例
  let newVar = axios.create({
    baseURL:'http://localhost:8082/depart',
    timeout:5000
  })
  newVar({
    url:'/findAll'
  }).then(res=>{
    console.log(res)
  })

</script>
</html>

在vue模块的封装

在这里插入图片描述

import axios from "axios";
export function request(config) {
  axios({
    url:config
  }).then(res=>{
    console.log(res)
  })
}

在这里插入图片描述

import {request} from "./network/request/requset";
request('http://localhost:8082/depart/findAll')

axios常见5种请求方法

SpringMVC请求参数接收总结

post

常用的编码类型有这几种：1.application/x-www-form-urlencoded（常用于原生form表单提交）；2.multipart/form-data（常用于文件传输）；3.application/json（常用JSON格式编码）

    注意：不同的Content-type需要对应不同的参数格式

          1.application/x-www-form-urlencoded。参数格式：需要将正常的对象转化

          例如：var   data={

                                    name:'小明',

                                    age:'18'

                             }

                   data=qs.stringify(data)

        注意： qs.stringify将对象序列化。使用qs.stringify函数时需要引入qs（通过npm安装）

        2.multipart/form-data。参数格式：form-data

        例如：var    data=new   FormData();

                   data.append("name","小明");

                   data.append("age","18");

        3.application/json。参数格式：JSON对象

        例如：var    data={

                                    "name","小明",

                                    "age","18"

                            }

谈谈axios配置请求头content-type

res.data表示的是后端向前端传输的对象obj
res.data.data表示的是后端向前端传输的对象obj属性名称为data对应的属性值

1、Content-Type: application/json

    test () {
      let temp = {
        'userName': '楠晗',
        'pwd': '123456'
      }
      // temp对应的是请求体的内容，必须是对象，不能是变量
      this.$axios.post('http://localhost:8888/book/query', temp, {
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        }
      })
        .then(res => {
          console.log(res.data.data)
        }).catch(err => {
          console.log(err)
        })
    }
  }

后端：

    @PostMapping("/query")
    public RestResponse queryTest(@RequestBody User user){
        System.out.println(user);
        return RestResponse.ok("已收到");
    }

2、Content-Type: multipart/form-data

test () {
      let temp = new FormData()
      temp.append('userName', 'hangover')
      temp.append('pwd', '123456')
      this.$axios.post('http://localhost:8888/book/query', temp)
        .then(res => {
          console.log(res.data.data)
        }).catch(err => {
          console.log(err)
        })
    }

在这里插入图片描述

    @PostMapping("/query")
    public RestResponse queryTest(User user){
        System.out.println(user);
        return RestResponse.ok("已收到");
    }

3、Content-Type: application/x-www-form-urlencoded

在这里插入图片描述

npm install qs

<script>
import qs from 'qs'

    test () {
      let temp = {
        'userName': '楠晗',
        'pwd': '123456'
      }
      this.$axios.post('http://localhost:8888/book/query', qs.stringify(temp))
        .then(res => {
          console.log(res.data.data)
        }).catch(err => {
          console.log(err)
        })
    }

</script>

后端:

    @PostMapping("/query")
    public RestResponse queryTest(User user){
        System.out.println(user);
        return RestResponse.ok("已收到");
    }

data(){
        return{
          ruleForm: {
            dname: '',
            index: '',
            manger: '',
            tel:'',
            email:'',
            cadate:'',
            status:''
          }

        }
      }

add(){
 let formdata = new FormData();
          for(let key in this.ruleForm){
            formdata.append(key,this.ruleForm[key]);
          }
}
this.$axios.post('http://localhost:8082/depart/add',formdata)

delete

deleteRow(param){
            this.$axios.delete('http://localhost:8082/user/delete',{
              params:{id:param}
            }).then(successRespose =>{
              this.init();
            }).catch(err=>{
              console.log(param)
            })
        },

get

init(){

            this.$axios.get('http://localhost:8082/user/select')
            .then(res=>{
              this.userData = res.data;
            }).catch(err=>{
              console.log(res.data)
            })
          },

带参数的请求:

findByType () {
      this.$axios.get('http://localhost:8888/book/findByType', {
        params: {
          type: this.bookType // type对应的是后端所需要的参数名称
        }
      })
        .then(res => {
          console.log(res)
          this.tableData = res.data.data
        }).catch(err => {
          console.log(err)
        })
    }

后端:

    @GetMapping("/findByType")
    public RestResponse findByType(@RequestParam("type") String type){
        return RestResponse.ok().put("data",bookService.findBookByType(type));
    }

put

editForm:{
              id:'',
              userName:'',
              passWord:'',
              realName:''
            }
let formData = new FormData();
          for(let key in this.editForm){
            formData.append(key,this.editForm[key])
          }
            this.$axios.put('http://localhost:8082/user/update',formData)
            .then(res=>{
              //this.init();
            })
繁星伴晚安
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Axios-如何发送一个get
01-07
目录 Axios是什么？ Axios如何使用？ 扩展： Axios是什么？ 基于promise的HTTP库，可以发送get、post请求。下面的例子是用在vue框架上的。 Axios如何使用？ 第一步： 导包，相关文件引入。 cnpm install --save axios //安装依赖的包，--save表示打包也不删除的包 //main.js文件中 import axios from 'axios' Vue.prototype.$http = axios //将axios改写为Vue的原型链属性，使其可以在其它组件上使用 第二步： 码代码。 //在需要用到的组件页，例如APP.vu
axios get
qq_43542074的博客
09-04 615
api.js export function coursewareList(params) { return request({ url: '/f/course/securityStudyCourseware/list?taskId=a89b57f008724fa3b5135ff663f93c28', method: 'get', params }) } 引入api.j...
axios的get请求
qq_40576178的博客
02-28 6398
vue之axios使用
itKingOne的博客
06-21 1万+
一、安装 1、 利用npm安装npm install axios --save 2、 利用bower安装bower install axios --save 3、 直接利用cdn引入 二、例子 1、 发送一个GET请求 //通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ con
Axios
weixin_62115642的博客
08-16 261
通俗的理解:浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，例如:无法读取非同源网页的Cookie、LocalStorage和IndexedDB。MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。，可以通过src属性，请求非同源的js脚本。因此，JSONP的实现原理，就是通过标签的src属性，请求跨域的数据接口，并通过。的形式，接收跨域接口响应回来的数据。无法接触非同源网页的DOM。请求非同源的接口数据。...
axios基本入门用法教程
08-31
之前当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,前一段时间用了一下，现在说一下它的基本用法。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
vue脚手架——axios
03-30
VUE Cli入门
Vue从小白到入门 axios.min.js vue.js
07-12
Vue从小白到入门 axios.min.js vue.js
onsenui-vue-router-pwa：Onsen UI + Vue + Vue Router + Axios PWA入门项目
02-05
Onsen UI + Vue + Vue路由器+ Axios PWA入门项目 信息 使用此项目入门之前，请仔细阅读 该项目基于 由于我目前不需要PWA，因此我在index.html删除了所有与PWA相关的脚本。 如果要使用PWA，只需将index-serviceworker...
vue.js+axios初学
11-15
axios初学vue.js+axios初学
axios
包磊磊的博客
10-19 699
一、安装 1、 利用npm安装npm install axios --save 2、 利用bower安装bower install axios --save 3、 直接利用cdn引入 二、例子 1、 发送一个GET请求 //通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ console.log(
axios教程
iamCccic的博客
02-05 3359
一、axios的基本使用 axios介绍: https://www.kancloud.cn/yunye/axios/234845 1、axios 发送get请求 带参 <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> 方式一： axios({ url: 'http://127.0.0.1/user/signout?id=1', me
axios的GET请求
wddbq的博客
03-20 1万+
axios.get方法的API请参照官网今天用params提交参数时，总是提示400。调查发现是params参数的设定方法不正确导致。axios.get(url, { params: { 'userId': vm.loginForm.user, 'createDt...
axios的get与post请求
weixin_43366084的博客
11-29 320
get请求： getMailCode (email) { return axios.get('/users/getMailCode', { // get方式参数放在params params: { email } }) } post请求： register (options = {}) { return axios.post('/users/register', options) } 后台接收： get： router.
Axios的get和post请求
qq_39229914的博客
08-09 179
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 一、axios POST提交数据的三种请求方式写法 axios.post(url,data,config) 1、Content-Type: application/json import axios from 'axios' ...
axios之get传参
热门推荐
Lemontree_fu的博客
09-06 3万+
最近遇到了get传参的几种格式，想在这里总结一下，有不对的可以告诉我，我会改的~ 后台说：以url的形式传参 先上图吧：看看后台的需求 这个是通过每页条数和页码获取用户列表，一般传参比较少的都是以url的形式传过去的。 下面是代码： axios .get('/api/Login/GetUserList', { params:{ pageSize:_this.pageSize, ...
axios中的Get和Post请求
weixin_62226037的博客
11-14 2151
他们俩个的区别就是get因为参数会放在url中，所以他的安全性较差，请求的数据长度有限制而post请求是没有的长度限制，请求数据是放在body中；get请求刷新页面或者回退没有影响而post请求回退时会重新提交数据请求。通俗点来说get请求就是去取获取数据的，post请求就是去提交数据的。get请求会被保存在浏览器历史记录当中但post不会。get请求只能用url编码,而post可以多种。get请求可以缓存，post请求不会被缓存。
vue简单入门的项目
最新发布
01-31
如果你需要调用后端接口，可以使用Vue的官方插件Vue Resource或者axios。这些工具可以帮助你发送HTTP请求并处理响应。 最后，当你完成了项目的开发，你可以使用npm run build命令打包你的项目。打包后的文件将会...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值