黑马2024AI+JavaWeb开发入门Day02-JS-VUE飞书作业
视频地址：哔哩哔哩
讲义作业飞书地址：飞书
一、作业1
<!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>作业1</title><style>table {width: 80%;border-collapse: collapse;margin: 0 auto;}th,td {border: 1px solid #000;padding: 10px 0px;}</style>
</head><body><!--3 将模型数据和视图进行绑定--><div id="app"><!--扩展需求：在下方表格中展示品牌信息--><table id="brandTable"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><tr v-for="(b, index) in brands" :key="b.id" align="center"><td>{{index + 1}}</td><td>{{b.brandName}}</td><td>{{b.companyName}}</td><td>{{b.ordered}}</td><td>{{b.description}}</td><td> <span v-show="b.status == 1" style="color: green;">启用</span><span v-show="b.status == 0" style="color: red;">禁用</span></td><td><a href="#">修改</a> <a href="#">删除</a></td></tr></table></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {brands: [{id: 10,brandName: "三只松鼠",companyName: "三只松鼠",ordered: "100",description:"三只松鼠，好吃不上火",status: 1}, {id: 20,brandName: "优衣库",companyName: "优衣库",ordered: "10",description:"优衣库，服适人生",status: 0}, {id: 30,brandName: "小米",companyName: "小米科技有限公司",ordered: "1000",description:"为发烧而生",status: 0}, {id: 40,brandName: "华为",companyName: "华为科技有限公司",ordered: "100",description:"没有伤痕累累，哪来皮糙肉厚，英雄自古多磨难",status: 1}]}}}).mount('#app')</script>
</body>
</html>二、作业2
<!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>作业2</title><style>table {width: 80%;border-collapse: collapse;margin: 0 auto;}th,td {border: 1px solid #000;padding: 10px 0px;}</style>
</head><body><!-- 需求: Vue挂载完成后, 通过axios发送异步请求到服务端, 或者学生列表数据, 并通过Vue展示在页面上. --><div id="app"><table><tr><th>编号</th><th>姓名</th><th>图像</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr v-for="(s, index) in students" :key="s.id" align="center"><td>{{index + 1}}}</td><td>{{s.name}}</td><td><img :src="s.image" height="50" width="70"></td><td>{{s.age}}</td><td><span v-if="s.gender == 1">男</span><span v-else>女</span></td><td>{{s.score}}</td><td><span v-if="s.score >= 85" style="color: green;">优秀</span><span v-else-if="s.score >= 60" style="color: yellow;">及格</span><span v-else style="color: red;">不及格</span></td></tr></table></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {students: []}},methods: {search() {axios.get('https://mock.apifox.cn/m1/3128855-0-default/student').then((result) => {this.students = result.data.data;});}},mounted() {this.search();}}).mount('#app')</script>
</body></html>三、作业3
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tlias智能学习辅助系统</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" placeholder="姓名" V-model="searchEmp.name"/><select name="gender" v-model="searchEmp.gender"><option value="">性别</option><option value="1">男</option><option value="2">女</option></select><select name="job" v-model="searchEmp.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" class="clear" @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><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 :src="e.image":alt="e.name" class="avatar"></td><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>咨询师</span></td><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="btn-group"><button class="edit">编辑</button><button class="delete">删除</button></td></tr></tbody></table></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {searchEmp: {name: '',gender: '',job: ''},empList: []}},methods: {search() {axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchEmp.name}&gender=${this.searchEmp.gender}&job=${this.searchEmp.job}`).then(res => {this.empList = res.data.dataconsole.log(res.data.data);})},clear() {this.searchEmp = {name: '',gender: '',job: ''};this.empList=[];}},mounted() {this.search();}}).mount('#container')</script>
</body></html>有问题请评论或者私信我！
相关文章：
黑马2024AI+JavaWeb开发入门Day02-JS-VUE飞书作业
视频地址：哔哩哔哩 讲义作业飞书地址：飞书 一、作业1 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&l…...
云计算基础-期末复习
第一章：云计算概论 一、云计算的定义与特征 1. 定义： 云计算是一种通过网络以按需、可扩展的方式获取计算资源和服务的模式。它将计算资源视为一种公用事业，用户可以根据需求动态获取和释放资源，而无需了解底层基础设施的细节。…...
Java GET请求 请求参数在Body中使用Json格式传参
业务需要调个三方接口 使用GET请求方式 但是！请求参数不在Query中，竟然在Body中，使用Json格式传参 在API调试工具里面可以调通 在java代码里，死活调不通 网上搜了搜，找到一个靠谱的，记录一下 import o…...
AI数据分析工具（一）
Looker Studio（谷歌）-免费 优点 免费使用：对于中小型企业和个人用户来说，没有任何费用压力，可以免费享受到数据可视化和报表创建的功能。与Google服务集成：特别适合使用Google产品生态的企业，…...
go结构体匿名“继承“方法冲突时继承优先顺序
在 Go 语言中，匿名字段（也称为嵌入字段）可以用来实现继承的效果。当你在一个结构体中匿名嵌入另一个结构体时，嵌入结构体的方法会被提升到外部结构体中。这意味着你可以直接通过外部结构体调用嵌入结构体的方法。 如果多个嵌入结…...
【049】基于51单片机语音录放【Proteus仿真+Keil程序+报告+原理图】
☆、设计硬件组成：51单片机最小系统ISD4004语音芯片LM386音频放大器喇叭LCD1602液晶显示按键控制LED灯。 1、本设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片，LCD1602液晶显示屏实时显示； 2、系统具有两种模式：录音…...
《软件项目管理》期末-复习题及参考答案
（1）赶工一个任务时，你应该关注（ C ） A. 尽可能多的任务 B. 非关键任务 C. 加速执行关键路径上的任务 D. 通过成本最低化加速执行任务 （2）下列哪个不是项目管理计划的一部分？&#x…...
milvus 通俗易懂原理
向量值如何生成的 Milvus 是一个开源的向量数据库，专门用于处理高维向量的存储、搜索和分析。向量值本身通常来自于某些机器学习或深度学习模型的输出，尤其是在自然语言处理（NLP）、计算机视觉（CV）、推荐系…...
什么是撞库、拖库和洗库？
“撞库”是黑客通过收集互联网已泄露的用户和密码信息，生成对应的字典表，尝试批量登陆其他网站后，得到一系列可以登录的用户。 很多用户在不同网站使用的是相同的帐号密码，因此黑客可以通过获取用户在A网站的账户从而尝试登录B网…...
安卓-碎片的使用入门
1.碎片(Fragment)是什么 Fragment是依赖于Activity的，不能独立存在的,是Activity界面中的一部分，可理解为模块化的Activity,它能让程序更加合理和充分地利用大屏幕的空间，因而在平板上应用得非常广泛. Fragment不能独立存在，必须…...
华为IPD流程学习之——深入解读123页华为IPD流程体系设计方法论PPT
该方案全面介绍了华为IPD流程体系设计方法论，包括流程体系建设的背景、理念、架构、核心特征、构建模型、与组织和战略的关系、运营机制、数字化转型以及流程管理组织等内容，旨在为企业提供一套系统的流程体系建设指导，以提升运营效率、质量和…...
DriveMLLM：一个专为自动驾驶空间理解任务设计的大规模基准数据集
2024-11-20， 由武汉大学、中国科学院自动化研究所、悉尼科技大学、牛津大学等合创建了DriveMLLM数据集，该数据集是自动驾驶领域首个专为评估多模态大型语言模型（MLLMs）空间理解能力而设计的基准，对于推动自动驾驶技术的…...
高效处理 iOS 应用中的大规模礼物数据：以直播项目为例（1-礼物池）
引言 在现代iOS应用开发中，处理大规模数据是一个常见的挑战。尤其实在直播项目中，礼物面板作为展示用户互动的重要部分，通常需要实时显示海量的礼物数据。这些数据不仅涉及到不同的区域、主播的动态差异，还需要保证高效的加载与渲…...
python的函数与递归
需求： 编写一个函数，计算斐波那契数列的第 N 项，并使用递归实现。 为了计算斐波那契数列的第 N 项，可以使用递归方法。斐波那契数列的定义是： F(0) 0 F(1) 1 对于 n > 2，F(n) F(n-1) F(n-2)…...
RabbitMQ学习-Seven
再SpringBoot中使用MQ 1.创建SpringBoot项目 除了我们平常使用的一些工具依赖，还需要选择这个Spring for RabbitMQ依赖 2.需要在application.yml文件中进行配置 server:port :9090 spring:application:name:producerrabbitmq:host: 你的主机名port: 5672virtual-…...
中科亿海微SoM模组——波控处理软硬一体解决方案
本文介绍的波控处理软硬一体解决方案主要是面向相控阵天线控制领域，波控处理通过控制不同天线组件的幅相来调整天线波束的方向和增益，实现高精度角度控制和高增益。本方案由波控处理板、波控处理控制软件算法和上位机软件共同构成。波控处理SoM模组原型样…...
开源法律、政策和实践
#一切皆可开源# 木兰社区对《Open Source Law,Policy and Practice 》这本书的第二版进行了翻译，并发布在了gitee上。这本书是对开源文化、开源政策、法律的全面介绍。目录如下： 1 Open Source as Philosophy,Methodology,and CommerceUsing Law with …...
【计算视觉算法与应用】金字塔，下采样Gaussian Pyramid. 上采用 Laplacian Pyramid （code: py）
金字塔（Pyramid）在图像处理中主要用于多尺度分析和图像压缩。常见的图像金字塔有两种： 高斯金字塔（Gaussian Pyramid）：用于下采样图像，生成分辨率逐渐降低的图像序列。拉普拉斯金字塔ÿ…...
基于BERT的语义分析实现
✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢，在这里我会分享我的知识和经验。&am…...
DNS查询工具
DNS查询工具是用于查询和获取域名相关信息的工具。通过这些工具，您可以获取到诸如IP地址、邮件服务器以及域名服务器等信息，这对于排查问题、设置域名配置以及确保网站正常运行都非常重要。 以下是五款常用的DNS记录查询工具： MxToolbox MxTo…...
ODB 框架
目录 概述 基本工作原理 映射C对象到数据库表 从数据库中加载对象 持久化C对象到数据库 ODB常用接口 表创建预处理 #pragma db Object table 数据表属性 id auto column（“xxx”） type("xxx") unique index null default&…...
Ubuntu WiFi检测
ubuntu检测到多个同名wifi，怎么鉴别假冒的wifi？ 在Ubuntu中，如果检测到多个同名的Wi-Fi网络，可能存在假冒的Wi-Fi（例如“蜜罐”攻击）。以下是一些鉴别假冒Wi-Fi的方法： 检查信号强度：…...
QILSTE H4-108TCG高亮纯lu光LED灯珠 发光二极管LED
型号：H4-108TCG 在电子领域，H4-108TCG LED以其卓越的性能和微小的尺寸1.6x0.8x0.4mm脱颖而出。这款高亮纯绿光LED，采用透明平面胶体，符合EIA标准包装，是环保产品，符合ROHS标准。防潮等级为Level 3…...
IP与“谷子”齐飞，阅文“乘势而上”？
爆火的“谷子经济”，又捧出一只“潜力股”。 近日，阅文集团股价持续上涨，5日累计涨幅达13.20%。这其中，周三股价一度大涨约15%至29.15港元，强势突破20日、30日、120日等多根均线，市值突破280亿港元关口。 …...
Java阶段三05
第3章-第5节 一、知识点 动态代理、jdk动态代理、cglib动态代理、AOP、SpringAOP 二、目标 理解什么是动态代理和它的作用 学会使用JAVA进行动态代理 理解什么是AOP 学会使用AOP 理解什么是AOP的切入点 三、内容分析 重点 理解什么是动态代理和它的作用 理解什么是AO…...
C# yield 关键字
文章目录 前言一、yield 关键字的语法形式及使用场景（一）yield return（二）yield break 二、yield 关键字的工作原理三、yield 关键字的优势与应用场景（一）优势（二）应用场景 前言 在 …...
SpringBoot开发——结合Nginx实现负载均衡
文章目录 负载均衡介绍介绍Nginx实现负载均衡的示例图:负载均衡策略1.Round Robin:2.Least Connections：3.IP Hash :4.Generic Hash:5.Least Time (NGINX Plus only)6.Random：Nginx+SpringBoot实现负载均衡环境准备Nginx 配置负载均衡测试负载均衡介绍 介绍 在介绍Nginx的负…...
RabbitMQ在手动消费的模式下设置失败重新投递策略
最近在写RabbitMQ的消费者，因为业务需求，希望失败后重试一定次数，超过之后就不处理了，或者放入死信队列。我这里就达到重试次数后就不处理了。本来以为很简单的，问了kimi，按它的方法配置之后，发…...
TsingtaoAI具身智能高校实训方案通过华为昇腾技术认证
日前，TsingtaoAI推出的“具身智能高校实训解决方案-从AI大模型机器人到通用具身智能”基于华为技术有限公司AI框架昇思MindSpore，完成并通过昇腾相互兼容性技术认证。 TsingtaoAI&华为昇腾联合解决方案 本项目“具身智能高校实训解决方案”以实现高…...
【Linux】线程池设计 + 策略模式
🌈 个人主页：Zfox_ 🔥 系列专栏：Linux 目录 一：🔥 线程池 1-1 ⽇志与策略模式1-2 线程池设计1-3 线程安全的单例模式1-3-1 什么是单例模式1-3-2 单例模式的特点1-3-3 饿汉实现⽅式和懒汉实现⽅式1-3-4 饿汉…...
o2o网站设计公司/游戏加盟
匿名函数提到闭包就不得不想起匿名函数，也叫闭包函数(closures)，貌似PHP闭包实现主要就是靠它。声明一个匿名函数是这样：代码如下:$func function() {}; //带结束符可以看到，匿名函数因为没有名字，如果要使用它&#…...
加强网站信息内容建设管理/百度新闻
说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 文章目录1、软件的概念2、软件的分类3、软件测试的概念4、软件测试的原则5、软件测试的流程（1）分析测试需求（测试…...
wordpress 上传图片大小限制/网站建设网络推广平台
1、找到配置文件redis.windows.conf 如下图所示，这是redis免安装版的目录。打开redis.windows.conf文件。 2、修改配置 找到requirePass 设置密码。 requirepass yourPassword3、保存配置，通过命令启动redis服务 D:\Program Files\Redis-x64-3.2.100&…...
wordpress影视网/百度一下 官方网
Python 简介 Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的一些标点符号，它具有比其他语言更有特色语法结构。 Python 是一种解释型语…...
wordpress 字体不一样/收录查询 站长工具
1. 引言 数据挖掘(data mining)是从大量的、不完全的、有噪声的、模糊的、随机的数据中提取隐含在其中的、人们事先不知道的、但又是潜在有用的信息和知识的过程。随着信息技术的高速发展，人们积累的数据量急剧增长，动辄以tb计，如何从海量的数…...
临沂建设中专官方网站/郑州网站制作公司
自己动手部署一遍 期中架构-第二章-备份服务笔记 01. 课程回顾 根据思维导图回顾了上节课内容02. rsync服务介绍 属于一款实现全量及增量复制同步的软件工具 03. rsync服务命令简单应用（1v4的应用效果） ①. rsync cp [rootbackup ~]# # rsync cp效果 […...