Axios案例练习

devtools/2024/11/25 11:26:00/
htmledit_views">

        使用原生的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>


http://www.ppmy.cn/devtools/136825.html

相关文章

详细描述一下Elasticsearch搜索的过程?

大家好&#xff0c;我是锋哥。今天分享关于【详细描述一下Elasticsearch搜索的过程?】面试题。希望对大家有帮助&#xff1b; 详细描述一下Elasticsearch搜索的过程? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Elasticsearch 是一个基于 Apache Lucene 构建的…

UE5材质篇5 简易水面

不得不说&#xff0c;UE5里搞一个水面实在是相比要自己写各种反射来说太友好了&#xff0c;就主要是开启一堆开关&#xff0c;lumen相关的&#xff0c;然后稍微连一些蓝图就几乎有了 这里要改一个shading model&#xff0c;要这个 然后要增加一个这个node 并且不需要连接base …

深入分析:固定参考框架在RViz中的作用与对数据可视化的影响 ros ubuntu20.04

深入分析&#xff1a;固定参考框架在RViz中的作用与对数据可视化的影响 RViz (Robot Visualization) 是 ROS (Robot Operating System) 中一种重要的三维可视化工具&#xff0c;主要用于实时观察和分析传感器数据、机器人状态信息以及环境模型。RViz的核心功能之一是固定参考框…

【探寻密码的奥秘】-000:密码相关概念定义及介绍(持续更新~~)

密码相关概念 1、密码学 1、密码学 密码学是研究密码与密码活动本质和规律&#xff0c;以及指导密码实践的科学&#xff0c;主要探索密码编码和密码分析的一般规律&#xff0c;它是一门结合数学、计算机科学、信息通信系统等多门学科为一体的综合性学科。 密码学的常见应用场景…

如何利用Python爬虫精准获得1688店铺详情

在数字化时代&#xff0c;数据的价值日益凸显&#xff0c;尤其是对于电商平台而言&#xff0c;精准获取店铺详情信息对于市场分析、竞争对手研究等方面至关重要。本文将详细介绍如何利用Python爬虫技术精准获取1688店铺的详细信息&#xff0c;包括店铺名称、地址、商品信息等&a…

健康之路走上IPO之路 百度演双重角色

近日&#xff0c;在港交所递交招股书的健康之路股份有限公司&#xff08;下称“健康之路”&#xff09;有了新动态&#xff0c;除了建银国际外&#xff0c;新增申万宏源为其协调人。 提起互联网医疗&#xff0c;第一时间想到的可能是阿里健康、京东健康、丁香医生等公司。 事…

在不同操作系统中安装TensorFlow的详细步骤

以下是在不同操作系统中安装TensorFlow的详细步骤&#xff1a; 一、在Windows系统中安装TensorFlow 安装Python 首先&#xff0c;从Python官方网站&#xff08;https://www.python.org/downloads/&#xff09;下载适合你系统的Python版本。建议选择Python 3.7及以上版本。在安…

Spring Boot应用开发实战:构建RESTful API服务

Spring Boot应用开发实战&#xff1a;构建RESTful API服务 在当今快速迭代的软件开发环境中&#xff0c;Spring Boot凭借其“约定优于配置”的理念&#xff0c;以及丰富的生态系统&#xff0c;成为了构建现代微服务架构的首选框架之一。本文将带您深入Spring Boot的世界&…