当前位置： 首页 > news >正文

Day03-作业（AxiosElementUI）

news 2026/5/16 14:12:49

作业1： 根据需求完成如下页面数据列表展示

需求：Vue挂载完成后,通过axios发送异步请求到服务端,获取学生列表数据,并通过Vue展示在页面上

获取数据url：http://yapi.smart-xwork.cn/mock/169327/student

素材：

<!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>作业01</title><script src="js/vue.js"></script><script src="js/axios-0.18.0.js"></script>
</head>
<body><!-- 需求: Vue挂载完成后,通过axios发送异步请求到服务端,或者学生列表数据,并通过Vue展示在页面上. --><div id="app"><table border="1" cellspacing="0" width="80%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center"><td>1</td><td>张三</td><td><img src="https://web-tlias.oss-cn-hangzhou.aliyuncs.com/1.jpg" height="50" width="70"></td><td>18</td><td><span>男</span><span>女</span></td><td>100</td><td><span style="color: green;">优秀</span><span style="color: yellow;">及格</span><span style="color: red;">不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {students: []}})
</script>
</html>

说明：

  • 性别 gender：1 为男，2为女。

  • 分数 score：

    • >= 85 优秀

    • >= 60 并且 <85 及格

    • < 60 不及格

效果展示：

作业2： 使用ElementUI绘制如下页面

需求：Vue挂载完成后,通过axios发送异步请求到服务端,获取品牌列表数据,并通过Vue展示在页面上

获取数据url：https://mock.apifox.cn/m2/2031273-0-default/99613695icon-default.png?t=N6B9https://mock.apifox.cn/m2/2031273-0-default/99613695

效果展示：

相关文章：

Day03-作业（AxiosElementUI）

作业1&#xff1a; 根据需求完成如下页面数据列表展示 需求&#xff1a;Vue挂载完成后,通过axios发送异步请求到服务端,获取学生列表数据,并通过Vue展示在页面上 获取数据url&#xff1a;http://yapi.smart-xwork.cn/mock/169327/student 素材&#xff1a; <!DOCTYPE html…...

编程日记 2023/8/1 17:26:12

低代码开发平台源码：基于模型驱动，内置功能强大的建模引擎，零代码也能快速创建智能化、移动化的企业应用程序

管理后台低代码PaaS平台是一款基于 Salesforce Platform 的开源替代方案&#xff0c;旨在为企业提供高效、灵活、易于使用的低代码开发平台。低代码PaaS平台的10大核心引擎功能:1.建模引擎 2.移动引擎 3.流程引擎 4.页面引擎 5.报表引擎 6.安全引擎 7.API引擎 8.应用集成引擎 9…...

编程日记 2023/8/1 17:25:11

下载JMeter的历史版本——个人推荐5.2.1版本

官网地址&#xff1a;https://archive.apache.org/dist/jmeter/binaries/...

编程日记 2023/8/1 17:24:10

2023-07-30 LeetCode每日一题（环形链表 II）

2023-07-30每日一题 一、题目编号 142. 环形链表 II二、题目链接 点击跳转到题目位置 三、题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 n…...

编程日记 2023/8/1 17:23:08

设计模式——简单工厂模式

1 概述 将创造对象的工作交给一个单独的类来实现 &#xff0c;这个单独的类就是工厂。 2 实现 假设要做一个计算器的需求&#xff0c;通常我们想到的是这样写&#xff1a; package com.example.easyfactory;import java.util.Scanner;public class Demo1 {public static vo…...

编程日记 2023/8/1 17:22:07

AnimatedVectorDrawable矢量图动画的使用和修改

文章目录 一、前言二、一个矢量图文件三、参考链接 一、前言 矢量可绘制对象可以提供比较复杂的动画效果&#xff0c;只是绘制比较复杂&#xff0c;这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候&#…...

编程日记 2023/8/1 17:21:05

【C++】—— 多态的基本介绍

前言&#xff1a; 在之前的学习过程中&#xff0c;我们已经对继承进行了详细的学习和了解。今天&#xff0c;我将带领大家学习的是关于 多态 的基本知识。 目录 &#xff08;一&#xff09;多态的概念 1、概念 &#xff08;二&#xff09;多态的定义及实现 1、多态的构成条…...

编程日记 2023/8/1 17:20:04

一文详解：自动化测试工具——Selenium

前言 Selenium是一个用于Web应用程序测试的工具。是一个开源的Web的自动化测试工具&#xff0c;最初是为网站自动化测试而开发的&#xff0c;类型像我们玩游戏用的按键精灵&#xff0c;可以按指定的命令自动操作&#xff0c;不同是Selenium可以直接运行在浏览器上&#xff0c;…...

编程日记 2023/8/1 17:19:03

[模版总结] - 集合划分类DFS模版

