Workle 前端测试任务实战：基于 Vue.js 与 Unsplash API 构建图片流页面

教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载本篇技术指南以开源仓库 ru-test-assignments 中的 Workle 测试任务 为骨架完整拆解这一道真实的前端选拔题如何用 Vue.js 还原设计稿、接入 Unsplash API 取数、实现点击作者打开个人资料、点击照片无操作的交互规则以及如何用加载指示器、错误提示等可开关的 UX 增强提升界面可用性。读完本文你将获得一份可直接照着动手实现的分步骤技术方案包括工程目录规划、组件职责划分、API 集成要点与响应式断点适配。任务总览与验收标准这道来自 Workle 的前端测试任务由两部分组成还原页面依据 Figma 设计稿完成页面的像素级还原响应式适配实现功能通过 Unsplash 网站 API 获取图片数据点击作者时在独立浏览器标签页中打开该作者的 Unsplash 个人主页点击照片本身时不触发任何行为。同时任务明确提出必须使用Vue.js框架实现属于典型的技术栈锁定型选拔题——考察的不是会不会写页面而是能否在指定框架下把数据获取、事件绑定、组件拆分与响应式布局组合成一个完整可用的产品。从验收维度看三个功能点对应三条可自动化验证的规则交互目标预期行为实现要点照片卡片点击无任何反应照片区域不绑定跳转/弹窗事件仅作为展示作者区域新标签页打开作者 Unsplash 主页使用a标签并设置target_blank含rel安全属性页面数据来自 Unsplash API组件挂载后请求数据、按需分页加载技术选型与工程结构原任务规定项目结构如下这是任务的目标形态也是评分时检查工程素养的重要依据public ├─── favicon.ico └─── index.html src ├─── App.vue ├─── main.js ├─── assets │ ├─── fonts │ │ ├─── fonts.css │ │ ├─── RobotoCondensed-Bold.svg │ │ ├─── RobotoCondensed-Bold.ttf │ │ ├─── RobotoCondensed-Bold.woff │ │ ├─── RobotoCondensed-Regular.svg │ │ ├─── RobotoCondensed-Regular.ttf │ │ └─── RobotoCondensed-Regular.woff │ └─── img │ ├─── eye.svg │ └─── loading.png └─── components ├─── Error │ └─── Error.vue ├─── Loading │ └─── Loading.vue ├─── Pagenation │ └─── Pagenation.vue └─── Post ├─── Autor.vue ├─── Post.vue └─── Views.vue这一结构传递出几个关键设计信号public/与src/分离index.html作为挂载入口留在public/业务代码全部收拢到src/符合 Vue CLI 生成项目的标准约定按功能拆分组件的目录约定components/下按错误提示Error加载状态Loading分页Pagenation图片帖Post四个维度分组每一组内部用同名.vue文件组织字体资产本地化assets/fonts/中同时存放 Roboto Condensed 字体的svg / ttf / woff三种格式与fonts.css说明设计稿采用 Roboto Condensed 字体体系且为兼容不同浏览器而做了多格式字体栈声明图片资源语义清晰eye.svg与loading.png分别对应浏览量图标与加载占位图——与下方Views.vue浏览量显示和加载轮Loading组件一一对应。原任务列出的配套构建工具为Babel、Webpack 与 Vue CLI即通过vue create生成项目后使用 Babel 做 ES 语法转译、Webpack 完成模块打包与开发服务器热更新。数据层接入 Unsplash API任务的第一个功能点是从 API 获取数据对应的端点基础地址为https://api.unsplash.com。一个典型的取数流程包含以下环节1. 申请并携带访问凭证Unsplash API 要求请求头携带认证信息。最常用的方式是Authorization: Client-ID YOUR_ACCESS_KEY请求头或使用 OAuth 方式获取用户级 token。测试任务阶段通常采用 Client-ID 方式即可。2. 选择数据端点并组织请求常见的图片流数据端点形如GET https://api.unsplash.com/photos?page1per_page10page页码配合结构中的Pagenation.vue组件实现分页浏览per_page每页返回的图片数量。3. 在 Vue 组件中发起请求在src/components/Post/Post.vue从命名推断为帖子卡片组件中数据获取通常放在created或mounted生命周期钩子中例如async created() { try { const res await fetch(${API_BASE}/photos?page${this.page}per_page${this.perPage}, { headers: { Authorization: Client-ID ${API_KEY} } }); this.posts await res.json(); } catch (e) { this.$emit(error, e); } }4. 数据驱动的渲染每个返回的 photo 对象通常包含图片 URLurls、作者信息user.name、user.links.html与浏览量views等字段正好对应Post.vue卡片、Autor.vue作者区、Views.vue浏览量三个子组件的分工。交互层作者跳转与照片无操作任务的第二条与第三条功能点本质上是在考验开发者对链接语义与事件边界的理解作者点击 → 新标签页打开作者区域应渲染为真实链接指向 API 返回的user.links.html并携带target_blank在新标签页打开。为了安全和性能实践上通常还会附加relnoopener noreferrer避免新页面通过window.opener反向操作源页面照片点击 → 无任何操作照片区域是纯展示元素不绑定任何click监听、不包裹a标签。这里尤其要注意的是不要让卡片级的点击事件冒泡到作者链接以免误触发跳转——即交互边界需要隔离作者链接的点击区域应独立于照片区域。从结构上看Post.vue整体卡片与Autor.vue作者区分层嵌套天然适合用事件只绑在作者区的方式来满足这一规则。组件化设计解析目录结构中的四个组件组恰好对应一个图片流页面的完整状态机组件职责由命名与结构推断出现时机Post/Post.vue单张图片卡片聚合作者、图片、浏览量等子信息数据加载成功后列表渲染Post/Autor.vue作者信息区承载新标签页打开作者主页的链接每张卡片内Post/Views.vue浏览量展示对应eye.svg图标每张卡片内Pagenation/Pagenation.vue页码切换控件驱动page参数重新取数列表底部Loading/Loading.vue加载中转圈对应loading.png占位图请求进行中Error/Error.vue错误提示与重试入口请求失败时App.vue作为根组件承担状态编排持有加载中 / 成功 / 失败三种状态按状态切换渲染 Loading、Post 列表或 Error 组件并把分页事件向下分发、把错误事件向上收集。可选的 UX 增强两个可开关的附加功能原任务在补充说明中列出了两个超出基本要求、但显著提升体验的附加功能并且都提供了开关加载指示轮请求进行时展示转圈动画明确告诉用户系统没有卡死正在执行内部操作错误提示消息请求失败时向用户展示错误说明并提供重试入口。开关配置方式在App.vue中通过两个布尔配置项控制// App.vue data() { return { showLoadingWheel: true, // 设为 false 可关闭加载指示轮 showUserErrorMessage: true // 设为 false 可关闭面向用户的错误提示 } }将showLoadingWheel设为false加载期间不展示转圈界面直接静默等待数据将showUserErrorMessage设为false不向用户渲染错误 UI。错误降级策略任务特别给出了一个值得借鉴的降级细节如果关闭了面向用户的错误显示则错误会输出到控制台console。即错误信息始终被捕获并记录只是展示给用户这一层可选。这保证了无论开关如何配置开发与排查都不会失去错误线索——是一个低成本、高工程素养的错误处理范例同样也是面试官容易追问的点。响应式适配与断点任务完成截图按1000、768、480、320四档展示说明设计稿与实现均要求多断点响应式1000px 以上桌面布局多列网格展示图片卡片768px平板宽度网格列数相应缩减480px大屏手机进入单列/双列临界320px小屏手机保证最小宽度下不出现横向滚动。实现上可利用 CSS Grid 或 Flexbox 配合媒体查询例如.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); } media (max-width: 1000px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } } media (max-width: 768px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } } media (max-width: 480px) { .photo-grid { grid-template-columns: 1fr; } }配合本地化的 Roboto Condensed 字体assets/fonts/fonts.css中声明 svg/ttf/woff 多种格式即可在不同视口下保持一致的视觉体系。构建、运行与验收自检基于任务列出的Vue CLI Babel Webpack工具链标准开发与构建流程为# 安装依赖 npm install # 启动开发服务器热更新 npm run serve # 生产构建经 Babel 转译 Webpack 打包 npm run build提交前可对照以下清单自检页面是否与 Figma 设计稿在各断点1000 / 768 / 480 / 320下保持还原度数据是否真实来自 Unsplash API 且分页可切换点击作者是否在新标签页打开其 Unsplash 主页点击照片是否确实无任何反应断网或返回错误时Loading / Error 组件是否按showLoadingWheel、showUserErrorMessage的配置正确渲染npm run build是否零报错通过。小结Workle 这道 Vue.js 测试任务覆盖面完整设计稿还原、第三方 API 接入、交互规则约束、组件化工程结构、可配置的加载与错误态、多断点响应式——几乎涵盖了前端日常开发的核心能力点。值得强调的是本仓库 README 明确说明该集合只收录任务描述、不放解决方案因此所有实现路径都需要亲手走一遍而本文给出的组件职责、API 调用要点、交互隔离与开关式 UX 增强正可以作为你动手实现时的技术路线图。赞分享教程【免费下载链接】ru-test-assignmentsТестовые задания для самостоятельного выполнения от разных it компаний项目地址https://gitcode.com/gh_mirrors/ru/ru-test-assignments点击查看免费下载相关推荐Aviasales 前端测试任务实战基于 React 与 Long Polling 构建机票搜索页Aviasales 前端测试任务实战基于 React 与 Long Polling 构建机票搜索页 本文围绕开源仓库 ru test assignments教程基于 Ecwid REST API 构建 Vue.js TypeScript 三页电商应用Ecwid 前端测试任务完整拆解与实现指南基于 Ecwid REST API 构建 Vue.js TypeScript 三页电商应用Ecwid 前端测试任务完整拆解与实现指南 本指南以开源仓库 r教程在 AI 应用中构建 Stack Trace 错误展示组件ai-elements StackTrace 组件实战指南在 AI 应用中构建 Stack Trace 错误展示组件ai elements StackTrace 组件实战指南 本篇文章聚焦 Comp AI CRM 仓教程上一篇DynamicGridView核心原理剖析Android拖拽交互实现技术揭秘下一篇《Elixir语言的实战应用案例解析》创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考