前端面试：项目细节问题（已工作|给大家做个分享）

1、介绍介绍整个项目的开发流程？

答：我面试时的回答：首先，产品、项目经理和甲方一起开会确认需求，产品编写需求文档，并画出原型图贴在需求文档上；然后，产品、项目经理、甲方、技术、测试、数据大家一起开需求评审会，项目经理和产品一起把需求拆分为任务卡片放在一个任务看板上，并且分配给前端、后端和数据组长，他们再给自己的组员分配任务，前后端和数据组3方同时进行开发，测试组编写测试用例和接口自动化测试；最后，开发完成后，测试在开发环境进行测试，测出问题会在测管平台开出缺陷卡片并提醒开发进行修复，接下来进行代码评审，评审结束后，上生产环境，产品再次验收任务卡片，有问题，再修复，最终代码才上线。

（我给大家梳理梳理这个开发过程：甲方提出需求->产品编写需求文档->全员召开需求评审会议->经理分析需求后整理出任务卡片->前后端数据组长给组员分配任务卡片->前后端数据3方同时进行开发+测试编写测试用例和接口自动化测试->测试在开发环境测试->前后端数据组3方分别召开代码评审回->代码上生产环境->上线）

2、你们平时的工作过程是什么样的？你们的工作量如何体现？

答：我面试时的回答：我们这个项目属于项目的迭代开发，本项目的迭代开发总周期是一年，我们每个月完成一个开发需求的冲刺，每个冲刺的任务卡片都会呈现在看板上，每个任务卡片都有分配相应的开发人员，大家每天早上会开30分钟晨会，项目经理会一一询问大家的开发进度，一般会有2周左右留给我们开发，1周留给测试，还有1周是改缺陷封版时间。

3、你们开发团队有些什么人组成？

答：我面试时的回答：我们这个项目比较特殊，对前端页面展示要求较高，所以有4个前端，2个后端，1个项目经理，1个产品，2个测试，3个数据，目前主要是由这些人员组成，可能中途也会有人员的流动。

4、介绍介绍你最近开发的这个项目？

答：我面试时的回答：我最近参与开发的这个项目主要是基于Vue3和ElementUI技术做的商城管理系统，用户轻松管理商品、订单、物流、分销设置等，并能 开启分销模块和查看统计报表，以提高商城的销售额和了解商城的运营情况。

5、这个项目中你主要负责了哪些模块？

答：我面试时的回答（自动给大家标个序号）：

（1）在我最近的项目中，我使用了Vite作为前端构建工具来搭建项目。Vite的快速冷启动和热模块替换功能让我能够快速开发和调试应用程序。

（2）为了实现页面布局和样式需求，我选择了Windicss组件库。举个例子，我使用Windicss的Grid系统来创建响应式的网格布局，并利用它的类名缩写功能来快速定义样式。这样，我能够更高效地完成页面布局工作。

（3）我采用了MVVM架构方式，并选择了Vue框架来构建应用程序。这种架构模式使代码更易于理解和维护。

举个例子，我负责开发一个电子商务平台的商品模块。我使用Vue框架的组件系统来构建商品列表、商品详情等子组件，并使用Vue的响应式数据绑定来实现数据的动态渲染和更新。这样，我能够快速构建出交互性强、用户友好的商品模块。

（4）我使用了Vuex来管理应用程序中的共享状态。我创建了一个store来存储共享的数据，并在需要的组件中按需引入该store。

例如，在一个订单管理模块中，我使用Vuex的store来存储订单列表数据。其他组件可以通过引入该store并使用store的API来获取订单数据或修改订单状态。这样，我能够确保不同组件之间的订单数据是同步和一致的。

6、你在项目开发中有没有遇到什么问题，你是怎么解决的？

答：我面试时的回答（自动给大家标个序号）：

问题：我仔细想想，比如我需要从后端API获取数据并在前端展示，但是我遇到了以下问题：数据加载需要一定的时间，我需要在数据加载完成前显示一个加载动画。如果数据加载失败，我需要显示一个错误提示并提供重新加载的选项。

解决：我使用了Vue 3的组合式API来定义了一个名为xxxxx的组件：

（1）在组件的setup函数中，使用ref函数来创建了一些响应式的数据，包括loading（是否正在加载数据）、error（是否加载数据时发生错误）、data（加载的数据）。在reloadData函数中，我们首先设置loading为true，将error重置为false。然后，我们使用Axios库发起一个GET请求来获取数据：如果请求成功，我们将获取到的数据赋值给data，并将loading设置为false；如果请求失败，我们将error设置为true，loading设置为false。

（2）在模板中，根据loading、error和data的值来显示不同的内容：如果正在加载数据，显示加载中的提示；如果加载数据失败，显示错误提示并提供重新加载的按钮；如果数据加载成功，显示数据列表。我就是处理异步数据加载和错误处理的问题。

（3）代码实现：我自己根据我的思路写了代码，大家把代码看明白，业务逻辑理顺了，用自己的语言表达通顺就好，但不会表述的友友也可参考我的上述表达：

<template> <div> <div v-if="loading">加载中...</div> <div v-else-if="error"> 数据加载失败！ <button @click="reloadData">重新加载</button> </div> <div v-else> <ul> <li v-for="item in data" :key="item.id">{{ item.name }}</li> </ul> </div> </div> </template> <script> import { ref } from 'vue'; import axios from 'axios'; export default { name: 'DataLoader', setup() { const loading = ref(false); const error = ref(false); const data = ref([]); const reloadData = () => { loading.value = true; error.value = false; axios.get('/api/data') .then(response => { data.value = response.data; loading.value = false; }) .catch(() => { error.value = true; loading.value = false; }); }; // 初始化加载数据 reloadData(); return { loading, error, data, reloadData }; } }; </script>