巧用 VScode 网页版 IDE 搭建个人笔记知识库!-CFANZ编程社区

巧用 VScode 网页版 IDE 搭建个人笔记知识库!

一. 什么是Axios

axios官方文档

二.引入Axios库文件

1.可以直接引用

2.可以下载Axios的js文件导入

下载此js文件

三.使用Axios配合Vue发出Ajax请求案例

在Vue中使用Axios，向服务器发送Ajax请求，将获取的json数据显示界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
</head>
<body>
<div id="app">
    <h1>妖怪列表</h1>
    <table border="1" width="300">
        <tr>
            <td>名字</td>
            <td>年龄</td>
        </tr>
        <tr v-for="monster in monsterList">
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
            </td>
        </tr>
    </table>
</div>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
// data / created() / methods 是一个固定结构
        data: {
            monsterList: []//数组
        },created() { //在页面渲染前执行,调用 list()
            this.list()
        },methods: {

            list() {
                axios.get('http://localhost:63342/axios/data/response.json')
                    .then(response => {
                        console.log("response=",response);
                        console.log("response.data=",response.data);
                        console.log("response.data.data=",response.data.data);
                        console.log("response字符串=",JSON.stringify(response.data));

                        this.monsterList = response.data.data.items;
                    })
                    .catch(error => {
                        console.log(error)
                    })

            }
        }
    })
</script>
</body>
</html>

结果：

注意点：

在此网站可以将json对象转换为字符串https://www.json.cn/

0 条评论