引入axios文件
下载:
npm install axios
在script中引入:
import axios from 'axios';//默认暴露所以可以直接引入
或直接引入js
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
发生请求
Get请求
在script中,标明是get请求,地址写在url中,回调参数在then的result.data中
// axios请求
axios({
method: 'get',
url: 'http://localhost:8080/sogame/all'
}).then(result => {
//成功回调,result包含所有数据
console.log(result.data);//data是接口响应数据
}).catch(err => {
//失败回调
console.log("axios请求失败:",err);
});
可以简化为:
axios.get('http://localhost:8080/sogame/all').then(result => {
//成功回调,result包含所有数据
console.log(result.data);//data是接口响应数据
}).catch(err => {});
携带参数就拼接请求字符串,加上
?id=1&name=z
或者使用,{params:参数}(这里封装成一个函数,可以给多个vue文件复用)
export async function getAllGamesService(params) {
//同步等待服务器结果
return await axios.get('http://localhost:8080/sogame/all')
.then(result => {
//成功回调,result包含所有数据
return result.data;
}).catch(err => {
});
}
Post请求
带参传递,数据放在data后
axios({
method: 'post',
url: 'http://localhost:8080/sogame/all',
data:myList
}).then(result => {
//成功回调,result包含所有数据
console.log(result.data);//data是接口响应数据
}).catch(err => {
//失败回调
console.log("axios请求失败:", err);
});
可以简化为:数据用逗号加在后面
axios.post('http://localhost:8080/sogame/all', myList).then(result => {
console.log(result.data);//data是接口响应数据
}).catch(err => {});
展示到页面
可以在script中创建一个变量接收
(这边收到的是一个实例对象的List数组,key最好和接收的key相等)
let gameList = ref([
{ game_id: '1', game_name: 'title01' }
])
axios.get('http://localhost:8080/sogame/all').then(result => {
//成功回调,result包含所有数据
console.log(result.data);//data是接口响应数据
gameList.value = result.data;
}).catch(err => {
});
html中循环展示
<ul>
<li v-for="game in gameList" :key="game.game_id">{{ game.game_name }}</li>
</ul>