Javeweb学习笔记——Vue+Ajax

1、Vue

实验代码如下：要注意各个的书写规范！！！相当于vue接管了id=app的这部分，超出接管部分就可能回原封不动的输出表达式而不是值。

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的学习</title>
</head>


<body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>


    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            data(){
                return{
                    message:'hello vue'
                }
            }
        }).mount("#app");
    </script>

</body>
</html>

结果：刚启动之后等一会出现结果

2、vue常用指令

（1）v-for

整体代码如下：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tlias智能学习辅助系统</title>
    <style>

        #container{
            width:80%;
            margin: 0 auto;
        }

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

        /* 加大加粗标题 */
        .header h1 {
            margin: 0;
            font-size: 30px;
            font-weight: bold;
            color:white;
            font-family: "楷体";
        }

        /* 文本链接样式 */
        .header a {
            text-decoration: none;
            color: white;
            font-size: 16px;
        }
        /* 搜索表单区域 */
        .search-form {
            display: flex;
            align-items: center;
            background-color: #f9f9f9;
            gap:10px;
            margin:20px 0;
        }

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

        /* 按钮样式 */
        .search-form button {
            padding: 5px 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;
            margin: 0 auto;
        }

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

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

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

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

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

    </style>
</head>
<body id="container">
<!-- 顶栏 -->
<div class="header">
    <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="job">职位：</label>
    <select id="job" name="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" class="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>
        <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 src="{{e.image}}" alt="{{e.name}}" class="avatar"></td>
        <td>{{e.job}}</td>
        <td>{{e.entrydate}}</td>
        <td>{{e.updatetime}}</td>
        <td class="btn-group">
            <button>编辑</button>
            <button>删除</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 type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        data(){
            return{
                empList: [
                    {"id": 1, "name": "出现", "image": "4.jpg", "gender": 1, "job": "1", "entrydate": "2023-06-09", "updatetime": "2024-07-30T14:59:38"},
                    {"id": 2, "name": "非一发", "image": "1.jpg", "gender": 1, "job": "1", "entrydate": "2020-05-09", "updatetime": "2023-07-01T00:00:00"},
                    {"id": 3, "name": "黑格林", "image": "2.jpg", "gender": 2, "job": "2", "entrydate": "2021-06-01", "updatetime": "2023-07-01T00:00:00"}
                ]
            }
        }
    }).mount("#container");

</script>


</body>
</html>

结果如下：

（2）v-bind

解决上一节图片的显示问题！

复制代码

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

从而实现了图片的显示问题

（3）v-if或者v-show

在job这里放入的是值，对应的职位并没有显示

同样的展示效果，不同的写法：

复制代码

<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>

结果如下：

总结：

（4）v-model

(5)v-on

一定要注意将方法首先定义在methods中！！！与data是并列的关系

复制代码

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

复制代码

methods:{
    search(){
        console.log(this.searchform);
    },
    clear(){
        this.searchform={
            name:'',
            gender:'',
            job:''
        }
    }
},

成功在控制台实现查询和清空功能

2、Ajax

在使用这个之前要先下载这个库：

复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

之后定义两个按钮：

复制代码

<input type="button" value="发送请求get" id="btn">
<input type="button" value="发送请求post" id="btn2">

再使用上述的方法给按钮绑定事件：

复制代码

<script>
    document.querySelector('#btn').addEventListener('click',()=>{
        axios({
            method:'GET',
            url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
        }).then((result)=>{
            console.log(result.data)
        }).catch((err)=>{
            console.log(err)
        })
    })

    document.querySelector('#btn2').addEventListener('click',()=>{
        axios({
            method:'POST',
            url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
            data:'id=1'
        }).then((result)=>{
            console.log(result.data)
        }).catch((err)=>{
            console.log(err)
        })
    })
</script>

结果显示：首先点击get按钮，直接显示数据

之后点击post按钮，data为null，正常现象

简化写法：

简化代码如下：

复制代码

<script>
    document.querySelector('#btn').addEventListener('click',()=>{
        axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result)=>{
            console.log(result.data)
        }).catch((err)=>{
            console.log(err)
        })
    })

    document.querySelector('#btn2').addEventListener('click',()=>{
        axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update').then((result)=>{
            console.log(result.data)
        }).catch((err)=>{
            console.log(err)
        })
    })
</script>

在这个代码中，当程序在输出的时候，先输出2，因为Ajax是异步交互，当1在和服务器交互时，程序继续执行到2，之后再输出1

总结：

3、Ajax案例

在上一个查询的代码中进行更改

首先将emplist的数据进行删除，之后在search函数中重新定义

复制代码

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;//两个.data，不用catch可以删除
    })
},

运行之后点击查询，所有信息进行显示：

之后对表单的三个选择项进行更改即可查询信息：

并对清空代码进行改进，保证在点击清空按钮之后，除了表单内容清空，下面的数据也返回原貌

复制代码

clear(){
    this.searchform={
        name:'',
        gender:'',
        job:''
    }
    this.search();
}

查询之后在点击清空即可展示以下页面：

复制代码

async search(){
    //发送ajax获取数据
        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;
},

功能正常实现

4、vue的生命周期

作用：页面加载之后可以自动先显示所有数据，不用点击查询之后在显示所有数据，与data、methods同等地位

复制代码

//钩子函数,页面加载完毕之后就先显示所有数据，不是一定要点击查询之后显示
mounted(){
        this.search();
}

实现以上功能！！！