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

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)代码实现: 我自己根据我的思路写了代码,大家把代码看明白,业务逻辑理顺了,用自己的语言表达通顺就好,但不会表述的友友也可参考我的上述表达:

javascript 复制代码
<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>
相关推荐
C_心欲无痕几秒前
react - useTransition标记低优先级更新
前端·react.js·前端框架
捻tua馔...3 分钟前
antd3的表单实现(HOC解决方案)
前端·javascript·react.js
支付宝体验科技5 分钟前
支付宝 KJS Compose 动态化方案与架构设计
前端·客户端
弘毅 失败的 mian5 分钟前
Git 分支管理
大数据·经验分享·笔记·git·elasticsearch
AllinLin15 分钟前
JS中的call apply bind全面解析
前端·javascript·vue.js
阿乐去买菜20 分钟前
2025 年末 TypeScript 趋势洞察:AI Agent 与 TS 7.0 的原生化革命
前端
POLITE321 分钟前
Leetcode 438. 找到字符串中所有字母异位词 JavaScript (Day 4)
javascript·算法·leetcode
创思通信22 分钟前
STM32F103C8T6采 DS18B20,通过A7680C 4G模块不断发送短信到手机
javascript·stm32·智能手机
海绵宝龙25 分钟前
Vue 中的 Diff 算法
前端·vue.js·算法
zhougl99626 分钟前
vue中App.vue和index.html冲突问题
javascript·vue.js·html