前端面试:项目细节问题(已工作|给大家做个分享)

📅 2026/7/29 17:41:42
前端面试:项目细节问题(已工作|给大家做个分享)
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设置为trueloading设置为false。2在模板中根据loading、error和data的值来显示不同的内容如果正在加载数据显示加载中的提示如果加载数据失败显示错误提示并提供重新加载的按钮如果数据加载成功显示数据列表。我就是处理异步数据加载和错误处理的问题。3代码实现我自己根据我的思路写了代码大家把代码看明白业务逻辑理顺了用自己的语言表达通顺就好但不会表述的友友也可参考我的上述表达template div div v-ifloading加载中.../div div v-else-iferror 数据加载失败 button clickreloadData重新加载/button /div div v-else ul li v-foritem in data :keyitem.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