第二题完

2025-10-19 23:21:18 +08:00
parent 8150aa63d1
commit 9fc2093505
4 changed files with 282 additions and 11 deletions
--- a/Vue-案例-员工列表(常用指令).html
+++ b/Vue-案例-员工列表(常用指令).html
@@ -116,13 +116,14 @@
            <h1>Tlias智能学习辅助系统</h1>
            <a href="#">退出登录</a>
        </div>
-        {{searchFrom}}
+        <!-- {{searchFrom}} -->
        <!-- 搜索区域 -->
        <!-- 搜索表单区域 -->
        <form class="search-form" action="/search" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" v-model="searchFrom.name" placeholder="请输入姓名">

+
            <label for="gender">性别：</label>
            <select id="gender" name="gender" v-model="searchFrom.gender">
                <option value=""></option>
@@ -140,8 +141,8 @@
                <option value="5">咨询师</option>
            </select>

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

        <!-- 表格展示区 -->
@@ -247,6 +248,25 @@
                    ]

                }
+            },
+            // 定义方法
+            methods: {
+                search() {
+                    // //将搜索条件输出到控制台
+                    // if (this.searchFrom.name.trim() == '') {
+                    //     alert('请输入员工姓名');
+                    //     return;
+                    // }
+                    console.log(this.searchFrom);
+                },
+                clear() {
+                    //将搜索条件清空
+                    this.searchFrom = {
+                        name: '',
+                        gender: '',
+                        job: ''
+                    }
+                }
            }
        }).mount('#container')
    </script>
--- a/前端Web基础(JS+Vue+Ajax)/JS-Vue/14.
+++ b/前端Web基础(JS+Vue+Ajax)/JS-Vue/14.
@@ -1,13 +1,15 @@
 <!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">

@@ -15,13 +17,30 @@
    <script>
        //发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {
-           
+            //axios发起异步请求
+            axios({
+                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
+                method: 'GET'
+            }).then((result) => {
+                console.log(result);
+            }).catch((err) => {
+                console.log(err);
+            })
        })
-        
+
        //发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {
-            
+            axios({
+                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
+                method: 'POST',
+                date: 'id=1'
+            }).then((result) => {
+                console.log(result);
+            }).catch((err) => {
+                console.log(err);
+            })
        })
    </script>
 </body>
+
 </html>
--- a/前端Web基础(JS+Vue+Ajax)/JS-Vue/15.
+++ b/前端Web基础(JS+Vue+Ajax)/JS-Vue/15.
@@ -1,13 +1,15 @@
 <!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">

@@ -15,13 +17,19 @@
    <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)
+            })
+            console.log('-------------------------');
        })
-        
+
        //发送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)
+            })
        })
    </script>
 </body>
+
 </html>
--- a/Vue-案例-员工列表(异步交互).html
+++ b/Vue-案例-员工列表(异步交互).html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Tlias智能学习辅助系统</title>
+    <style>
+        /* 导航栏样式 */
+        .navbar {
+            background-color: #b5b3b3; /* 灰色背景 */
+            
+            display: flex; /* flex弹性布局 */
+            justify-content: space-between; /* 左右对齐 */
+
+            padding: 10px; /* 内边距 */
+            align-items: center; /* 垂直居中 */
+        }
+        .navbar h1 {
+            margin: 0; /* 移除默认的上下外边距 */
+            font-weight: bold; /* 加粗 */
+            color: white;
+            /* 设置字体为楷体 */
+            font-family: "楷体";
+        }
+        .navbar a {
+            color: white; /* 链接颜色为白色 */
+            text-decoration: none; /* 移除下划线 */
+        }
+
+        /* 搜索表单样式 */
+        .search-form {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            gap: 10px; /* 控件之间的间距 */
+            margin: 20px 0;
+        }
+        .search-form input[type="text"], .search-form select {
+            padding: 5px; /* 输入框内边距 */
+            width: 260px; /* 宽度 */
+        }
+        .search-form button {
+            padding: 5px 15px; /* 按钮内边距 */
+        }
+
+        /* 表格样式 */
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        th, td {
+            border: 1px solid #ddd; /* 边框 */
+            padding: 8px; /* 单元格内边距 */
+            text-align: center; /* 左对齐 */
+        }
+        th {
+            background-color: #f2f2f2;
+            font-weight: bold;
+        }
+        .avatar {
+            width: 30px;
+            height: 30px;
+        }
+
+        /* 页脚样式 */
+        .footer {
+            background-color: #b5b3b3; /* 灰色背景 */
+            color: white; /* 白色文字 */
+            text-align: center; /* 居中文本 */
+            padding: 10px 0; /* 上下内边距 */
+            margin-top: 30px;
+        }
+
+        #container {
+            width: 80%; /* 宽度为80% */
+            margin: 0 auto; /* 水平居中 */
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <!-- 顶部导航栏 -->
+        <div class="navbar">
+            <h1>Tlias智能学习辅助系统</h1>
+            <a href="#">退出登录</a>
+        </div>
+        
+        <!-- 搜索表单区域 -->
+        <form class="search-form">
+            <label for="name">姓名：</label>
+            <input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">
+
+            <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="button" v-on:click="search">查询</button>
+            <button type="button" @click="clear">清空</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"  v-bind:src="e.image" :alt="e.name"></td>
+
+                    <!-- v-if: 控制元素的显示与隐藏 -->
+                    <td>
+                        <span v-if="e.job == 1">班主任</span>
+                        <span v-else-if="e.job == 2">讲师</span>
+                        <span v-else-if="e.job == 3">学工主管</span>
+                        <span v-else-if="e.job == 4">教研主管</span>
+                        <span v-else-if="e.job == 5">咨询师</span>
+                        <span v-else>其他</span>
+                    </td>
+
+                    <!-- v-show: 控制元素的显示与隐藏 -->
+                    <!-- <td>
+                        <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> -->
+
+                    <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 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.get('https://web-server.itheima.net/emps/list?name='+this.searchForm.name+'&gender='+this.searchForm.gender+'&job='+this.searchForm.job).then((result) => {
+                // 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((err) => { 
+                //     console.log(err);
+                // });
+                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;            
+
+            },
+            clear(){
+                //清空表单项数据
+                this.searchForm = {name:'', gender:'', job:''}
+                this.search()
+            },
+            // 钩子函数
+            async mounted(){
+                //页面加载完成之后，发送ajax请求，获取数据
+                await this.search()
+            }
+        },
+        //钩子函数
+        mounted(){
+            //页面加载完成之后，发送ajax请求，获取数据
+            this.search()
+        }
+      }).mount('#container')
+    </script>
+
+</body>
+</html>