Ajax-03.Axios-案例

天上掉下来个程小白2024-08-18 19:15

基于Vue以及Axios完成数据动态加载展示

1.数据准备的url：https://yapi.pro/mock/401965/user/getById

2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别：1代表男，2代表女）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <style>
        table {
            text-align: center;
            margin: 0 auto;
            border: 1px solid black;
        }
        th,td {
            border: 1px solid black;
        }
    </style>
</head>
<!-- 
    基于Vue以及Axios完成数据动态加载展示
    1.数据准备的url：https://yapi.pro/mock/401965/user/getById
    2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别：1代表男，2代表女）
-->
<body>
    <div id="app">
        <table cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr v-for="(emp,index) in emps">  <!-- 遍历展示数组emps中的数据 -->
                <td >{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img  v-bind:src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatedate}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            emps:[] // 赋值给vue中的数据模型emps数组
        },
        mounted () {  // mounted:vue生命周期中的挂载完成状态，当挂载完成后，自动调用axios的get方法用来向服务器请求数据
            // 发送异步请求，加载数据
            axios.get("https://yapi.pro/mock/401965/user/getById").then(result => {  // 将请求到的数据交给一个result对象
                /*  
                调用result中的data属性拿到数据，然后我们只需要拿到服务器中的data这个属性名对应下的属性值即可，因此再次.data 
                然后把他交给this.emps，this代表的就是当前对象，emps就是vue对象下的一个数据模型（是一个数组）
                */
                this.emps = result.data.data;   
            });
        }
    })
</script>
</html>