In a full-stack web application, a Vue.js frontend communicates with an Express.js API layer. Beyond merely serving as a conduit for fetching and storing data from a database, what is the primary and most crucial strategic role of this Express.js API layer within the overall architecture?
a. To handle the initial rendering of all static HTML, CSS, and JavaScript files, thereby optimising the application's first contentful paint.
b. To automatically generate dynamic database schemas and manage complex data migrations without requiring manual intervention from developers.
c. To manage complex real-time data synchronisation between the frontend and a NoSQL database like Firebase Firestore, eliminating the need for client-side reactivity.
d. To act as a central control point that enforces critical business logic, performs robust server-side input validation, handles authentication and authorisation, and orchestrates secure interactions with backend data stores.
中文翻译
在一个全栈 Web 应用中，Vue.js 前端与 Express.js API 层通信。除了充当从数据库获取/存储数据的通道之外，这个 Express.js API 层在整体架构中最主要、最关键的战略作用是什么？
a. 处理所有静态 HTML/CSS/JS 的首屏渲染，从而优化 FCP。
b. 自动生成动态数据库模式并管理复杂迁移，无需人工干预。
c. 负责前端与诸如 Firestore 的 NoSQL 数据库之间的复杂实时同步，从而不需要客户端响应式。
d. 作为集中控制点：执行业务逻辑、进行服务器端输入校验、处理鉴权/授权，并编排与后端数据存储的安全交互。
答案与解析：d。
API 层的核心价值是集中业务逻辑与安全边界：验证、鉴权、速率限制、审计、编排、反爬/防注入等，而不是负责静态资源或自动迁移。
Q2
A development team is building a new real-time collaborative document editor where users can make simultaneous, granular edits that need to be reflected immediately across all active sessions. The data structure is largely unstructured and frequently changing as users type. Considering these requirements, which Firebase database would be most suitable for this core functionality, and why?
a. Firestore, as its per-document pricing model makes it inherently more cost-effective for rapidly changing data in a collaborative environment.
b. Firebase Realtime Database, as it provides advanced querying capabilities that are essential for efficiently handling simultaneous user edits.
c. Firestore, because its document-based model is highly flexible for unstructured data and it's optimised for scalable querying with complex data relationships.
d. Firebase Realtime Database, because its ultra-low latency updates and JSON tree structure are ideal for real-time collaboration.
In a Vue.js application, a ProductDetail.vue component contains a ProductReviewSection.vue component. The ProductDetail component retrieves comprehensive product information, including a list of associated customer reviews, from an API. The ProductReviewSection needs to display these specific reviews relevant to the product. According to Vue.js component communication principles, what is the most direct and idiomatic method for the ProductDetail component to securely provide the list of customer reviews to the ProductReviewSection?
a. The ProductDetail component should emit a custom event containing the review data, which the ProductReviewSection then listens for.
b. The ProductDetail component should bind the review data to custom attributes (props) declared on the ProductReviewSection element.
c. The ProductReviewSection should directly access the product reviews from a global state management solution like Pinia, assuming they are globally available.
d. Both components should access the data through a shared $root instance to ensure data consistency.
中文翻译
ProductDetail 里包含 ProductReviewSection。父组件已从 API 拿到评论列表，子组件需要展示与该产品相关的评论。根据 Vue 组件通信原则，最直接、最地道的做法是什么？
A Vue.js developer is displaying user-generated content, which might include potentially malicious HTML, directly in a template. To prevent Cross-Site Scripting (XSS) vulnerabilities, Vue.js offers built-in protections. Which of the following approaches is the most secure and recommended practice when rendering dynamic text that might contain untrusted HTML?
a. Relying on server-side sanitisation alone
b. Using the standard Mustache syntax {{ userInput }} in the template
c. Using the v-html directive with a trusted third-party HTML sanitisation library to filter out malicious tags before rendering.
d. Implementing a custom JavaScript function to manually parse and remove any suspicious HTML tags from the userInput string.
中文翻译
在模板中展示用户生成内容，可能含恶意 HTML。为防 XSS，最推荐的方式是？
a. 只依赖服务端清洗
b. 使用 Mustache {{ }}
c. 结合可信的第三方 HTML 清洗库 后再用 v-html 渲染
d. 自己手写清洗函数
答案与解析：b。
Q5
Which of the following best describes the primary strategic advantage of implementing a dedicated API layer (e.g., using Express.js with Node.js) in a full-stack application, rather than allowing the frontend to directly interact with the database?
a. It simplifies frontend development by eliminating the need for fetch() API calls.
b. It enhances security by preventing direct database access, centralizing business logic, and enabling scalable request handling.
c. It ensures faster data retrieval for the frontend due to direct network connections and optimises the project efficiency.
d. It significantly reduces the overall complexity of the application by abstracting the backend.
中文翻译
为什么要用独立 API 层而不是前端直连数据库？
a. 省掉 fetch()
b. 提高安全与可扩展性：阻止直连、集中业务逻辑、可伸缩的请求处理
c. 更快
d. 大幅降低复杂度
答案与解析：b。
与 Q1 逻辑一致：安全边界 + 业务集中 + 扩展能力 是关键。
Q6
A development team is building a new e-commerce platform. During an accessibility audit, it's noted that many interactive elements, such as custom buttons and navigation menus, are implemented using generic <div> elements with JavaScript click handlers, rather than semantic HTML elements. What accessibility issues does this approach create?
a. div elements cause unpredictable rendering differences across various browsers.
b. div elements automatically inherit display: none; on certain assistive devices, making them invisible by default.
c. Overuse of div elements significantly increases the overall file size of the webpage, negatively impacting load times on slower network connections.
d. Screen readers and other assistive technologies fail to interpret div elements semantically, rendering interactive components unusable for individuals with disabilities.
中文翻译
无障碍审计发现：交互元素用 <div>+JS 点击，而不是语义化元素。会造成什么问题？
a. 渲染不可预测
b. 某些设备会默认 display:none
c. 文件变大
d. 读屏器无法获得语义，可访问性受损
答案与解析：d。
应使用 <button>、<nav>、<a> 等语义化元素并配合 ARIA/键盘交互。
Q7
In a complex Single-Page Application (SPA) built with Vue.js, the development team extensively uses Vue Router for navigation. Beyond simply changing the displayed component without a full page reload, what is the most significant strategic advantage of using a client-side routing library like Vue Router for both user experience and technical performance?
a. It automatically generates and manages API endpoints for all frontend components, eliminating the need for a separate backend API layer.
b. It provides a seamless, app-like user experience with instant page transitions, allows for better performance through features like lazy loading of components, and supports unique URLs for each view, which is crucial for SEO.
c. It enables dynamic database schema migrations directly from the frontend, simplifying DevOps processes.
d. It offloads all data fetching responsibilities from the backend server to the client's browser, reducing server load.
中文翻译
在复杂 Vue SPA 中使用 Vue Router 的最大优势是什么？
a. 自动生成后端 API
b. 无刷新切页、懒加载提升性能、每个视图有唯一 URL（利于可分享/可索引）
c. 做数据库迁移
d. 把数据获取都丢到浏览器
答案与解析：b。
Router 带来体验（流畅过渡）与性能（代码分割/懒加载）并保留URL 语义。
Q8
A development team is building a new social media application that needs to handle rapidly changing user feeds, real-time chat messages, and highly flexible user profiles, where the data structure might evolve frequently. Based on the characteristics discussed, which database type would generally be the most suitable choice for this application's core data storage, and why?
a. MySQL (SQL), due to its maturity and robust support for complex transactional data.
b. PostgreSQL (SQL), because its relational structure ensures strong data consistency for user interactions.
c. MongoDB (NoSQL), because its JSON-like structure is more structured human-readable than other database types.
d. Firebase Firestore (NoSQL), because it offers a flexible, document-based schema and is optimised for real-time updates and high scalability.
A student is developing a large-scale Vue.js single-page application (SPA). They require a development environment that allows for immediate code changes to be reflected in the browser without a full page reload (hot module replacement) and efficiently prepares the application for production deployment (bundling). Which core technology is specifically designed to provide these functionalities in a Vue.js project?
a. Vite, serving as the modern build tool and development server.
b. NPM, which manages project dependencies and scripts for development.
c. Firebase, as a Backend-as-a-Service platform.
d. Node.js, by enabling JavaScript execution outside the browser.
中文翻译
需要热更新(HMR) 和 打包 的开发环境。哪项技术就是为此设计的？
a. Vite：现代构建工具与开发服务器
b. NPM
c. Firebase
d. Node.js
答案与解析：a。
Vite 提供超快冷启动、HMR、构建（底层 Rollup/ESBuild）。
Q10
A high-traffic e-commerce platform built with Vue.js needs to dynamically update thousands of product prices and availability statuses in real-time. Direct manipulation of the traditional Document Object Model (DOM) is observed to cause significant performance bottlenecks, resulting in a janky user experience during updates. How does Vue.js's underlying rendering mechanism fundamentally address this performance challenge without requiring developers to manually manage DOM updates?
a. Vue.js directly optimizes native browser rendering calls, making DOM manipulation inherently faster than manual JavaScript.
b. Vue.js pre-renders all possible UI states as static HTML fragments, which are then swapped out as data changes.
c. Vue.js compiles component templates into a lightweight Virtual DOM tree, efficiently calculates the minimal changes required, and then patches only those specific changes to the real DOM.
d. Vue.js offloads all DOM updates to a dedicated web worker, ensuring the main thread remains free for user interactions.
中文翻译
高并发电商需实时更新大量价格/库存，直接操作 DOM 卡顿。Vue 如何从机制上解决？
a. 直接优化浏览器渲染调用
b. 预渲所有状态的静态片段
c. 编译为轻量 Virtual DOM，计算最小变更并精准打补丁到真实 DOM
d. 把 DOM 更新放到 Web Worker
答案与解析：c。
核心是 Virtual DOM + Diff + Patch，最小化真实 DOM 变更。
Q11
An application requires maintaining a user's authentication status (e.g., isLoggedIn, userEmail) consistently across multiple components and views throughout the application. Given Vue.js's ecosystem, what is the most appropriate and scalable method for managing this global authentication state?
a. Storing the authentication status in each individual component's local ref() or reactive() data, and updating them via custom events.
b. Using localStorage to store the authentication status directly, as it persists across page refreshes and is accessible by all components.
c. Utilising a dedicated state management library like Vuex (or Pinia), which provides a centralised store for the authentication state, making it globally accessible, reactive, and easier to manage across the entire application.
d. Passing the authentication status as props down from the root App.vue component to every child component that needs it.
A development team is building a new feature for their Vue.js application where users can upload profile pictures. After a user uploads an image, the system needs to automatically create a smaller, optimized thumbnail version of that image. Which Firebase Cloud Function trigger is the most appropriate and efficient for initiating this thumbnail generation process immediately after the image is successfully uploaded to Firebase Storage?
In a collaborative content platform built with Vue.js and Firebase, users can submit articles. Before an article is saved to the Firestore database, it needs to undergo an automatic processing step to standardize its formatting (e.g., converting all headings to a specific case) and potentially remove any inappropriate content. Which Cloud Function trigger type is ideally suited for performing this kind of automated data sanitization and transformation immediately before or after an article document is written or updated in Firestore?
a. HTTP Trigger, invoked manually by the frontend after submission.
b. Firestore onWrite or onUpdate Trigger, acting directly on document changes.
c. Storage onArchive Trigger, for files stored in Firebase Storage.
d. Authentication onFinalize Trigger, once a user session ends.
中文翻译
在 Firestore 中写入/更新文章前后，需要自动清洗与规范化。应选哪种触发器？
a. 前端手动 HTTP 调用
b. Firestore onWrite/onUpdate 文档触发
c. Storage onArchive
d. Auth onFinalize
答案与解析：b。
针对文档变更的清洗/变换，直接用 Firestore 触发器最合适。
Q14
Node.js and Express.js are both central to the API layer in a full-stack JavaScript application. Which statement accurately describes their relationship and primary function as discussed in Week 6?
a. Node.js is the JavaScript runtime environment that allows server-side execution, and Express.js is a minimalist web framework built on Node.js to simplify API development and routing.
b. Node.js is a web framework that handles routing, while Express.js is a JavaScript runtime environment.
c. Both Node.js and Express.js are identical in functionality, serving as interchangeable tools for backend development.
d. Express.js is a full-stack framework that includes its own database, while Node.js is its templating engine.
中文翻译
关于 Node.js 与 Express.js 的关系与主要作用，下列说法正确的是？
a. Node.js 是运行时；Express 是基于 Node 的极简 Web 框架
b. Node 是框架，Express 是运行时
c. 两者功能相同可互换
d. Express 自带数据库，Node 是它的模板引擎
答案与解析：a。
Node 提供运行时，Express 提供路由/中间件等 Web 能力。
Q15
A team is developing an internal RESTful API for managing university courses. They need an endpoint to retrieve details for a specific course by its ID and another endpoint to submit new course offerings. The API should adhere to RESTful principles, provide clear communication, and be secure against common misuse. Which set of API design principles and implementations would best fulfill these requirements, ensuring semantic clarity, proper HTTP method usage, and robust error handling?
a. Use POST /courseLookup to retrieve; PUT /courses/new to add; always return 200 OK.
b. GET /api/v1/course_id/{id} to retrieve; PUT /api/v1/courses/add (form-encoded) to add; return 500 on client validation failures.
c. GET /courses/{courseId} to retrieve; POST /courses with body to create; if unsupported HTTP method is used, return a 404 Not Found to conceal implementation details.
d. Use GET with query strings for both retrieval and creation; verbose error messages for debugging.
中文翻译
课程管理 REST API：按 REST 语义与正确动词设计。哪组更符合？
a. 查用 POST、增用 PUT、成功都 200
b. 查用 GET、增用 PUT、客户端错也返回 500
c. 查：GET /courses/{id}；增：POST /courses（请求体）；不支持的方法返回 404
d. 两个都用 GET + 查询串，错误信息尽量详细
答案与解析：c。
资源检索 GET，创建 POST，语义清晰；（严格说不支持的方法应是 405，但四项里 c 最接近规范）。
Q16
A development team observes that their large Vue.js application has a noticeable initial load time due to its extensive feature set. They decide to implement lazy loading for their routes using Vue Router. What is the primary performance benefit of this approach?
a. Shift rendering to server.
b. Reduce data transfer by compressing all JS/CSS before delivery.
c. Split the JS bundle into smaller chunks and load components only when their route is visited, reducing initial bundle size and improving FCP.
d. Allow the browser to pre-cache all assets.
中文翻译
为路由实施懒加载的主要性能收益是？
a. 把渲染转到服务器
b. 全量压缩 JS/CSS
c. 代码分割，按需加载，降低首包/FCP
d. 让浏览器预缓存所有资源
答案与解析：c。
Router 懒加载 = 按路由拆分 + 动态 import。
Q17
A team is developing a web form that includes a text input field for "Repository Search." To ensure this input is accessible to users relying on screen readers, the developer adds <input type="text" aria-label="Find a repository" />. Considering best practices for accessibility, what crucial addition should be made to the containing element of this search input for optimal screen reader interpretation, following the recommended pattern?
a. Associate a visually hidden <label> with aria-labelledby.
b. Ensure the <div> has a data-widget-type="search".
c. Apply role="search" and aria-label="Repository Search" to the container (e.g., <div> or <form>).
d. Add tabindex="0" to the <div>.
中文翻译
已给输入框加了 aria-label。为了最佳可访问性，容器还应做什么？
a. 再关联隐藏 <label>
b. 给 <div> 加自定义属性
c. 给容器加 role="search" 并标注 aria-label
d. 给容器加 tabindex=0
答案与解析：c。
为搜索区域提供landmark（role="search"）便于读屏定位。
Q18
When integrating Firebase Authentication into a Vue.js application, it is strongly recommended to store sensitive Firebase configuration details (like API keys) in environment variables (e.g., within a .env file) and ensure this file is excluded from version control (e.g., via .gitignore). What is the primary security rationale for this best practice?
a. Allow different Firebase projects on the same machine.
b. Prevent exposure of sensitive credentials in public repos, mitigating unauthorised access or API abuse.
c. Improve speed of dev server and reduce push/pull time.
d. Reduce deployed bundle size and keep local machine lightweight.
中文翻译
将密钥放 .env 并 gitignore 的首要安全原因是？
a. 方便切换项目
b. 避免密钥泄露与滥用
c. 加快本地开发
d. 降低打包体积
答案与解析：b。
核心是防泄露。
Q19
A Vue.js application relies on external API keys for a critical third-party service. The team deploys via a hosting platform with CI/CD from GitHub. They must ensure API keys are handled securely during build and deployment, preventing exposure in the public repository. What is the most appropriate method to secure these API keys in this deployment scenario?
a. Include API keys as query parameters in all requests.
b. Store keys in a public config file, relying on .gitignore.
c. Utilise environment variables on the hosting platform, injected securely during the build process.
d. Hardcode API keys in source before committing.
中文翻译
CI/CD 部署时如何最合适地保护第三方 API Key？
a. 放在查询参数里
b. 放公开配置里并指望 .gitignore
c. 用托管平台的环境变量，构建时注入
d. 直接硬编码
答案与解析：c。
平台级 Secrets/Env Vars 是最佳实践。
Q20
A Vue.js developer is building a complex dashboard application with multiple inter-dependent components displaying various statistics. Some statistics are direct data points, while others require computations (e.g., averages, filtered lists) based on reactive data. The developer also needs to ensure the UI updates efficiently without excessive DOM manipulation, and that components communicate data cleanly. To achieve optimal performance, maintainability, and proper data flow in this scenario, which set of Vue.js features should the developer prioritize for data handling and component interaction, considering the emphasis on efficient UI updates and complex derivations?
a. JS-based validation for all inputs, frequent v-if, and sibling communication via custom events.
b. Store data in ref() for reactivity, use computed for derived data, pass via props for parent-child communication, and leverage Vue’s Virtual DOM for efficient rendering.
c. Use the Options API for all components, lambdas in templates for all calculations, rely on v-html for dynamic content.
d. Use v-model for all data, Options API for logic, and direct DOM manipulation for performance.
中文翻译
复杂仪表盘：多组件、部分统计需派生计算。要高效更新与干净通信，应优先哪些 Vue 特性？
a. 广泛自定义事件与频繁 v-if
b. ref 存源数据，computed 做派生，父→子用 props，依赖虚拟 DOM 的高效渲染
c. 统一 Options API + 模板里写函数 + v-html
d. 全用 v-model + 直接操作 DOM
答案与解析：b。
这是 Vue 的惯用组合：响应式源数据 + 计算属性 + 明确的数据流。
Q21
A university administration portal built with Vue.js needs to manage user access to different sections. Specifically, only authenticated staff members should be able to view the '/student-records' route, while all users (authenticated or not) can access the '/public-announcements' route. If an unauthenticated user attempts to access a protected route, they should be redirected to a '/login' page. Which implementation strategy for Vue Router navigation guards, combined with state management, would most effectively and securely enforce these access control requirements across the application?
a. Rely on server-side route protection to manage access control, as client-side routing cannot inherently provide sufficient security against unauthorized access.
b. Configure a global beforeEach navigation guard that checks the authentication state stored in Vuex (or Pinia) and redirects unauthenticated users to '/login' if they try to access any route other than '/login'.
c. Use localStorage.getItem('userRole') within each protected component's created() hook to check user roles and manually router.push('/login') if unauthorized.
d. Implement an in-component guard in StudentRecords.vue to check authentication status and redirect to '/login' if needed, and a per-route guard for '/public-announcements' to ensure it's always accessible.
A team of postgraduate students is building a Vue.js application that heavily relies on Firebase Authentication for user management and Firestore for data storage. During development and testing, they frequently hit Firebase quota limits, causing interruptions and unexpected costs. Which Firebase tool or practice best addresses hitting quotas and incurring costs during development?
a. Utilising the Firebase Local Emulator Suite to simulate Auth and Firestore entirely on local machines.
b. Implementing robust client-side caching to reduce reads from the frontend.
c. Upgrading their Firebase project to the Blaze pricing plan for higher quotas.
d. Refactoring the application to SSR for all data fetching and authentication.
中文翻译
开发测试阶段常触发配额并产生费用，如何最有效解决？
a. 使用 Firebase 本地模拟器套件（Auth/Firestore 本地跑）
b. 做前端缓存
c. 升级 Blaze 套餐
d. 改成 SSR
答案与简析：a。
本地 Emulator 直接消除线上读写与费用，是官方推荐的开发实践。
Q23
A team is adding a new UserProfile.vue. They must ensure styles inside this component don't leak to others. Which feature in the <style> block prevents style leakage?
a. Using the global attribute.
b. Applying the scoped attribute.
c. Defining styles within a <script> block.
d. Importing a CSS reset file.
中文翻译
如何保证组件内样式只作用于本组件？
a. global 属性
b. scoped 属性
c. 在 <script> 里写样式
d. 引入 reset
答案与简析：b。
<style scoped> 会为选择器自动添加哈希数据属性，实现样式作用域。
Q24
When integrating Firebase Authentication into a Vue.js application, it's strongly recommended to store sensitive Firebase configuration (API keys, etc.) in environment variables and exclude the file from version control. What is the primary security rationale?
a. Reduce bundle size.
b. Allow different Firebase projects on the same machine.
c. Speed up the dev server.
d. Prevent exposure of sensitive credentials in public repos, mitigating unauthorized access or API abuse.
中文翻译
把密钥放 .env 并 gitignore 的首要原因是？
a. 减包体积
b. 方便切项目
c. 加快开发服
d. 防止密钥泄露与滥用
答案与简析：d。
Q25
Which best describes the primary strategic advantage of implementing a dedicated API layer (e.g., Express.js with Node.js) rather than allowing the frontend to directly interact with the database?
a. Faster data retrieval via direct network connections.
b. Enhances security by preventing direct DB access, centralising business logic, and enabling scalable request handling.
c. Eliminates the need for fetch() calls.
d. Greatly reduces overall complexity by abstracting the backend.
中文翻译
为何要用独立 API 层而不是前端直连数据库？
a. 更快
b. 安全边界 + 业务集中 + 易扩展
c. 不用 fetch()
d. 极大简化复杂度
答案与简析：b。
Q26
A team is designing validation for an e-commerce site’s forms. For comprehensive integrity, UX, and security, which approach is most effective for a full-stack app?
a. HTML5 validation with occasional manual server checks.
b. Primarily rely on client-side JS validation.
c. Multi-layered validation: client-side (HTML5/JS) for instant feedback + robust server-side validation for business logic/security + essential database constraints.
d. Server-side only, accepting slower feedback.
中文翻译
电商表单的最佳验证策略？
a. 只用 HTML5 为主
b. 主要靠前端 JS
c. 前端即时反馈 + 服务端严格校验 + 数据库约束
d. 仅服务端
答案与简析：c。
分层校验兼顾体验与安全。
Q27
You're developing a Firebase Cloud Function endpoint intended to receive data via POST from Vue. Testing locally with Postman, you send a GET and receive 405 Method Not Allowed. Most probable reason?
a. Emulator not fully started.
b. Network between Postman and emulator is unstable.
c. The Cloud Function is explicitly configured to accept only POST, not GET, for that endpoint.
d. The request body is malformed.
中文翻译
本地用 Postman 发 GET，返回 405。最可能原因？
a. 模拟器未启动
b. 网络不稳
c. 该函数只允许 POST
d. Body 无效
答案与简析：c。
405 明确表示方法不被允许。
Q28
When developing an API with Node.js + Express.js that talks to PostgreSQL, how to most securely prevent SQL injection?
a. Escape quotes and special characters manually.
b. Use parameterized queries (prepared statements) so inputs are sent as parameters, not concatenated SQL.
c. Whitelist only certain characters on the server.
d. Rely on advanced client-side sanitization before sending to the API.
中文翻译
Node/Express + Postgres 防 SQL 注入的首选做法？
a. 手动转义
b. 参数化查询 / 预编译语句
c. 白名单字符
d. 靠前端清洗
答案与简析：b。
Q29
When a user enters a web address, after DNS resolves the server’s address, what is the next crucial step in the client-server interaction to display the page?
a. The server directly compiles the page and sends it.
b. The server automatically approves the request and starts sending packets using TCP/IP.
c. The browser assembles packets into a website.
d. The browser sends an HTTP request to the server asking for the page.
中文翻译
DNS 解析出服务器地址之后，下一关键步骤是什么？
a. 服务器直接编译并发送页面
b. 服务器自动批准请求并发包
c. 浏览器把包拼成网站
d. 浏览器向服务器发送 HTTP 请求获取页面
答案与简析：d。
严格流程是先建立 TCP 连接（3 次握手/或 TLS 握手），随后发送 HTTP 请求；四个选项中 d 最贴近正确下一步。