题目描述 给定一个数组&#xff0c;给定一个数字k, 问能不能讲数组内数等分成k份&#xff0c;使得每一个集合中数和相等。 题目链接 下面两道题问题及其类似&#xff0c;可作为同一类题目思考 Leetcode 698 Leetcode 473 题目思路 这道题是一道经典集合划分类问题&#…...

编程日记 2023/8/1 17:18:02

JavaScript中复制新的数组与原数组删除某个值——不影响新复制的数组的方法详解

系列文章目录 文章目录 系列文章目录前言一、使用slice()方法复制数组二、使用concat()方法复制数组三、使用扩展运算符(...)复制数组总结 前言 在JavaScript中&#xff0c;我们经常需要处理数组的复制和修改。本文将详细介绍如何在JavaScript中复制一个新的数组&#xff0c;并…...

编程日记 2023/8/1 17:16:58

easyui主表子表维护页面

easyui主表子表维护页面 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Title</title><!-- <#include "common.html"/> --><link rel"stylesheet" type&quo…...

编程日记 2023/8/1 17:15:55

k8s exam

Pause 容器是 Pod 中的第一个启动的容器&#xff0c;其他所有的用户容器都是其子进程当 Pod 被从节点中删除时&#xff0c;与之关联的 emptyDir 中的数据也将被永久删除。持久存储用PV&#xff0c;PVCService 资源定义了如何访问应用&#xff0c;但实际的网络流量管理和路由是由…...

编程日记 2023/8/1 17:14:49

C#，中国福利彩票《刮刮乐》的数学算法（02）——时来运转

1 中国福利彩票 中国福利彩票始于1987年7月27日&#xff0c;以“团结各界热心社会福利事业的人士&#xff0c;发扬社会主义人道主义精神&#xff0c;筹集社会福利资金&#xff0c;兴办残疾人、老年人、孤儿福利事业和帮助有困难的人”、即“扶老、助残、救孤、济困”为宗旨。随…...

编程日记 2023/8/1 17:13:48

我的观影记录表【个人向】

目录 前言电影评分标准闪电侠&#xff08;2023&#xff09;银河护卫队3&#xff08;2023&#xff09; 前言 这里是我本人的观影记录&#xff0c;这个想法2年前就有了&#xff0c;但是一直比较懒&#xff0c;现在&#xff08;上班摸鱼&#xff09;准备重新开始&#xff0c;评价…...

编程日记 2023/8/1 17:12:45

网络安全策略应包含哪些？

网络安全策略是保护组织免受网络威胁的关键措施。良好的网络安全策略可以确保数据和系统的保密性、完整性和可用性。以下是一个典型的网络安全策略应包含的几个重要方面&#xff1a; 1. 强化密码策略&#xff1a;采用强密码&#xff0c;要求定期更换密码&#xff0c;并使用多因…...

编程日记 2023/8/1 17:11:44

【Git】Git GitHub

1. Git1.1 Git基本操作1.2 Git版本回退1.3 Git分支操作 2. Git 配合GitHub2.1 生成密钥2.2 GitHub添加公钥2.3 Git连接GitHub2.4 本地仓库关联远程仓库2.5 本地代码push远程仓库2.6 本地clone远程仓库2.7 本地fetch和pull 1. Git 1.1 Git基本操作 touch test.py 工作区创建文…...

编程日记 2023/8/1 17:10:43

[STL]详解list模拟实现

[STL]list模拟实现 文章目录 [STL]list模拟实现1. 整体结构总览2. 成员变量解析3. 默认成员函数构造函数1迭代器区间构造函数拷贝构造函数赋值运算符重载析构函数 4. 迭代器及相关函数迭代器整体结构总览迭代器的模拟实现begin函数和end函数begin函数和end函数const版本 5. 数据…...

编程日记 2023/8/1 17:09:42

C和C++的区别与联系

C语言&#xff08;C&#xff09;和C语言&#xff08;C&#xff09;是两种编程语言&#xff0c;它们之间有许多区别和联系。以下是它们之间的主要区别和联系&#xff1a; 区别&#xff1a; 历史和起源&#xff1a; C语言是由Dennis Ritchie于20世纪70年代初在贝尔实验室开发的。…...

编程日记 2023/8/1 17:08:41

springboot通过接口执行本地shell脚本

首先创建springboot项目 shell脚本 #!/bin/shecho Hello World&#xff01;然后编写执行shell脚本的util类 import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.List;pub…...

编程日记 2023/8/1 17:07:41

工欲善其事必先利其器，IT工作电脑更要维护好

目录 一&#xff1a;电脑的组成 二&#xff1a;维护措施 三&#xff1a;助力记忆 一&#xff1a;电脑的组成 当谈到电脑主机时&#xff0c;我们通常指的是电脑的中央处理器(CPU)、内存、主板、电源、硬盘、显卡、声卡、网卡等核心部件组成的整体。这些部件共同协作&#xff…...

