Vue-axios 简单使用(代扩展)

在项目中我们经常会用到ajax来获取数据,那么在vue中如何来实现这一个功能呢,接下来我记录一下简单的操作过程,希望能对你有所帮助.

axios

我们需要先安装axios这一个扩展插件就能实现发送请求操作
用nmp在需要的项目中安装:
命令:
npm i axios

当安装好之后,我们需要在使用的组件中引入 axios
eg:在 App.vue中引入axios 来实现ajax

点击页面上的按钮,获取后台服务器中的图片网址,
当获取成功之后,更改图片的网址,渲染出图片

code:

<template>
  <div id="app">
	  
    <img  :src="bgsrc" >
	<button @click='bg'>click</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
	
export default {
  name: 'App',
  data(){
	  return {
		  bgsrc :'123'
	  }
  },
  methods:{
	  bg(){
		 axios.get('https://www.juhuaguai.club/1.php')
		   .then( (res) => {
				this.bgsrc = res.data.src
				console.log(this.bgsrc)
		   })
		   .catch(function (error) {
		     console.log(error);
		   });
	  }
  }
  
}
</script>

<style>

</style>

Tip:请求的网址需要是本机域名,否则会出现跨域请求失败这种情况.
解决跨域请求的方法很多,大致分成两方向: 前端 , 后端

后端:

本人用的php,在请求页面允许跨域请求
header('Access-Control-Allow-Origin:*');

ps:前端的朋友,一般接触不到这个,而且一般后端不会这样设置的,这里只是拿来方便测试

前端

网上说的各种大神方法很多,基本看不懂哈哈哈哈,这里说一下简单的方法
就是用代理请求, proxy
原理就是:
代理帮你去请求数据,代理请求成功之后,在把他拿到的结果传回给你.

具体操作之后用到了在更新,哈哈哈
可以参考vue官方网址:

https://cli.vuejs.org/zh/config/#devserver-proxy

具体配置案例可以参考这个