Day03-作业(AxiosElementUI)

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

效果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/16820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot2实现图片文件上传与mysql存储路径并回显

环境介绍 技术栈 springbootmybatismysql 软件 版本 mysql 8 IDEA IntelliJ IDEA 2022.2.1 JDK 1.8 Spring Boot 2.7.13 mybatis 2.3.1 springboot是基于spring 4.0&#xff0c;springboot2是基于spring5.0,springboot2由pivotal公司在2018发布,这个框架主要用来…

螺旋矩阵 II——力扣59

文章目录 题目描述法一 模拟 题目描述 法一 模拟 初始化一个二维向量&#xff0c;名为matrix&#xff0c;它有n行和n列。向量的每个元素都是一个整数&#xff0c;初始化为0。初始化二维向量的语法如下&#xff1a;vector<vector<int>> matrix(n, vector<int>…

WPS本地镜像化在线文档操作以及样例

一个客户项目有引进在线文档操作需求&#xff0c;让我这边做一个demo调研下&#xff0c;给我的对接文档里有相关方法的说明&#xff0c;照着对接即可。但在真正对接过程中还是踩过不少坑&#xff0c;这儿对之前的对接工作做个记录。 按照习惯先来一个效果&#xff1a; Demo下载…

MySQL批量添加表字段命令

快捷命令&#xff1a; ALTER TABLE users ADD COLUMN age INT(11) DEFAULT 0 COMMENT 年龄, ADD COLUMN birth_place VARCHAR(30) DEFAULT COMMENT 出生地区, ADD COLUMN name VARCHAR(20) DEFAULT COMMENT 姓名; 复制代码

MVC异常处理类

package com.qf.common;import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler;/*** 统一异常处理类*/ ControllerAdvice public class MyExceptionHandler {ExceptionHandler(NullPointerExcep…

【phaser微信抖音小游戏开发002】hello world!

执行效果&#xff1a; 将以下代码文本内容&#xff0c;放入到game.js中即可。目录结构如下图 import ./js/libs/weapp-adapter import ./js/libs/symbolGameGlobal.window.scrollTo () > { };//防止真机出错 import Phaser from ./js/phaser//引入Phaservar {windowWidth, …

vue项目环境 搭建

1、安装nodejs 2、安装vue-cli, npm i -g vue/cli-init 3、初始化项目 vue init webpack test 4、运行 cd test npm run dev

PostgreSQL实战-pg13主从复制切换测试

PostgreSQL实战-pg13主从复制切换测试 配置PostgreSQL的环境变量 修改/etc/profile文件, vim /etc/profile添加如下内容: # 指定postgres的数据位置 export PGDATA=/var/lib/pg13/data数据联动测试 清空数据表数据 TRUNCATE TABLE tablename;主库清空数据表数据 从库对…

Blazor 自定义可重用基础组件之 Select 更新版

上次的Select能用&#xff0c;但有缺陷&#xff0c;当值改变时&#xff0c;没有引发一个属于EditForm的值改变事件&#xff0c;就是说还没有连接到表单&#xff0c;功能不完善。另外&#xff0c;像较为低层的input、select控件&#xff0c;其值只能接受string或其更低层的objec…

无人机影像配准并发布(共线方程)

无人机影像 DEM 计算四个角点坐标&#xff08;刚性变换&#xff09; 像空间坐标&#xff08;x,y,-f&#xff09; 像空间坐标畸变纠正 deltax,deltay 已知(x,y)&#xff0c;求解(X,Y, Z)或者(Lat,Lon) 这里的Z是DEM上获取的坐标和Zs为相机坐标的高程&#xff0c;如果均为已…

应用无线鼠标中的2.4GHz无线收发芯片

无线键盘和无线鼠标作为现代办公环境中常见的工具&#xff0c;为我们的工作带来了便利。无线键盘和无线鼠标的工作原理都是基于无线技术实现的&#xff0c;其中常见的是2.4GHz无线技术。让我们一起来详细了解一下它们的工作原理。 无线鼠标的原理非常简单,鼠标部分工作与传统鼠…

html富文本编辑器

接了个单子&#xff0c;需要添加一个文章模块&#xff0c;一看用到的技术这么老&#xff0c;人傻了&#xff0c;纯html css js 。 在普通页面中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"…

为Win12做准备?微软Win11 23H2将集成AI助手:GPT4免费用

微软日前确认今年4季度推出Win11 23H2&#xff0c;这是Win11第二个年度更新。 Win11 23H2具体有哪些功能升级&#xff0c;现在还不好说&#xff0c;但它会集成微软的Copilot&#xff0c;它很容易让人想到多年前的“曲别针”助手&#xff0c;但这次是AI技术加持的&#xff0c;Co…

一些高频的C++ cache line面试

C那些事之False Sharing与Cache line 最近看到一段代码&#xff0c;手动做的对齐&#xff0c;于是研究一下不对齐又会带来什么影响&#xff1f; template <typename T> class AtomicWithPadding {private:static constexpr int kCacheLineSize 64;uint8_t padding_befor…

牛客网Verilog刷题——VL46

牛客网Verilog刷题——VL46 题目解析答案 题目 根据题目提供的双口RAM代码和接口描述&#xff0c;实现同步FIFO&#xff0c;要求FIFO位宽和深度参数化可配置。电路的接口如下图所示。   双口RAM端口说明&#xff1a; 同步FIFO端口说明&#xff1a; 双口RAM代码如下&#xff…

网络安全 Day24-select高级用法和多表连接

select高级用法和多表连接 1. select 多子句单表高级实践1.1 select 多子句高级语法1.2 聚合函数1.3 group by 实践1.4 having 筛选1.5 order by 排序1.6 limit 2. 多表连接 1. select 多子句单表高级实践 1.1 select 多子句高级语法 where 和 having 区别是后者是分组后进行…

邪恶版ChatGPT来了!

「邪恶版」ChatGPT 出现&#xff1a;每月 60 欧元&#xff0c;毫无道德限制&#xff0c;专为“网络罪犯”而生。 WormGPT 并不是一个人工智能聊天机器人&#xff0c;它的开发目的不是为了有趣地提供无脊椎动物的人工智能帮助&#xff0c;就像专注于猫科动物的CatGPT一样。相反&…

nginx 超时问题 - 解决方法

nginx.conf 配置模板&#xff1a; http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 120s;server {listen 80;server_name localhost;################################## 1keepalive_timeout 600s;###…

【C++入门到精通】C++入门 —— 类和对象(构造函数、析构函数)

目录 一、类的6个默认成员函数 二、构造函数 ⭕构造函数概念 ⭕构造函数的特点 ⭕常见构造函数的几种类型 三、析构函数 ⭕析构函数概念 ⭕析构函数的特点 ⭕常见析构函数的几种类型 四、温馨提示 前言 这一篇文章是上一篇的续集&#xff08;这里有上篇链接&#xff09;…

Flink非对齐checkpoint原理(Flink Unaligned Checkpoint)

Flink非对齐checkpoint原理&#xff08;Flink Unaligned Checkpoint&#xff09; 为什么提出Unaligned Checkpoint&#xff08;UC&#xff09;&#xff1f; 因为反压严重时会导致Checkpoint失败&#xff0c;可能导致如下问题 恢复时间长-服务效率低非幂等和非事务会导致数据…