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

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>
相关推荐
爱喝水的小鼠2 分钟前
Vue3(一) Vite创建Vue3工程,选项式API与组合式API;setup的使用;Vue中的响应式ref,reactive
前端·javascript·vue.js
小晗同学3 分钟前
Vue 实现高级穿梭框 Transfer 封装
javascript·vue.js·elementui
宇宙李16 分钟前
2024java面试-软实力篇
面试·职场和发展
WeiShuai17 分钟前
vue-cli3使用DllPlugin优化webpack打包性能
前端·javascript
forwardMyLife22 分钟前
element-plus的面包屑组件el-breadcrumb
javascript·vue.js·ecmascript
ice___Cpu23 分钟前
Linux 基本使用和 web 程序部署 ( 8000 字 Linux 入门 )
linux·运维·前端
JYbill25 分钟前
nestjs使用ESM模块化
前端
测试界柠檬32 分钟前
接口测试到底测试什么?
自动化测试·软件测试·功能测试·程序人生·职场和发展·单元测试·压力测试
加油吧x青年44 分钟前
Web端开启直播技术方案分享
前端·webrtc·直播
Filotimo_1 小时前
【自然语言处理】实验三:新冠病毒的FAQ问答系统
人工智能·经验分享·笔记·python·学习·自然语言处理·pycharm