EECS 493 艺人搜索

课业5：艺人搜索
EECS 493 2024年冬季
发布时间：2024年3月17日
到期时间：2024年4月7日晚上11:59
提交说明
● 请将您的作品以zip文件的形式提交给Canvas，名为“a5_<your_uniqname>.zip”。
○ 命名拉链时，请取下角括号。
○ Canvas完成的重命名（例如“-1”）是可以的。
● 这个zip文件应该包含一个目录，其中包含提供的所有文件和目录
在启动器代码中。
○ 即zip文件应具有以下结构：
a5_uniqname.zip
└── a5_uniqname
├── README.txt（可选）
├── img
│ ├── 1.jpg
│ └── 2.jpg
├── index.css
├── index.html
├── 加载.gif
└── script.js
○ 请保留现有的目录结构，不要再添加任何文件夹/文件
（奖金积分的README.txt除外）。
● 不遵守提交说明将受到处罚。
任务目标
这项任务的目的是让你获得MVC模式的实践经验
使用web应用程序开发框架Vue.js和CSS框架Bootstrap
响应式设计。
项目概述视频
课业5简介视频
备注：视频中的搜索结果可能不是最新的。请参阅
下面的屏幕截图可以获得更新、准确的结果。
分级明细
我们希望您创建一个数字“艺术家搜索”网站，如所附规范中所述
在下面该应用程序有6个主要组成部分（分母为100分）：
1.搜索栏-25分
2.艺术家网格-30分
3.导航选项卡-5分
4.轨道信息-5分
5.流派选择-20分
6.排序菜单-15分
7.[可选]奖励功能-最高10分起动机代码
您将使用我们提供的起始代码来完成此任务：a5_w24_starter_code.zip我们提供的启动器代码包括以下文件：
1.script.js：一个Vue.js实例的占位符[将您的js代码放在这个文件中]
2.index.html:html页面[将您的html代码放在这个文件中]
3.loading.gif:在等待艺术家信息返回时显示此gif[可选]
4.index.css：其他自定义样式[不要修改此文件]
5.img/1.jpg和img/2.jpg：两个图像占位符[您的最终代码不需要它们]
评论：
● 您不需要使用任何入门代码，但它可以帮助您。
● 除非你知道自己在做什么，否则请不要修改＜head＞中的任何内容
标记在index.html中。
● 如有任何修改和澄清，请咨询Piazza。
● 确保您的应用程序（网页）在最新版本的上运行正常
谷歌浏览器。你的评分员将使用Chrome浏览器。
● 为了确保您的代码正确运行，在不同的平台上进行测试可能会有所帮助
计算机
屏幕截图
带有搜索栏的主页：
搜索艺术家后：
左侧两个结果的“轨迹信息”选项卡：
排序菜单：
按“集合名称”排序后：
按“价格”排序后：
在（将排序重置为原始和）选择“舞蹈”和“流行”流派选择后：
基本规则
1.任务的要点是使用MVC模式来开发
使用Vue.js的应用程序。因此，HTML的引用和直接修改
JavaScript和jQuery中的元素（如$（“.class”）、append（）、document）不是
允许。
a.例如，使用jQuery或JavaScript代码访问HTML元素是
不允许（将导致重大扣减）。
2.我们已经给了您一些入门代码，您只需要在Vue中编写JS代码实例（在JS文件中）和HTML文件中的Vue指令。
a.我们已经为您创建了一个Vue实例。您可以添加其他实例，如果您更喜欢，但不应该在Vue实例之外编写额外的JS代码。
3.任务中与风格相关的每个元素都必须通过Bootstrap完成。你是不允许使用内联样式或定义/使用除我们在index.css中提供的那些。
a.即不要修改index.css
4.提供的index.html文件包括（链接到）jQuery、Bootstrap、Vue.js和Axios。
a.为了使index.html正常工作，请确保
i.具有互联网连接，
ii。不要修改index.html中＜head＞标记内的任何内容。
b.请注意，index.html有一些硬编码的数据。这只是给你看一个例如，但是硬编码的数据最终应该被替换。
5.遵循规范开头的提交说明。
6.解压提交的文件后，index.html文件应该可以直接在中打开
谷歌浏览器，只要有互联网连接。
7.本课业使用iTunes API，再次需要访问互联网。计划如果你将处于无法上网的情况，请提前。你有责任阅读文档并了解JSON对象的数据结构。
8.这项任务非常需要在线搜索和阅读的文档我们使用的Vue.js和iTunes API。课业可能包括不属于在课堂上涵盖。我们相信，在今天的编程实践中，搜索和从在线材料中挖掘信息是程序员工作的重要组成部分
专业知识
9.如有任何变动或其他信息，请经常访问Piazza。
要求我们在下面概述了每个游戏组件的要求。下面列出的所有内容，除非标注为“建议”，否则是必需的。请务必查看提供的视频密切了解预期行为。您可以更改中的任内容
“index.html”和“script.js”。
有关真正有用的提示和资源，请参阅提示和资源部分！
全体的
a.基本规则-如果不遵守，最高可扣50分
1.搜索栏（30分）
a.HTML文件中提供了一个输入文本框。
b.当用户键入关键字并按下“Enter”键时，输入的字符串应该用于进行请求json对象的AJAX调用。
i.提示：使用v-on:keyup检查密钥是否为“enter（keycode:13）”
c.输入的字符串将用于搜索姓名中包含
关键字。
d.不要使用jQuery$.ajax，而是使用Vue.js ajax调用–Axios–或
只需使用fetch（）。
e.发出AJAX请求所需的URL和数据结构的返回json对象在这里指定：
i.iTunes搜索API：https://goo.gl/UXwDce
ii。发送请求时，所有媒体类型和实体都应包括。
iii.当一个查询有50个以上的结果时，它最多只能返回50个结果
轨道。
f.使用JS-console.log（）在控制台中打印出返回的json对象，当请求API时。
i.这应该是控制台中唯一打印的内容。
ii。如果不满足上述要求，我们将扣分。
g.当iTunes没有返回艺术家时，使用JS alert（）提醒用户，没有找到具有该关键字的艺术家。
h.“找到的总数N”消息应显示返回的艺术家总数（N）
通过iTunes API。
2.艺术家网格（30分）
a.返回的艺术家应显示在两列中，其中每个结果网格包含一个图像和接下来显示的5种类型的相关信息相互连接（当浏览器为全尺寸时）。
b.一个例外是最后一行的艺术家网格可能少于两个取决于返回的艺术家数量。
c.请使用Bootstrap Grid系统来完成上述要求。查看此网页了解更多详细信息。确保您了解
之所以有效，是因为这是实现我们从课堂上学到的布局的好方法。
d.当使用Bootstrap正确实现时，布局自然会响应（例如，调整浏览器大小将自动调整图像大小，以及导航选项卡，并将它们移到下一行）。
e.iTunes通常会为每位艺术家提供一个图片URL。使用第一个URL
在一般列表中。
f.注意：当用户搜索艺术家如果不确定，请参考这些（以及项目介绍视频），您的网站页面看起来应该和屏幕截图中的页面差不多。
3.导航选项卡（5分）
a.返回的艺术家还应将他们的信息显示在它们显示在导航选项卡中。
b.请使用Bootstrap的导航选项卡（以及其他相关类）进行此操作和下一操作部分（即4和5）。注意，我们已经提供了一些示例导航选项卡启动程序文件中的代码。有关更多信息，请查看提示和资源
部分
c.“描述”选项卡应包含：艺术家名称、收藏名称、价格、类型、，和预览链接。它们可以在响应JSON数据中找到。
i.如果没有提供价格，请将价格设置为0。
ii。否则，如果返回的值之一是空字符串，则显示
“未提供任何信息”。
d.点击预览链接应打开歌曲的预览（或任何其他媒体），或者直接下载（两者都可以）。
4.轨道信息（5分）
a.单击“跟踪信息”时选项卡，系统应显示Track ID（是唯一标识符）&Country。
b.这意味着，每当您点击“轨迹信息”时选项卡，唯一标识符将针对每个不同的“轨迹信息”进行更改选项卡。以下是使用“Shrya Ghoshal”查询：i。
c.提示：让这一部分发挥作用的关键是弄清楚如何做到这一点
当您单击“Track Info”时，要更改的特定div选项卡。查看
提示和资源部分，如果您想要更具体的提示。
d.当点击返回“描述”选项卡时，五种类型的信息应仍然在那里。
5.流派选择（15分）
a.创建一个标签列表，其中可以从搜索结果中获得类型标签。（请参阅上面的屏幕截图/视频）
b.当用户切换流派时，只有被分类在所选流派中的艺术家流派应该出现在网格中。
i.结果的数量也应更新。
ii。您可以选择和取消选择流派
iii.所选择的流派应通过背景的变化来指示
颜色
c.一旦您选择了除ALL之外的其他流派，ALL按钮应指示
背景颜色的变化。
d.请使用Bootstrap的btn（和相关类）进行此部分。请注意不同的按钮颜色可以也应该使用Bootstrap来实现。对于更多信息，请查看提示和资源部分。
e.如果用户选择了多种流派，代 写EECS 493 艺人搜索则网格中显示的艺术家应为至少按所选流派之一分类（不一定是所有流派选定）。（选择的流派越多，结果应该越多显示）
f.如果选择了ALL，则取消选择其他流派并返回到原始列表按当前排序选择排序。（请参阅排序菜单）
g.当您搜索新的时，所选的流派应自动重置为ALL艺术家
6.排序菜单（15分）
a.一个“结果排序依据：”按钮，点击后会显示下拉菜单。
i.菜单中有三个选项：
● 重置为原始
● 集合名称
● 价格
b.对于“重置为原始”，将显示的结果重置为原始顺序。
i.这应该是默认选择。
c.对于“集合名称”，按集合名称的字母顺序对结果进行排序。
d.对于“价格”，通过增加价格对结果进行排序。
e.所选的选项应该用不同的背景色表示。
f.请使用Bootstrap的下拉列表（以及相关类）进行此部分。请注意选项的不同背景色可以也应该使用独自创立有关更多信息，请查看提示和资源部分。
g.当选择多个流派时，结果列表仍应更新为排序选择（集合名称和价格）。
i.换句话说，当您选择一种流派时，排序选项不应重置。
h.搜索新艺术家时，排序应自动重置。以下要点提供了排序菜单外观的另一个示例喜欢它以及它是如何工作的。
i.在下拉菜单中，最初应设置为“重置为原始”通过蓝色背景选择指示如下
j.当选择不同的选项时，应将其更改为该选项，对于例如，选择“集合名称”，由蓝色背景指示
k.艺术家搜索并按“收藏名称”排序后，选择不同的流派仍应按“收藏名称”更新列表。换句话说，如果用户按集合名称排序，则应该更新列表按集合名称排序；之后，如果用户选择了一个流派，例如动漫，它也应该更新按集合名称排序的动画列表。
l.这在选择三个排序选项中的任何一个时都应该有效。
7.奖金（最高10分）
a.这是完全可选的。
b.如果您添加了任何功能，请在提交的文件中包含README.txt文件并解释您实现了什么；否则我们将不会对此任务进行评分（这是只允许您将文件添加到目录结构中的时间）。
c.请勿更改规范中的任何现有要求！
d.在每个“说明”选项卡中添加一个“播放”按钮（如下所示）。之后按下播放按钮，它应该开始播放歌曲，然后按下按钮，“播放”应改为“停止”。当点击“停止”按钮时，它应该停止播放歌曲并返回到“播放”。i。ii。
e.在“结果列表排序依据：”后添加一个按钮。点击按钮后，弹出应显示，显示fetch分组返回的所有歌曲（曲目）名称
按集合名称。
关于CORS标头的说明在做这个项目时，你可能会遇到搜索结果被“CORS”拒绝的情况消息这个错误主要发生在服务器端，因此没有简单的解决方案。的成功如果您在上托管页面，请求将根据您使用的浏览器而更改服务器，以及存储您请求的艺术家的iTunes服务器的配置。一个通常有效的解决方案是在搜索查询的末尾添加“&origin=*”。这如果您直接从文件中运行代码，通常会解决错误。如果您仍然遇到这些问题，还有其他方法可能会有所帮助：-用一个不是示例视频中显示的艺术家进行测试。我们怀疑iTunes更改了处理来UMich无线网络的请求的方式
例如艺术家，因为在来自完全相同位置的完全相同格式。建议另一位艺术家进行搜索
这会弄巧成拙，但无论如何，您都应该与各种艺术家一起测试您的实现。
-iTunes API调用中的订购问题，因此您可以在您的向查询添加了关键字-不要将文件作为本地服务器打开（localhost:XXXX/）。我的IDE自动
在服务器中打开HTML文件，而不是在浏览器中打开原始文件（＜filepath＞），以及将其作为原始文件打开会阻止它
同样，这些错误中的许多都与配置有关。如果您仍然有问题，请上班时间来找我们，或者在广场上发帖。
提示和资源以下教程包含一个编程语法列表，可用于
任务及其相应文档的链接。
其他提示/提示当尝试切换“描述”和“跟踪信息”时选项卡，看看本教程并播放带着代码四处走动。请注意如何简单地使用Bootstrap和HTML来实现这一点。具体来说，直接引用它：“将数据toggle=“tab”添加到每个选项卡，并添加.tab窗格类，每个选项卡都有一个唯一的ID，并将它们包装在.tab内容类中。'如果您遇到问题（例如，单击1个描述选项卡会更改所有描述选项卡，或者不管单击了哪个“描述”选项卡，只有1个“描述”标签更改），请确保粗体显示的内容正确执行。将每个“描述”和“跟踪信息”放在我们课业的上下文中选项卡必须有自己的唯一ID（即