Vue与Ajax快速入门

一、Vue

1、什么是Vue

2、Vue常用指令

（1）v-for

案例核心代码：

<div id="container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <h1>Tlias智能学习辅助系统</h1>
        <a href="#">退出登录</a>
    </div>

    <!-- 搜索表单区域 -->
    <form class="search-form" action="/search" method="post">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名">

        <label for="gender">性别：</label>
        <select id="gender" name="gender">
            <option value=""></option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>

        <label for="position">职位：</label>
        <select id="position" name="position">
            <option value=""></option>
            <option value="1">班主任</option>
            <option value="2">讲师</option>
            <option value="3">学工主管</option>
            <option value="4">教研主管</option>
            <option value="5">咨询师</option>
        </select>

        <button type="submit">查询</button>
        <button type="reset">清空</button>
    </form>

    <!-- 表格展示区 -->
    <table>
        <!-- 表头 -->
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>头像</th>
            <th>职位</th>
            <th>入职日期</th>
            <th>最后操作时间</th>
            <th>操作</th>
        </tr>
        </thead>

        <!-- 表格主体内容 -->
        <tbody>
        <tr v-for="(e,index) in empList" :key="e.id">
            <td>{{index+1}}</td>
            <td>{{e.name}}</td>
            <td>{{e.gender==1?"男":"女"}}</td>
            <!--             差值表达式不能出现在标签内部中，只能放在标签属性中-->
            <td>
                <img class="avatar" src="e.image" alt="e.name">
            </td>
            <td>{{e.job}}</td>
            <td>{{e.entrydate}}</td>
            <td>{{e.updatetime}}</td>
            <td class="action-buttons">
                <button type="button">编辑</button>
                <button type="button">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 页脚版权区域 -->
    <footer class="footer">
        <p>江苏传智播客教育科技股份有限公司</p>
        <p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
    </footer>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        data() {
            return {
                empList: [
                    {
                        "id": 1,
                        "name": "谢逊",
                        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
                        "gender": 1,
                        "job": "1",
                        "entrydate": "2023-06-09",
                        "updatetime": "2024-09-30T14:59:38"
                    },
                    {
                        "id": 2,
                        "name": "韦一笑",
                        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
                        "gender": 1,
                        "job": "1",
                        "entrydate": "2020-05-09",
                        "updatetime": "2024-09-01T00:00:00"
                    },
                    {
                        "id": 3,
                        "name": "黛绮丝",
                        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
                        "gender": 2,
                        "job": "2",
                        "entrydate": "2021-06-01",
                        "updatetime": "2024-09-01T00:00:00"
                    }
                ]
            }
        }
    }).mount('#container')
</script>

（2）v-bind动态为HTML标签绑定属性值

案例代码优化图像：

            <td>
                <img class="avatar" v-bind:src="e.image" :alt="e.name">
                <img class="avatar" :src="e.image" :alt="e.name">
            </td>

（3）v-if与v-show

案例代码优化职位（选择其一）：

            <td>
                <!--                方法一：v-if-->
                <span v-if="e.job==1">班主任</span>
                <span v-if="e.job==2">讲师</span>
                <span v-if="e.job==3">学工主管</span>
                <span v-if="e.job==4">教研主管</span>
                <span v-if="e.job==5">咨询师</span>
                <!--                方法二：v-show-->
                <span v-show="e.job==1">班主任</span>
                <span v-show="e.job==2">讲师</span>
                <span v-show="e.job==3">学工主管</span>
                <span v-show="e.job==4">教研主管</span>
                <span v-show="e.job==5">咨询师</span>
            </td>

（4）v-model双向数据绑定

核心代码：

    <!--    将searchForm展示在页面上，方便检查是否成功-->
    {{searchForm}}
    <!-- 搜索表单区域 -->
    <form class="search-form" action="/search" method="post">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name">

        <label for="gender">性别：</label>
        <select id="gender" name="gender" v-model="searchForm.gender">
            <option value=""></option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>

        <label for="position">职位：</label>
        <select id="position" name="position" v-model="searchForm.job">
            <option value=""></option>
            <option value="1">班主任</option>
            <option value="2">讲师</option>
            <option value="3">学工主管</option>
            <option value="4">教研主管</option>
            <option value="5">咨询师</option>
        </select>

        <button type="submit">查询</button>
        <button type="reset">清空</button>
    </form>

v-model的双向数据绑定：

（5）v-on为HTML标签绑定事件

功能实现：查询打印，清空清空

核心代码：（给两个按钮分别使用v-on绑定事件）

        <button type="button" v-on:click="search">查询</button>
        <button type="button" @click="reset">清空</button>


        methods: {
            search() {
                console.log(this.searchForm)
            },
            reset() {
                this.searchForm = {
                    name: '',
                    gender: '',
                    position: ''
                }
            }
        }

二、Ajax

1、什么是Ajax

2、如何在前端页面发送Ajax异步请求？使用Axios

核心代码：

<!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>Ajax-Axios</title>
</head>
<body>

<input type="button" value="获取数据GET" id="btnGet">
<input type="button" value="操作数据POST" id="btnPost">

<script src="js/axios.js"></script>
<script>
    //发送GET请求
    document.querySelector('#btnGet').addEventListener('click', () => {
        axios({
            url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
            method: 'GET'
        }).then((result) => {  // 成功回调函数
            console.log(result.data);
        }).catch((error) => {  // 失败回调函数
            console.log(error);
        });
    })

    //发送POST请求
    document.querySelector('#btnPost').addEventListener('click', () => {
        axios({
            url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
            method: 'POST',  // post请求方式，请求体
            data: 'id=1'
        }).then((result) => {// 成功回调函数
            console.log(result.data);
        }).catch((error) => {// 失败回调函数
            console.log(error);
        });
    })
</script>
</body>
</html>

3、简化Axios（请求方式别名）

核心代码：

<!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>Ajax-Axios</title>
</head>
<body>

<input type="button" value="获取数据GET" id="btnGet">
<input type="button" value="操作数据POST" id="btnPost">

<script src="js/axios.js"></script>
<script>
    //发送GET请求
    document.querySelector('#btnGet').addEventListener('click', () => {
        axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
            console.log(result.data);
        }).catch((error) => {
            console.log(error);
        });

    })

    //发送POST请求
    document.querySelector('#btnPost').addEventListener('click', () => {
        axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => {
            console.log(result.data);
        }).catch((error) => {
            console.log(error);
        });
    })
</script>
</body>
</html>

4、异步变同步（代码从上至下依次执行）===》async&await

核心代码：

            async search() {
                // 发送ajax请求，获取数据
                // axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {
                //     this.empList = result.data.data;
                // }).catch((error) => {
                //     console.log(error);
                // })

                // 使用async/await将异步改为同步，使得代码更加清晰
                let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
                this.empList = result.data.data;
            }

5、Vue的生命周期

八个钩子方法：