VUE3@/cli数据交互（axios）

Posted 2021-09-07 月疯

数据交互： 

axios是一个基于Promise的HTTP请求的客户端，用来发送AJAX请求

使用axios的步骤：
执行npm install axios -S 安装模块
通过import axios from 'axios' 导入模块
使用axios对象提供的方法发送异步请求

全局引入axios并添加到VUE原型中，简化使用
在main.js中导入axios模块
使用app.comfig.globalProperties添加一个全局属性$http,指向axios

 

vue3重新打开项目：先定位到项目目录，然后输入：npm run serve

 

先安装：npm install axios -S 

先创建一个组件：

CompC组件：

<template>
	<div>
		<button @click="sendAjax">发送ajax请求</button>
		//如果user有值就展示，没值就不展示，因为初次进来user没有值
		<div v-if="user">
			<p>姓名：{{user.name}}</p>
			<p>介绍：{{user.bio}}</p>
			<p>头像：<img :src="user.avatar_url" alt="" style="width:100px;height:100px"></p>
		</div>
	</div>
</template>

<script>
	// https://gitee.com/api/v5/users/tangyang8942
	//导入axios模块
	// import axios from 'axios'
	export default{
		data(){
			return{
				user:null
			}
		},
		methods:{
			sendAjax(){
				// let p = axios.get('https://gitee.com/api/v5/users/tangyang8942')
				let p = this.$http.get('https://gitee.com/api/v5/users/tangyang8942')
				//请求成功之后
				.then(res =>{//相应对象
					console.log(res.data)
					this.user=res.data
				})
				//请求失败之后
				.catch(err => {
					console.log(err)
				})
				console.log(p)
			}
		}
	}
</script>

<style lang="less">
</style>

 App.vue添加组件：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- <comp-a></comp-a> -->
  <!-- <CompA></CompA> -->
  <CompA/>
  <CompC></CompC>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import CompA from './components/CompA'  //可以省略后缀名
import CompC from './components/CompC.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
	// 'comp-a':CompA
	// CompA:CompA //驼峰式写法
	CompA,  //帕斯卡式，首字母大写，ES6的简写
	CompC
  }
  
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

就可以进行网络访问：

配置全局的axios

main.js

import { createApp } from 'vue'
import App from './App.vue'
// import CompB from './components/CompB.vue'
import CompB from '@/components/CompB.vue'
//配置全局axios
import axios from 'axios'
// @相当于/src
// createApp(App).mount('#app')
const app=createApp(App)
//注册全局组件
app.component('CompB',CompB)
//配置全局属性
//配置公共的服务器地址
axios.defaults.baseURL = 'http://localhost:8888'//设置请求地址的基础路径（只针对非协议开头的地址）
app.config.globalProperties.$http = axios
app.mount('#app')

 这样在其他的组件里面就可以直接以$http调用get和post的网络请求了。