黑马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…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
Android15默认授权浮窗权限
我们经常有那种需求，客户需要定制的apk集成在ROM中，并且默认授予其【显示在其他应用的上层】权限，也就是我们常说的浮窗权限，那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...