vue axios ajax

最新推荐文章于 2025-01-19 16:27:58 发布

weixin_33905756

最新推荐文章于 2025-01-19 16:27:58 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：https://my.oschina.net/uwith/blog/3016483

本文详细介绍了如何在Vue项目中使用Axios进行前后端交互，包括安装配置、GET与POST请求示例，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

入门当然是先学习下ajax怎么跟后端交互了，自己整理下相关东西，留待以后翻阅。

首先vue2.0以后使用的ajax是axios，vue官方是不提供ajax的(在1.0有，到2.0觉得不属于前端内容就不官方推荐了)框架，了解不深，反正都这么用，也就这么用吧。

1、首先安装axios的npm，一定的在项目的根目录里面，我的项目是my-project，就是进去然后执行命令

cnpm install axios -S

2、然后在我们写的vue页面中写上这么一段玩意

<template>
  <div>
    <div>测试测试{{msg}}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'aaa',
  data () {
    return {
      msg: ''
    }
  },
  created () {
    console.log('这个方法被调用了')
    axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then((data) => {
        console.log(data)
        this.msg = data.status
      })
  }
}
</script>

<style scoped>

</style>

3、跳转进入此页面的时候会自动调用此方法，然后执行。不会跳转，看之前的文章。https://my.oschina.net/uwith/blog/3016035

post的方法

//组装传递的参数
let aa={"name":111};
// 拿到值然后请求后台获取数据
axios.post('http://localhost:8081/vcl/getDetail',aa).then((response) => {
    console.log(response.data)
})

axios貌似有不少的方式，自己看着习惯用吧，在给一个学习的地址，虽然我也看不懂啥意思。

https://segmentfault.com/a/1190000010902115

https://www.cnblogs.com/zhouyangla/p/6753673.html

转载于:https://my.oschina.net/uwith/blog/3016483