编程日记 2023/8/1 17:06:40

基于smartcat的智能文件自动分类与归档系统实践

1. 项目概述&#xff1a;一个智能化的文件分类与归档工具最近在整理个人电脑和服务器上的文件时&#xff0c;我又一次陷入了混乱。下载文件夹里混杂着PDF、图片、代码压缩包、安装程序&#xff1b;项目文档和历史备份散落在各处。手动分类不仅耗时&#xff0c;而且容易出错。我…...

编程新知 2026/5/16 12:03:36

STM32F407霸天虎实战：用硬件I2C点亮OLED，顺便聊聊软件模拟I2C的坑

STM32F407硬件I2C驱动OLED全攻略&#xff1a;从原理到避坑指南 在嵌入式开发中&#xff0c;显示模块的选择往往决定了用户体验的上限。0.96寸OLED凭借其高对比度、低功耗和轻薄特性&#xff0c;成为众多项目的首选。但如何为它选择合适的通信方式&#xff1f;本文将带你深入STM…...

编程新知 2026/5/16 11:54:33

基于RT-Thread与PSoC 6的智能环境监测系统设计与实现

1. 项目概述&#xff1a;当嵌入式RTOS遇上混合信号MCU最近在捣鼓一个智能环境监测的小玩意儿&#xff0c;核心需求很简单&#xff1a;实时采集环境的温湿度数据&#xff0c;一旦超过预设的阈值&#xff0c;就通过声光或者网络的方式发出警报。听起来像是毕业设计的经典题目&…...

编程新知 2026/5/16 11:23:45

东方博宜OJ入门题解：从A+B到高精度算法的实战解析

1. 东方博宜OJ平台入门指南 第一次接触在线评测系统(OJ)时&#xff0c;很多人都会被各种题目搞得晕头转向。东方博宜OJ作为国内知名的编程练习平台&#xff0c;特别适合编程新手从零开始系统学习。我刚开始刷题时也走过不少弯路&#xff0c;今天就和大家分享一些实战经验。 这…...

编程新知 2026/5/16 10:40:47

在Nodejs服务中集成多模型API实现智能客服场景

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在Nodejs服务中集成多模型API实现智能客服场景 智能客服是当前许多在线服务提升用户体验的关键组件。对于Node.js后端开发者而言&a…...

编程新知 2026/5/16 10:26:03

在Windows电脑上畅享酷安社区的完整指南：桌面端酷安客户端终极教程

在Windows电脑上畅享酷安社区的完整指南&#xff1a;桌面端酷安客户端终极教程 【免费下载链接】Coolapk-UWP 一个基于 UWP 平台的第三方酷安客户端 项目地址: https://gitcode.com/gh_mirrors/co/Coolapk-UWP 想要在大屏幕上舒适地浏览酷安社区吗&#xff1f;厌倦了手机…...

编程新知 2026/5/16 9:47:42

从零到一：基于STM32与MAX30102构建可穿戴健康监测原型

1. 硬件选型与原理分析 第一次接触MAX30102传感器时&#xff0c;我被它小巧的体积和强大的功能震撼到了。这个比指甲盖还小的芯片&#xff0c;居然能同时测量心率和血氧饱和度&#xff0c;这让我对可穿戴设备有了全新的认识。选择STM32F103作为主控&#xff0c;主要是看中它丰富…...

编程新知 2026/5/16 9:47:41

Agent 记忆架构演进：从简单的 Vector DB 到结构化知识图谱

Agent 记忆架构演进：从简单的 Vector DB 到结构化知识图谱 如果你曾开发过大模型 Agent，一定遇到过这样的痛点：你给 Agent 喂了几百条历史聊天记录、项目文档，问它「我上周和张三讨论的电商项目预算是多少？当时李四提了什么反对意见？」，它要么答非所问，要么只说对一半，…...

编程新知 2026/5/16 8:49:41

终极指南：3分钟掌握Deepin Boot Maker，轻松制作Linux启动盘

终极指南&#xff1a;3分钟掌握Deepin Boot Maker&#xff0c;轻松制作Linux启动盘 【免费下载链接】deepin-boot-maker 项目地址: https://gitcode.com/gh_mirrors/de/deepin-boot-maker 你是否曾经因为复杂的命令行操作而对Linux系统安装望而却步&#xff1f;或者面对…...

编程新知 2026/5/16 8:47:36

小学生如何学好GESP

一、按年龄段科学规划学习路径 ‌1. 6–9岁&#xff08;小学低年级&#xff09;&#xff1a;重在逻辑启蒙&#xff0c;不急于学代码‌ A、‌核心任务‌&#xff1a;培养‌计算思维、问题拆解、条件判断‌等能力。 B、‌推荐方式‌&#xff1a; &#xff08;1&#xff09;、…...

编程新知 2026/5/16 8:29:52