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>