Axios案例练习 - 技术栈

使用原生的Ajax请求还是比较繁琐，所以说一般使用Axios，Axios是对于Ajax的封装，主要是为了简化书写。
Axios使用比较简单，主要分为两步：
1.在script标签的src中引入Axios文件
特别注意，这里是需要一对单独的script标签进行引入，而不是在引入的script标签中写代码
2.编写Axios代码，并绑定按钮
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios案例</title>
    <style>
        body {
            margin: 0;
        }

        /* 顶栏样式 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #c2c0c0;
            padding: 20px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* 加大加粗标题 */
        .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: bold;
        }

        /* 文本链接样式 */
        .header a {
            text-decoration: none;
            color: #333;
            font-size: 16px;
        }

        /* 搜索表单区域 */
        .search-form {
            display: flex;
            align-items: center;
            padding: 20px;
            background-color: #f9f9f9;
        }

        /* 表单控件样式 */
        .search-form input[type="text"],
        .search-form select {
            margin-right: 10px;
            padding: 10px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 26%;
        }

        /* 按钮样式 */
        .search-form button {
            padding: 10px 15px;
            margin-left: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 清空按钮样式 */
        .search-form button.clear {
            background-color: #6c757d;
        }

        .table {
            min-width: 100%;
            border-collapse: collapse;
        }

        /* 设置表格单元格边框 */
        .table td,
        .table th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .avatar {
            width: 30px;
            height: 30px;
            object-fit: cover;
            border-radius: 50%;
        }

        /* 页脚版权区域 */
        .footer {
            background-color: #c2c0c0;
            color: white;
            text-align: center;
            padding: 10px 0;
            margin-top: 30px;
        }

        .footer .company-name {
            font-size: 1.1em;
            font-weight: bold;
        }

        .footer .copyright {
            font-size: 0.9em;
        }

        #container {
            width: 80%;
            margin: 0 auto;
        }
    </style>
</head>

<body>

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

        <!-- 搜索表单区域 -->
        <form class="search-form">
            <input type="text" name="name" placeholder="姓名" v-model="searchForm.name" />
            <select name="gender" v-model="searchForm.gender">
                <option value="">性别</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
            <select name="job" 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="button" @click="search">查询</button>
            <button type="button" @click="clear">清空</button>
        </form>

        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(emp, index) in empList" :key="index">
                    <td>{{ emp.name }}</td>
                    <td>{{ emp.gender === 1 ? '男' : '女' }}</td>
                    <td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td>

                    <!-- 基于v-if/v-else-if/v-else指令来展示职位这一列 -->
                    <td>
                        <span v-if="emp.job == '1'">班主任</span>
                        <span v-else-if="emp.job == '2'">讲师</span>
                        <span v-else-if="emp.job == '3'">学工主管</span>
                        <span v-else-if="emp.job == '4'">教研主管</span>
                        <span v-else-if="emp.job == '5'">咨询师</span>
                        <span v-else>其他</span>
                    </td>

                    <!-- 基于v-show指令来展示职位这一列 -->
                    <!-- <td>
            <span v-show="emp.job === '1'">班主任</span>
            <span v-show="emp.job === '2'">讲师</span>
            <span v-show="emp.job === '3'">学工主管</span>
            <span v-show="emp.job === '4'">教研主管</span>
            <span v-show="emp.job === '5'">咨询师</span>
         </td> -->

                    <td>{{ emp.entrydate }}</td>
                    <td>{{ emp.updatetime }}</td>
                    <td class="btn-group">
                        <button class="edit">编辑</button>
                        <button class="delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

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

        <script src="js/axios.js"></script>
        <script type="module">
            import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      createApp({
        data() {
          return {
            searchForm: {
              name: '',
              gender: '',
              job: ''
            },
            empList: []
          }
        },
        methods: {
            async search() {
                //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
                const 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;
            },
          clear() {
            this.searchForm= {
              name: '',
              gender: '',
              job: ''
            }
          }
        }
      }).mount('#container')
    </script>

    </div>

</body>

</html>