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

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>…

在linux里登录远程服务器

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

系统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…

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列表中…

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

一、图的基本概念 图 是由顶点集合及顶点间的关系组成的一种数据结构&#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;告别繁琐操作&#…

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

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

【机器学习与实现】线性回归分析

目录 一、相关和回归的概念&#xff08;一&#xff09;变量间的关系&#xff08;二&#xff09;Pearson&#xff08;皮尔逊&#xff09;相关系数 二、线性回归的概念和方程&#xff08;一&#xff09;回归分析概述&#xff08;二&#xff09;线性回归方程 三、线性回归模型的损…

3D Gaussian Splatting for Real-Time Radiance Field Rendering 论文阅读

如此热门的项目&#xff0c;网络上有很多大牛分析了这篇文章的做法&#xff0c;在这里简单记录一下个人粗浅的理解。 关于各种数学表达式的推导&#xff0c;论文和参考资料中都提供了较为详细的解读&#xff0c;本人能力有限&#xff0c;这一部分理解不够深刻&#xff0c;先不做…

【CSDN搜材料的小技巧】怎么快速查到高质量最新的内容

问题描述: 我最近搜CSDN已经搜累了&#xff0c;好多东西明显是有问题的&#xff0c;还有一堆人复制粘贴&#xff0c;从海量文章中提取出最新且高质量文章成了当务之急&#xff01; 解决方案: 我本来想写个爬虫按照文章的收藏或者点赞排序的&#xff0c;无意中看到了这篇文章…

多线程三种实现

多线程 线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。 &#xff08;理解&#xff1a;应用软件中互相独立&#xff0c;可以同时运行的功能&#xff09; 进程 进程是程序的基本执行实体。&#xff08;理解&#…

在windows下安装wsl子系统

一、安装环境 windows规格 版本Windows 10企业版版本号22H2操作系统内部版本19045.4291 二、安装过程 2.1 以管理员身份打开PowerShell&#xff08;win X快捷键&#xff09;&#xff1b; 2.2 输入命令&#xff1a;wsl --list --online&#xff08;简写&#xff1a;wsl -l …

探索 Joomla! CMS:打造个性化网站的利器

上周我们的Hostease客户咨询建站服务。他想要用Joomla建站。Hostease提供免费安装Joomla CMS服务。这可以让客户搭建网站变得更加简单和高效。下面是针对Joomla建站的一些使用心得。 Joomla CMS是一款开放自由的软件&#xff0c;为用户提供了创建和维护网站的自由度。它经过全…

鸿蒙应用开发DevEco Studio工程目录模块介绍

面向开发者&#xff0c;HarmonyOS 推出了 DevEco Studio 和 Dev Device Tool 两款开发工具&#xff0c;前者目前迭代至 3.1 版本&#xff08;对外开放版本&#xff09;&#xff0c;用于开发 HarmonyOS 应用&#xff1b;后者用于开发智能设备 应用的工程主体结构如上图 在这里我…