黑马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…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中，选择 环境 -> 常规 ，将其中的颜色主题改成深色 点击确定，更改完成...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...