輸入java時，頁面并沒有刷新但是下面自動聯想出了跟java有關的東西，像這種就叫異步交互
它不會妨礙你的輸入，同時還能夠同步進行對于java相關聯想詞的推送
發送異步請求需要借助工具axios
引入axios，可以直接在scripts中引入
get和post的區別：GET 提交參數一般顯示在 URL 上，POST 通過表單提交不會顯示在 URL 上，POST 更具隱蔽性
data和post方法相對應，params和get方法相對應
成功回調函數：進行異步請求的時候，是不會影響客戶端的進程的，所以我們需要一個成功回調函數來去接收你異步向服務器進行請求的結果，result里的就是服務器端響應回來的數據
catch是與then平級的函數，叫失敗回調函數，顧名思義就是請求失敗的時候執行的函數
格式：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>document.querySelector('你要捕獲的標簽所帶的id名').addEventListener('你要添加的監聽事件',() =>{//開始發起異步請求axios({url:'你要請求的地址(?get參數內容)',method:'GET/POST' //選擇get方法還是post方法。若使用get且有請求參數，看上面一行括號內容,如果是post方法有請求參數，看下一行內容//data:'post要請求的參數' }).then((then) =>{console.log(result); //成功回調后輸出結果}).catch((err) =>{console.log(err); //失敗回調后輸出失敗原因})
})</script>另一種方法，請求方式
如果是用post才需要用到上面圖中寫的格式中的data什么的參數，是get直接輸入網址就可以了
直接出現then和catch方法的快速方式：輸axios.get().thenc回車
關于代碼的先后輸出順序
在這里，2雖然寫在下面，但是要注意1用到了異步請求，它是需要時間的，同時它不會影響其他地方的進程，所以是2先輸出，1后輸出
如果是get請求，可以直接在url中輸入參數，格式為：
url？參數1=xxx&參數二=（若無要求）&參數三=xxx? ?
如：
https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx
<!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(){// 發送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;// })// console.log('===========================');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()}},//鉤子函數mounted(){//頁面加載完成之后，發送ajax請求，獲取數據this.search()}}).mount('#container')</script></body>
</html>想要代碼從上往下執行：同步請求
由于異步請求會使得代碼不按從上往下的順序執行，所以在有些情況下需要將異步請求變成同步
用這種方法，不需要寫then和catch，直接用一個變量去接收await的結果即可，后續操作直接對變量進行操作即可
vue生命周期知識，請跳轉
vue的簡單使用-CSDN博客
)