黑马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…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
爬虫基础学习day2
# 爬虫设计领域 工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
从面试角度回答Android中ContentProvider启动原理
Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程 触发条件：当其他组件（如Activity、Service）通过ContentR…...
uniapp 小程序 学习（一）
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 ：开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现 如下 bug 解…...