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

Day03-作业（AxiosElementUI）

news 2026/3/30 21:06:14

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

FreeRTOS任务切换时，Cortex-M内核的PSP和MSP指针到底怎么变？一个动画讲清楚

FreeRTOS任务切换时Cortex-M内核PSP与MSP指针变化全解析 当你在调试一个嵌入式系统时&#xff0c;突然遇到栈溢出导致的崩溃&#xff0c;那种感觉就像在黑夜里摸索——你知道问题出在哪里&#xff0c;但就是看不清细节。作为一名嵌入式开发者&#xff0c;理解FreeRTOS在Cortex-…...

编程新知 2026/3/30 18:59:00

【系统分析师_知识点整理】 8.项目管理

核心考向&#xff1a;进度管理&#xff08;计算 选择最高频&#xff09;&#xff1a;关键路径、ES/EF/LS/LF、总浮动时间、自由浮动时间、PDM 四种依赖、进度偏差分析&#xff1b;范围管理&#xff1a;WBS、范围确认、范围控制、范围边界定义&#xff1b;成本管理&#xff1a;…...

编程新知 2026/3/30 18:52:56

Java基础-初识Java

SUN公司是一家什么样的公司? 美国SUN(Stanford University Network)公司在中国大陆的正式中文名为“太阳计算机系统&#xff08;中国&#xff09;有限公司”在中国台湾中文名为“升 阳电脑公司”。 Java为什么被发明? Green项目。应用环境&#xff1a;像电视盒这样的消费类电…...

编程新知 2026/3/30 18:46:54

Video-LLaMA部署指南：如何在本地服务器上高效运行多模态AI

Video-LLaMA部署指南&#xff1a;如何在本地服务器上高效运行多模态AI 【免费下载链接】Video-LLaMA [EMNLP 2023 Demo] Video-LLaMA: An Instruction-tuned Audio-Visual Language Model for Video Understanding 项目地址: https://gitcode.com/gh_mirrors/vi/Video-LLaMA …...

编程新知 2026/3/30 18:32:48

LabelImg图像标注工具：3分钟掌握高效目标检测数据标注技巧

LabelImg图像标注工具&#xff1a;3分钟掌握高效目标检测数据标注技巧 【免费下载链接】labelImg LabelImg is now part of the Label Studio community. The popular image annotation tool created by Tzutalin is no longer actively being developed, but you can check ou…...

编程新知 2026/3/30 18:08:37

GreptimeDB高可用架构深度解析：5大核心策略保障业务连续性

GreptimeDB高可用架构深度解析&#xff1a;5大核心策略保障业务连续性 【免费下载链接】greptimedb An open-source, cloud-native, distributed time-series database with PromQL/SQL/Python supported. 项目地址: https://gitcode.com/GitHub_Trending/gr/greptimedb …...

编程新知 2026/3/30 16:23:13

RAGFlow图片回答避坑指南：为什么不用Base64和阿里云OSS？

RAGFlow图片回答架构设计&#xff1a;从Base64到容器化服务器的技术演进 当RAG系统需要处理包含图片的回答时&#xff0c;技术选型直接关系到系统的性能、安全性和可维护性。本文将深入探讨几种主流方案的优劣对比&#xff0c;并解析为何容器化图片服务器成为当前最优解。 1. 图…...

编程新知 2026/3/30 14:50:33

Qwen3字幕生成工具实战：快速处理会议录音，输出带时间戳字幕

Qwen3字幕生成工具实战&#xff1a;快速处理会议录音&#xff0c;输出带时间戳字幕 1. 会议录音转字幕的痛点与解决方案 处理会议录音是许多职场人士的日常任务。传统方法需要先听录音&#xff0c;再手动记录内容&#xff0c;最后还要逐句对齐时间轴&#xff0c;整个过程耗时…...

编程新知 2026/3/30 13:37:06

深度学习项目训练环境体验：基于专栏的实战环境，快速验证模型

深度学习项目训练环境体验&#xff1a;基于专栏的实战环境&#xff0c;快速验证模型 1. 环境概述与核心价值 深度学习项目开发过程中&#xff0c;环境配置往往是最耗时且最容易出问题的环节。本镜像基于《深度学习项目改进与实战》专栏预置了完整的开发环境&#xff0c;让开发…...

编程新知 2026/3/30 11:15:40

如何高效捕获网页媒体资源？猫抓插件让智能嗅探变得如此简单

如何高效捕获网页媒体资源&#xff1f;猫抓插件让智能嗅探变得如此简单 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否遇到过想保存网页上的精彩视频却找不到下载按钮的尴尬&#xff1f;是否曾…...

编程新知 2026/3/30 11:13:39