黑马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…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器
第一章 引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...