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

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/835037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vCenter 7.3证书过期无法登录处理方法

登录报错&#xff1a;如下图 Exception in invking authentication handler [SSL: CERTIFICATE_VERIFY_FAILED] certificate vertify failed: certificate has expired(_ssl.c:1076) 处理方法1&#xff1a;推荐&#xff0c;可行 登录vCenter控制台&#xff0c;AltF3切换至命令…

antdVue 自定义table列配置

最近做项目的时候需要对页面的table进行列配置的需求 子组件 <div><a-modaltitle"列配置" :visible"visible" :closable"false" :footer"null"width"800px" height"448px"><div><a-row>…

.DevicData-P-XXXXXXX勒索病毒数据怎么处理|数据解密恢复

导言&#xff1a; 在网络空间&#xff0c;每一次病毒或勒索软件的涌现都如同一次科技界的“地震”。而.DevicData-P-XXXXXXX勒索病毒&#xff0c;正是这场“地震”中的一股不可忽视的力量。它以其独特的加密技术和狡猾的传播方式&#xff0c;给全球的个人和企业带来了前所未有…

office 官方下载地址

office 官方下载地址&#xff1a;https://answers.microsoft.com/en-us/msoffice/forum/all/useful-microsoft-download-links-for-office-direct/7bcaa971-9493-44b6-a1ba-0db4c6957c47 Office 2013 Home and Student Russian https://officeredir.microsoft.com/r/rlidO15C2…

在linux里登录远程服务器

在linux里登录远程服务器。在虚拟终端里输入命令&#xff1a; ssh 远程服务器ip -l username 然后输入登录密码&#xff0c;就可以登录到远程服务器的命令行界面。登录方便&#xff0c;字体也可以在本地机的虚拟终端里设置得大一点。 下面是一张截屏图片。

QTableWidget导入导出excel

导入导出excel的方式有很多种&#xff0c;我这里使用的表格类型为CSV&#xff0c;这样可以不依赖那些office软件 导入&#xff1a; QList<QStringList> data;QString file_name QFileDialog::getOpenFileName(this,tr("Read file"),"",tr("fil…

系统Cpu利用率降低改造之路

系统Cpu利用率降低改造之路 一.背景 1.1 系统背景 该系统是一个专门爬取第三方数据的高并发系统&#xff0c;该系统单台机器以每分钟400万的频次查询第三方数据&#xff0c;并回推给内部第三方系统。从应用类型上看属于IO密集型应用,为了提高系统的吞吐量和并发&#xff0c;…

音频数字信号I2S一些知识理解

(1)I2S单向基本传输需要几根线传输音频信号? 3根线 LRCK SCLK(也叫BLK) DATA(单向) (2)如何理解I2S MASTER或者SLAVE的模式&#xff1f; codec的i2s作为slave mode,LRCK和SCLK来自于soc主控端,codec端自动检测MCLK和LRCK codec的i2s作为master mode,codec通过MCLK LRCLKDIV…

【Delphi 爬虫库 5】HTTP响应状态码说明详解(Response Status Code)

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是互联网上应用最广泛的协议之一&#xff0c;用于在客户端和服务器之间传输数据。在HTTP通信中&#xff0c;服务器在接收到客户端请求后&#xff0c;会返回一个HTTP响应&#xff0c;其中包含一个状态码&#xff0c;这个…

CSS-浮动

float (浮动) 作用&#xff1a;盒子的顶点是一样的&#xff0c;具备行内块的特征&#xff0c;能设置宽高 属性&#xff1a;float 属性值&#xff1a;left 浮动在网页左边 right 浮动在网页右边 .a{width: 100px;height: 100px;float:left;background-color: red;}.b…

drawio 网页版二次开发(1):源码下载和环境搭建

目录 一 说明 二 源码地址以及下载 三 开发环境搭建 1. 前端工程地址 2. 配置开发环境 &#xff08;1&#xff09;安装 node.js &#xff08;2&#xff09;安装 serve 服务器 3. 运行 四 最后 一 说明 应公司项目要求&#xff0c;需要对drawio进行二次开发&…

VUE 或 Js封装通用闭包循环滚动函数

1、vue3 闭包滚动函数的使用 js 调用也基本雷同 // 滚动Tab组件const scoreTabRef ref()// 滚动的选项const scrollOption ref({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 100,// 滚动历时时间scrollDuration: 10…

Microsoft Project使用简明教程

一.认识Microsoft Project Microsoft Project 是微软公司开发的项目管理软件&#xff0c;用于规划、协调和跟踪项目的进度、资源和预算&#xff0c;如下图所示&#xff0c;左边是任务的显示&#xff0c;右边是一个日程的显示图&#xff0c;最上方的长方形处在我们项目设定日程…

Python 3 中zip()函数的用法

1 创作灵感 我们在阅读代码的时候&#xff0c;经常会看到zip函数&#xff0c;有的时候还和循环在一起用&#xff0c;今天举几个例子测试一下该函数的用法 2.应用举例 &#xff08;1&#xff09;定义了两个列表一个是num,一个是letter (2)使用zip可以把num列表和letter列表中…

typescript 模拟数据统一封装 增删改查 例

功能&#xff1a;定义一个操作数据的库&#xff0c;支持 Mysql、Mssql、MongoDb 要求&#xff1a;Mysql、Mssql、MongoDb功能一样&#xff0c;都有add、update、delete、get方法 注意&#xff1a;约束统一的规范、以及代码重用 解决方案&#xff1a;需要约束规范所以要定义接口…

【高阶数据结构】图 -- 详解

一、图的基本概念 图 是由顶点集合及顶点间的关系组成的一种数据结构&#xff1a;G (V&#xff0c; E)。其中&#xff1a; 顶点集合 V {x | x属于某个数据对象集} 是有穷非空集合&#xff1b; E {(x,y) | x,y属于V} 或者 E {<x, y> | x,y属于V && Path(x, y…

pdf编辑软件,四款软件让你轻松玩转PDF编辑!

在信息爆炸的当今时代&#xff0c;PDF格式文档因其跨平台、不易被篡改的特性而深受大家喜爱。然而&#xff0c;如何高效地编辑PDF文档却成为许多人的难题。今天&#xff0c;我将为大家推荐四款实用的PDF编辑软件&#xff0c;让你轻松玩转PDF编辑&#xff0c;告别繁琐操作&#…

LeetCode hot100-31-G

25. K 个一组翻转链表给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。你不能只是单纯的…

查看主机(计算机)的 ID

目录 一、Windows 操作系统&#xff1a; 二、macOS 操作系统&#xff1a; 三、Linux 操作系统 查看主机&#xff08;计算机&#xff09;的 ID 一、Windows 操作系统 1、Windows 操作系统&#xff1a; 使用命令行&#xff1a;打开命令提示符&#xff08;cmd&#xff09;&am…

Springboot集成Mybatispuls操作mysql数据库-04

MyBatis-Plus&#xff08;简称MP&#xff09;是一个MyBatis的增强工具&#xff0c;在MyBatis的基础上只做增强而不做改变。它支持所有MyBatis原生的特性&#xff0c;因此引入MyBatis-Plus不会对现有的MyBatis构架产生任何影响。MyBatis-Plus旨在简化开发、提高效率&#xff0c;…