前端准备面试题总结（css+js+ES6+vue+http+项目场景+地图相关问题）

css

1.实现垂直水平居中

主要实现垂直水平居中的几种方法：

1.flex布局，设置justify-content: center; align-items: center; 父元素需要设置高度

2.使用grid布局：display设置grid，在设置place-items：center

3.通过绝对定位加tranaform

1.如果在flex设置水平垂直居中时,没有设置父元素的高度,会发生什么,应该如何解决?

如果没有设置父元素的时候，可能在盒子的垂直居中会发生问题，无法实现，表现为整体的高度由需要实现垂直水平居中的盒子的高度，高度一定要设置，或者使用min-height来保证父容器最小高度。

2.grid布局中，除了place-items：center能实现垂直水平居中，还有哪些方式也能

在 CSS Grid 布局中，除了 place-items: center，还可以通过以下方式实现垂直水平居中：

1. 使用 justify-items 和 align-items：可以控制所有子元素的对齐。
2. 使用 justify-self 和 align-self：可以单独控制某个子元素的对齐。
3. 使用 grid-template-columns 和 grid-template-rows：通过定义网格来控制子元素的对齐。
4. 使用 place-content ：是 align-content 和 justify-content 的简写，用于对整个网格进行对齐。
5. 使用 grid 配合 auto 单位：适用于响应式布局，通过自动调整网格大小来居中子元素。\

3. 绝对定位加transform实现垂直水平居中时，transform的具体属性值如何设置？这种方式在不同浏览器中的兼容性如何？

父元素设置为相对定位，子元素设置为绝对定位，top: 50%和 left: 50%，transform: translate(-50%, -50%)

IE8 及以下不支持 transform

2.BFC是什么

BFC含义是块级格式化上下文，像我们平常使用浮动，定位，以及display这类属性都会触发BFC，BFC的表现会使应该垂直的盒子水平放置，BFC就是页面上的一个隔离的独立容器，容器内部如何移动不会影响容器外部的内容

1.如何利用BFC解决常见的布局问题，如清除浮动对周围元素的影响？

浮动元素会脱离正常的文档流，导致父元素的高度无法自动扩展，从而影响周围元素的布局。通过创建 BFC，可以有效解决这一问题，使父元素包含浮动元素的高度。overflow: hidden

3.伪类和伪元素的区别

伪类是用来定义元素的某种状态 hover focus :first-child

伪元素是用于创建元素的一部分 ::before ::after

4.css的新特性

css的新特性常用的有:

1.背景设置样式的属性:背景尺寸,背景位置

2.盒子的一些修饰:边框的圆角,盒子的阴影,边框的图片

3.文本效果:文本的阴影,设置强制换行

4.引入字体模块

5.flex的布局

flexBox弹性盒子是一种布局工具，对于这个弹性盒子可以设置**flex-direction：row/column等属性 去决定主轴的方向， flex-wrap**：处理是否换行

justify-content ：主轴对齐方式**align-items**：交叉轴对齐方式

6.什么是回流和重绘

回流就是增加或者删除dom元素的时候,页面需要对dom元素进行操作的时,这个过程叫做回流

重绘是改变元素的css样式,例如元素的字体颜色,背景颜色这些,会导致重绘

7.常用的行内元素和块级元素有哪些

行内元素：不能设置宽高，排列在一行的元素属于行内元素，行内元素有：<a><span><i><b><input><label>

块级元素：可以设置宽高，独占一行的元素属于块级元素，块级元素有：<div><p><h1>~<h6><ul><li><table><section>

8.css的引用有哪些，link和@import的区别？

1.link是属于xhtml的一个标签,而import是属于css提供的一种方式

2.使用范围不用,对于link的应用游览器没有限制,但是import不知道老的游览器

3.加载顺序不同:使用link引入时,当页面加载的时候引入的css会和页面同时加载,但是import引入时,他需要等页面加载完成之后,才会加载import的内容

9.CSS常用尺寸单位有哪些？应用场景？

常用的尺寸单位有px,rem,em,vw,vh

px是像素单位,是一个具体的大小,常用语精确地固定尺寸设计

rem是相对于根元素进行设置的,常用语响应式布局

em是相对于自身字体大小设置的,如果没有字体大小设置,就相当于父元素进行设置

vw是游览器视口的宽的百分比

vh是游览器视口的高的百分比这些都是用于响应式布局设置的

10.css选择器有哪些？

css的选择器有

1.通配符选择器

2.id选择器

3.类选择器

4.属性选择器

5.伪类选择器

6.伪元素选择器

7.群组选择器

JS

1.什么是原型和原型链

js对象都有一个原型，对象可以通过原型对象访问属性和方法

当访问一个对象的属性和方法的时候在对应的原型对象中查找，如果当前的原型对象中没有对应的属性和方法，就沿着原型链向上查找，直到找到对应的原型，这个过程就形成了原型链

2.闭包是什么，闭包的好处，闭包的缺点，闭包的使用场景

闭包 就是内层函数可以访问外层变量

闭包可以隔离作用域,不会导致变量污染

但是闭包无法被垃圾回收期处理,变量都会存储在内存中,导致内存泄漏,消耗性能,所以不能滥用闭包

闭包的使用场景:模块化,防抖和节流,柯力化函数

3.什么是作用域 和作用域链

作用域是指变量的作用范围

作用域链是指，当一个变量没有定义作用域它会想外查找，直到找到距离自己最近的作用域范围，这个过程被称为作用域链

4.js的数据类型 判断方法

jsde 数据类型包括基本数据类型和引用数据类型，

基本数据类型包括number string 布尔值 null undefined

引用数据类型包括数组和对象

简单的判断数据类型的方法有 typeof去判断基本数据类型 引用数据类型无法判断

适用于所用类型的判断方法是object.prototype.toString.call( )

5.

6.深拷贝和浅拷贝

深拷贝会创建一个新的内存地址，改变新的数据不会改变拷贝对象的数据

浅拷贝拷贝的是同一个内存地址，改变新的数据拷贝对象也会改变

7.什么叫做垃圾回收机制，方法有哪写 存在的问题有什么 怎么优化、

垃圾回收机制是垃圾回收期定期会清理内存中不用的变量，常用的方法有标记清除法，和引用计数法清除，标记清除法是垃圾回收期会标记内存变量为正在被使用和未被使用的两种状态，然后将未被使用的变量清除；引用计数法清除是将变量的引用次数记下来，最后再将记为0的次数的变量删除掉

优化：

1.一个数组为空的时候，要将数组设置为[ ],数组长度设置为0

2.不再使用的对象设置为null

3.可以使用闭包，但是不能滥用

8.js哪些操作会造成内存泄漏

闭包

遗忘在内存中的定时器

10.new操作符具体干了一个什么

1.创建一个实例对象

2.将构造函数与这个对象通过原型链链接起来

3.将构造函数的this绑定到该对象上

4.判断该构造对象是否为对象，如果不是对象的话，返回新的对象，如果返回的是对象，则返回构造函数里的对象

11.什么是事件冒泡，事件委托

事件冒泡是指当触发一个事件时，这个事件会一层一层的传播，直到传播到最外层，这个过程被称为事件冒泡

事件委托是指在事件冒泡的基础上，指定一个事件执行程序，这个行为叫做事件委托

12.undefined和null的区别

undefined是指一个变量为定义

null是指一个变量定义了但是定位为空

13.

14.数组去重有哪些方法

1.双重for循环

2.利用对象key值唯一不可重复的特点

3.利用for循环+sort循环 排序sort，比较n项和n-1是否一样，不一样的话就push在新数组中

4.利用for循环+indexof

15.数组的基本方法

push:从数组的尾部增加一个数据

shift：从数组的头部增加一个数据

pop：从数组的尾部删除一个数据

unshift：从数据的头部删除一个数据

slice：截取数据

splice：修改或者删除数据

reverse：反转数组

sort：排序

join：把数组变成字符串

toString：把字符串变成数组

split：把字符串变成数组

concat：合并数组

16.js中call、apply、bind的区别

call apply bind会改变this指向

但是call 和apply会立即执行 bind需要触发函数

apply传参传的是一个数组

17.箭头函数和普通函数的区别

箭头函数没有自己的this指向，需要继承上下文的this指向

箭头函数不可以作为构造函数

箭头函数也不可以使用argument对象

箭头函数也不能通过call，apply，bind改变this指向

18.如何操作DOM元素

1.对需要操作的Dom元素设置id名称，然后通过document.getElementById("id") 获取。

2.操作父元素：$parent

3.操作根元素：$root

4.操作子元素：$children

5.使用ref，给相应的元素加ref定义name，然后可以通过this.$refs.name 获取到该元素。

19.防抖和节流的区别

防抖 在一定的时间内，多次触发，都不执行，直到在这一段时间内只触发一次，之后才会执行

节流 在一定的时间内，不论触发多少次，在这一段时间仅执行一次。

20.for循环和forEach的区别

for循环的return是终止循环，然后forEach循环通过return返回循环结果

for循环可以通过break和continue随时终止循环，但是forEach 不可以

for循环可以修改索引，但是forEach不可以自己修改索引

21.什么是事件轮循

事件轮询是指js是单线程自上而下工作，所以在处理过程中当遇到异步任务的时候，就将异步任务放到任务队列中，宏任务放道宏任务队列，微任务放在微任务队列，直到将同步任务执行完毕之后，然后开始执行任务队列中的任务执行一个宏任务。检查并执行所有微任务（依次执行，直到清空微任务队列）。继续执行下一个宏任务。就将任务队列中的任务一个一个执行。微任务的优先级高于宏任务。即使宏任务队列中有任务待执行，也必须先清空微任务队列。这样就形成了事件轮询，定时器时宏任务 promise是微任务

22.let、count和var的区别

暂时性死区：count和let存在暂时性死区

变量提升：var会有变量提升。count和let不存在变量提升

重复声明：var可以重复声明，count和let不可以

初始值：var和let可以不定义初始值，但是const必须定义初始值

作用域：var非块级作用域，let和const是块级作用域

23.promise的理解

promise是一种异步方法，用来处理回调地狱的问题

24.promise的三种状态

promise有三种状态，状态一旦发生变化，就不可逆转。

三种状态分别是pending（进行中）fulfilled（已成功）rejected（已失败）

promise的方法：

.then方法是处理成功时的回调

.catch处理失败的回调，捕获错误

.finally不管成功还是失败，都会执行的操作

.all是用来处理多个异步任务

.race是哪个先完成就返回哪个。实际开发场景：同时请求多个异步接口，谁先相应用谁的数据

25.async/await

async/await 是基于promise的语法糖

可以使用async/await避免链式调用

ES6

1.ES6新增的内容有哪些

1.增加let和const声明

2.箭头函数

3.模版字符串

4.解构赋值

5.默认参数

6.展开运算符

7.模块化 export 和import

8.promise

2.map和forEach的区别

相同点：map和forEach都是循环遍历数组中的每一项，同时forEach和map里面的每一次执行匿名函数都支持3个参数

不同点：forEach没有返回值，map要有返回值，是返回一个新的数组，不会改变原数组
map是遍历数组，对数组中的每一项执行回调函数，返回一个新的数组，不会改变原数组，不可以中断循环

for循环是可以手动改变原数组，可以使用break 或者 continue中断，比较灵活

forEach用于遍历数组，对数组的每一项执行回调函数，不返回新数组，不会跳出循环，不改变原数组

3.js代码的执行顺序

首先会自上而下的执行所有的同步代码，将所有的同步任务直接运行到主线程上，遇到异步任务时，将其放在任务队列中，异步任务分为宏任务和微任务，在每次执行栈清空后，先执行微任务队列中的任务，再执行宏任务队列中的任务。

微任务：promise

宏任务：setTimeout

4.promise和async await的区别

promise是js中用于处理异步操作的对象，使用.then和.catch来处理异步结果，而async/await是基于promise的语法糖，可以让异步代码看起来像同步代码一样。promise和async/await在性能上没有显著区别，

promise中，多个then会依次执行，每个then的返回值会传递给下一个then

在async/await使用await可以暂停函数的执行，直到promise完成，能够让代码看起来像是同步的，避免then的链式调用

vue

1.vue的常用指令

v-for

v-if

v-on

v-bind

v-model

v-show

2.vue中语义化标签

header

nav

main

section

article

aside

footer

3.v-model的实现原理

v-model的实现原理是基于数据绑定和事件监听，通过v-bind实现对元素属性的绑定，通过v-on监听用户输入事件来实现数据与视图的同步

4.v-if和v-show的区别

v-if 和 v-show都是用来实现元素的显示和隐藏

v-if是通过增加和删除dom元素来实现的

v-show是通过控制元素的display的属性来实现的

5.

在

6.常用的事件修饰符有哪些

• prevent：阻止事件的默认行为
• stop：阻止冒泡
• self：只监听触发该元素的事件，其他不管
• once：事件只触发一次
• left：左键事件
• right：右键事件
• middle：中间滚轮事件

7.v-for为什么加key，不加key会怎么样

在正常的渲染显示元素的过程中，加与不加key对于我们来说是看不到什么的效果的

但是当页面涉及到增删操作的时候，还是应该加上key，因为在涉及到增删操作时，可以根据key对新旧dom进行对比，相同的话就可以复用，这样可以减小性能

8.vue2的生命周期

beforCreate：Vue实例被初始化之后

create：vue实例已经被创建

beforeMount：挂载之前

mounted：挂载

beforeUpdate：更新前

updated：更新

beforeDestroy：销毁之前

destroyed：销毁之后

9.父子组件生命周期执行顺序

父beforeCreate →created→beforeMount→子beforeCreate→created→beforeMount→mounted→父mounted

10.第一次页面加载会触发哪几个钩子?

beforeCreate，created，beforeMount，mounted

11.如果加入了 keep-alive 多两个生命周期:

activated，deactiated

12.如果加入了 keep-alive ，第一次进入组件会执行那些生命周期？

beforeCreate，created，beforeMount，mounted，activated

13.如果加入了 keep-alive，第 n 次进入组件会执行那些生命周期？

只执行 activated

对于keep-alive的了解

是vue中的一个内置组件，用于组件的缓存，当组件被包裹时，在组件切换过程中不会被销毁和 重新创建。

14.创建后和渲染后有什么区别？

在created中会创建完成实例，可以拿到相应的data数据methods的方法等内容，但是还未挂载dom，还不能获取dom节点，如果要进行dom操作，只能通过$nextTick函数，但是在mounted实例被挂载后调用，已经可以获取dom节点和操作dom节点

15.渲染后和更新后有什么区别？

updated与mounted不同的是，在每一次的dom结构更新vue都会调用一次updated，但是mounted仅仅只执行一次

16.简述每个周期具体适合哪些场景？

beforCreate：在这儿可以执行loading事件

create：接口请求

mounted：获取dom节点 或者接口请求

updated：统一对数据进行处理

destroyed：销毁定时器 释放内存

17.vue2和vue3生命周期有什么区别

1.vue2中的beforeCreate和created在vue3中修改为setup

2.在每一个生命周期上面了on前缀

3.beforeDestroy和destroyed变成了onBeforeUnmounted和onUnmounted

18.vue 的 watch 和 computed 有什么区别？他们的应用场景？

watch是通过监听一个值，当这个值发生变化时，触发回调函数

computed是通过计算别的属性的值，得到的值

watch的属性需要在data中定义 computed不需要再data的定义

watch还可以处理异步函数 computed不可以 但是computed有缓存，watch没有缓存

19.$nextTick的理解

他主要的作用是下一次dom更新之后执行的回调，例如在一个组件中，点击按钮修改数据来切换元素显示隐藏状态，之后根据该元素新状态调整相邻元素的样式，如果不使用nextick，数据修改后直接计算样式，可能会因为dom更新未完成，获取旧状态，结果会出错，而利用nextick，在其回调里进行样式计算，就能在dom更新结束后操作。

20.哪个阶段无法获取 DOM 节点？怎么处理？

在beforeCreate和created阶段都是无法获取dom节点的，要想在 Created 阶段操作 DOM 节点，可以将获取节点的操作放在 $nextTick 中，在 DOM 下一次更新完成后延迟回调。

21.vue 中使用 refs 获取组件的 dom 元素报 undefined 如何解决？

可能会遇到一下几种情况refs获取dom报undefined时，可能是有一下情况：

1.在created中，在创建完实例后立即调用，这个时候还不能操作dom节点，解决方案：在mounted阶段挂载后执行

2.在ref组件使用了条件渲染，当前报undefined可能是当前条件下这个dom不存在

22.vue 无法检测实例被创建时不存在于 data 中的变量

vue2是通过Object.defineProperty数据劫持结合订阅发布模式实现双向数据绑定的。通过Object.defineProperty来劫持各个已有属性的getter和setter，而不能劫持整个对象，只能劫持已有的对象属性。所以也就是说Object.defineProperty劫持data中各个属性的getter和setter，，所以变量必须在data对象上存在才能上Vue将它转换为响应式的。

23.vue 无法检测到 data 中对象，数组的动态添加和删除，不能通过索引直接修改或者赋值，也不能修改数组的长度

vue2是通过Object.defineProperty数据劫持结合订阅发布模式实现双向数据绑定的。通过Object.defineProperty来劫持各个已有属性的getter和setter，而不能劫持整个对象，只能劫持已有的对象属性,所以只能监听到已有数据是否被修改，不能监听到对象的新增删除属性，而且无法监控到数组下标的变化，引入不能修改数组长度

24.异步获取接口数据，DOM 数据不发现变化

vue在更新dom时是异步执行的。在修改数据后视图不会立刻更新，而是等同一事件循环中的所有数据修改完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍是未修改的DOM。可以在数据变化之后立即使用$nextTick，这样就可以拿到最新的dom进行使用

25.Vue2 中为什么组件 date 只能是一个函数而不是一个对象？

在一个组件中，是可能会存在复用的情况，每一个组件只能含有各自的data数据，如果是一个对象的话，在组件复用的情况下，改变其中一个组件的data数据，别的组件也会跟着改变，但是如果是一个函数的话，每次对于组件的复用，都会有一份新的独自的data数据，不会被相互影响。

26.双向数据绑定的原理 vue2和vue3是如何实现的

在vue2是通过Object.defineProperty数据劫持结合订阅发布模式实现双向数据绑定的。通过 Object.defineProperty 来劫持各个属性的 getter 和 setter，当数据对象的属性被读取或修改时，会触发相应的 getter 和 setter 函数。

然而vue3是通过proxy数据代理来实现的数据双向绑定的，劫持的是整个对象，返回的也是一个新的对象。

27.vue2和vue3有什么区别

1.双向数据绑定原理不一样

2.vue2是选项式API vue3是组合式API

3.生命周期发生了改变

4.vue2只支持一个根节点，vue3支持多个根节点

28.MVVM的理解

M是model 数据模型 存放数据的地方

V是view 是视图 渲染数据的地方

VM是视图模型，把model层上的数据自动渲染道view层，且model层和view层的数据是同步的。

29.vuex是什么 5个核心概念

vuex是vue的状态管理库,用于vue中存放公共使用的数据,这样不论任何组件在任何地方都能直接获取这个状态和触发里面的行为,并且这个状态是响应式的

它有5个核心概念:

state:数据状态,用来存储公共管理的数据

getter:计算属性,类似与vue中的computed

mutation:同步方法,用来存放state状态的同步方法

action:用来存放异步方法

moudle:模块化,将store分割成模块,每个模块都拥有自己的state,getter,mutation,action,moudle

30.vuex的优缺点

1.便于集中管理共享数据,易于开发和后期维护

2.负责层级的组件,兄弟组件间的状态会更好管理维护,可以更加高效的实现组件间的数据共享,提高开发效率

3.vuex的状态管理是响应式的.如果state里面的状态发生变化,相应的组件也会渲染更新,能够实时保持数据与页面的同步

4.写法简单,比起localStorage不需要做转换

5.可以减少http的请求,提高浏览器的性能

31.vuex的使用场景

1.登录状态

2.购物车

3.复杂的组件通信(兄弟组件的通信,多层嵌套的组件的通信等)

4.vuex可配合sessionStorage用户基本信息的持久化存储

32.vuex和cookie，localstroage，sessionstroage的区别 面试中提问应该怎么回答

1.vuex是一个专门用于vue的状态管理库,用于在组件之间共享和管理状态,可以用于解决组件中通信复杂的问题

cookie，localstroage，sessionstroage是游览器提供的本地存储机制,用于存储少量数据,通常用于持久化数据,用户信息或前后端通信中的数据保存

2.vuex的状态存储在内存中

cookie存储在浏览器和服务器之间

localstroage，sessionstroage存储在浏览器的本地,不能直接被服务器访问

3.vuex的状态会在页面刷新时丢失

cookie可以设置过期事件

localstroage时永久存储

sessionstroage关闭浏览器窗口即失效

4.vuex需要在多个组件间共享的状态,例如用户登录信息,或者响应式数据

cookie适合需要在前后端交互中自动传递的小型数据,例如会话标识

localStorage适合存储需要长时间保存的数据,例如用户偏好设置,浏览器缓存数据

sessionStorage适合存储当前会话的数据,例如临时的表单数据,会话中间结果

32.vuex刷新页面后数据丢失问题如何解决

vuex的状态在页面刷新时数据会清空,面对这种问题的话我们可以在页面刷新之前就将state的数据通过localStorage或者sessionStorage在本地存储起来,刷新之后再把本地存储中的数据方法state的根状态里

34.$route 和 $router 的区别？

$router是用来操作路由的

$route是用来获取路由信息

35.params 传参和 query 传参的区别：

params传参的参数不会显示在url中,query传参的参数会显示在URL中

params刷新参数消失,需要设置动态路由在路径后加冒号:绑定动态参数.query刷新后参数还在

36.组件通信方式

通信方式由父传子、子传父、兄弟传值、祖孙传值

父传子通过父组件绑定数据，子组件props 传递数据

字传父通过$emit传递事件

兄弟传值通过vuex和event bus

祖孙传值通过 provide 和 inject

37.keep-alive 是什么？

keep-alive是vue的一个内置组件，用于对组件的缓存，如果对一个组件使用了keep-alive包裹，当对这个组件进行切换的时候，不会进行销毁和重建的操作，会被储存在内存中，以此来提高性能。常用于多页面表单，标签页切换以及列表详情页切换。但是keep-alive会将组件实例保存在内存中，过多的缓存可能会导致内存占用过多，使用时需要注意只缓存需要保留状态的组件

38.vue的两种模式

history 模式 和 hash 模式

hash模式带有#号，不需要额外的服务器配置

history模式没有#号，需要服务器配置支持

http

1.浏览器输入url后都经历了什么

1.在url中输入地址会使用DNS对其进行解析

2.通过DNS找到对应的IP地址

3.浏览器与服务器建立TCP连接

4.浏览器向服务器发送请求

5.服务器对于游览器的请求做出响应

6.浏览器解析代码，并渲染页面

2.浏览器地址栏的完整URL都包含哪些内容都各代表什么？

协议、域名、端口号

3.cookie、sessionStorage、localStorage的区别？

cookie存储需要与服务器建立连接，可以自己设置过期时间，存储内容很小，是浏览器，轻量级数据

localstorage不需要与服务器建立连接，可以永久存储，存储内容很小，存储在游览器，持久化数据

sessionStorage不需要与服务器建立连接，页面关闭会话停止，存储在浏览器，临时数据

4.http和https的区别

http是明文传输协议 无需证书 安全性不高

https是暗文传输协议 需要证书 安全性较高

5.常见的http状态码

10

200 请求成功

300 重定向

400 客户端错误

500 服务器错误

6.什么是跨域？为什么有跨域问题？解决跨域的方式

跨域是域名，协议，端口号有一个不一样的都叫跨域

解决办法：

1.cors跨域资源分享，在发生请求时，在响应头加入相应的字段

2.jsonp

3.代理服务器，通常部署在本地开发环境或者生产环境中，代理服务器会想目标服务器发送请求，并将结果返回道客户端，通常在config.js中配置代理

7.前端性能优化手段？

1.资源压缩----使用工具对于css、js代码进行压缩，去除冗余代码，空格和注释

2.减少http请求---

3.懒加载 对于图片进行懒加载----分页渲染，虚拟滚动渲染

4.使用CDN----将静态资源托管道CDN上

5.减少对于dom的直接操作

6.按需加载，按需引用

8.websocket和http的区别

websocket是一种双向通信协议，客户端可以向服务器发送和接收信息，同样服务器可以向客户端发送和接受信息。但是http是单向通信协议，只能由服务器向客户端发送信息，不能由客户端向服务器发送信息。http适合页面加载、静态资源请求等场景，WebSocket适合实时数据交换和双向通信，连接持久化，减少了开销和延迟。

项目场景

从0到1搭建项目大致步骤

1.安装好前端开发环境

2.确定好技术选型

3.通过脚手架创建一个简易项目

4.安装配置好路由，通过路由来管理页面导航

5.引入css预处理以及安装css预处理工具Tailwind CSS

6.安装vuex进行全局状态管理器

5.分装好公共组件

6.将项目的框架分布搭建好，在git上面创建项目，将本地创建好的和git关联

7.接下来具体的工作大家就可以拉代码分工完成了

在大屏设置比例缩放的思路

首先设置body的缩放值为1,在缩放按钮中设置点击方法:当触发点击方法时,先将缩放状态取反,然后在通过游览器大小和项目实际大小的宽高比取得最小值,对body中的缩放值辅助同时将缩放状态存入vuex中以便别的页面同等比例缩放

在项目中的主要职责是什么呢

在雄安伏羲农场数据中心的大屏中我主要负责了九部法和一条龙中的部分页面，其中九步法是基于农业生产的不同阶段，结合精准农业技术制定的一个作业流程，涵盖了土壤检测、精准施肥、播种、灌溉等各个环节。每个步骤都涉及到具体的农事操作，并结合实时数据进行调整。在前端实现时，我们通过动态展示每个步骤的状态，确保用户能够实时跟踪农事执行进度。

你是如何处理和展示实时数据的？有没有涉及到数据的实时更新或推送？

大屏中的数据通过API从后端获取，然后前端渲染在页面中，但是为了展示数据的实时性，我们也使用了websocket进行数据推送，确保每一个步骤的数据可以实时更新。

如何通过websocket进行实时数据推送的

首先websocket是一种双向通信的协议，一般在项目中可以用来做聊天，实时数据更新等功能，对于实时数据推送首先客服端使用onopen 与后端建立连接，onmessage接受实时数据，onsend发送数据道服务器，colse关闭连接，onclose重连 ，订阅某个数据，比如设备状态更新或者用户统计的数据，接收到的实时数据会解析并通过图表（如 ECharts）动态渲染到页面上，确保数据的实时性。

项目中是否涉及到大数据量的展示？如何优化数据渲染性能？

在大屏中确实经常会涉及到大数据量的展示，像农田的实时监控数据，网格数据等，在这些数据通常是非常庞大的，可能包含几万条几百万条记录，所以这些数据需要实时渲染并展示给用户，可以通过分段加载，分页加载，虚拟滚动这些操作去展示

有没有自己封装过组件，具体的说一说封装了一些什么组件

在我的项目中，尤其是在后台开发的过程中，我们要保持样式的一致性，封装过很多的组件，例如

新增、编辑。删除按钮组件这些基本在每一个页面都会执行这些操作，所以对于这个功能进行封装，在使用时将按钮的文字、颜色、图标可以通过props动态配置，支持权限控制，根据用户角色动态显示/隐藏按钮，为每一个操作通过emit提供回调函数，这样不用每次重复编写按钮逻辑，通过统一样式，保证了页面的一致性，

也封装过文件上传组件，对于后台中的文件上传功能是非常多的，而且需求各不相同，通过element中的el-upload组件进行二次封装，通过props传值支持单文件上传和多文件上传，可显示上传进度条，删除等操作。

以及对echarts图表组件的封装，在后台大屏前台项目，echarts图表的显示是必不可少的。且每一个页面的图表类型和数据结构不同，只需要props动态配置图表的配置项，以及使用watch实时数据更新，这样减少代码的重复编写

还有一些简单的加载组件

在我负责的大屏项目中，我还封装过一个富文本编辑器组件，使用了@wangeditor/editor-for-vue，主要用于文章编辑，产品描述和评论输入等场景。通过props 传递配置项，使用v-model实现数据双向绑定，确保与父组件的数据同步

有没有做过地图相关的项目

遇到地图卡顿或者加载不出来问题应该如何解决呢

1.首先检查网络问题，可能是网络不稳定，导致地图或相关资源加载失败

2.地图API或资源文件过大，延迟较高、

解决方法：

​ 检查网络请求状态，将高德地图SDK放到本地 或者使用离线地图包，再或者采用CDN加速

3.地图初始化参数配置问题，可能初始化参数设置不合理，例如试图层级过大，地图中心点位置错误

解决方法：

​ 调整地图的初试zoom值，避免设置过大的渲染范围，以及检查地图中心配置是是否正确

4.地图加载顺序问题，初始化时地图配置项还没有准备好

5.免费版的高德地图 API次数没有了

总结：对于地图卡顿/加载不出来的问题，我们可以先排除客观问题，检查网络，已经代码加载顺序，配置项等问题，如果将这些问题排除之后，还是有卡顿，可以做一些提高性能的方法，例如下载离线地图包，按需加载可视地图

1.在项目中使用了哪些地图技术呢？为什么选择使用这些技术呢

我们主要是使用el-amap和高德地图，主要是因为他们提供了精准的地图服务、良好的用户体验和便捷的集成方式，能够满足项目中地块的展示，遥感图层渲染，定位经度等多方面的需求。

2.在地图中如何确保地图加载时能够准备显示指定的地块范围或区域呢

1.首先确保地图加载时显示指定的地块范围，在el-amap和高德中都可以通过设置地图的中心点setCenter和缩放级别setZoom确保用户在打开地图就能够看到该区域。

2.如果地图的视野范围较大的话，可能需要展示一个矩形区域儿不仅仅是单一的中心点，这种情况下，可以通过设置地图的视野范围来确保特定区域显示在地图中，高德是通过fitBounds（）方法来调整地图的显示范围。 对于一个地块，可以先计算其边界框（即最小和最大经纬度），然后使用 fitBounds() 方法来调整地图显示范围：

// 假设地块的经纬度范围为 [minLng, minLat] 到 [maxLng, maxLat]
const bounds = new AMap.Bounds([minLng, minLat], [maxLng, maxLat]);
map.setBounds(bounds); // 调整地图视野范围，确保地块完全显示

3.如果地块数据是需要动态加载通过接口获取的，可以在地图数据加载完成后，监听地图加载的事件并动态调整视角。通常根据地图加载完成后，获取地块的范围，然后使用fitBounds来确保地图展示的该区域

4.或者在地图加载之前，通过接口获取每一个地块的边界框，然后初始化时使用这些信息没然后通过fitBounds来显示这个区域

3.如何在地图上标注地块信息，使用什么组件来实现标注功能。

使用el-amap-marker来对地块进行标记，根据地块的经纬度来设置标记的位置，使用el-amap-window显示该地块的信息。在我们的项目中通常还会使用标记聚合的技术来优化性能。确保地图在显示大量地块时不会出现卡顿。

（标记聚合：是一种地图上处理大量标记时使用的优化技术。当多个标记的位置非常接近时，它们会被合并为一个大标记。随着地图缩放的改变，标记聚合会动态调整。当用户缩放地图时，聚合的标记数量会减少或增加。）

4.如何自定义标记点的图标为ui那边给的图片 和自定义图片设置弹窗的背景呢

自定义标记点的图标：通过el-amap-marker中的icon属性设置图标的路径，或者通过iconStyle设置图标的大小，背景图

自定义弹窗的背景：通过使用el-amap-marker包裹HTML设置弹簧内容和样式背景

5.地图上有很多地块数据，如何保证地图加载的性能

1.首先我们可以数据分片加载；例如将地块数据按照地区加载，不要一次性加载所有数据，动态的加载

2.如果地块数据以标记的形式展示，还可以通过标记聚合技术将相邻标记合并为一个聚合标记，减少页面渲染压力

3.我们也可以对于地图的数据进行图层分类，用户可以根据需要选择性的加载某些图层数据，例如只加载作物分布数据。或者作物品种加载地块

4.我们对地块数据进行了缓存优化，利用浏览器的本地存储或服务端的 CDN 加速，确保相同地块数据不会重复加载。这样既降低了服务器压力，也提升了用户的访问速度。

6.怎么加载遥感图层，如何优化，

我们的项目中使用的是WMS图层来加载遥感数据，我们前端主要是采用了高德地图的TileLayer组件。通过配置WMS服务的url地址动态请求遥感数据，在请求中，设置必要的参数，确保图层数据的准确性和按需加载。

<el-amap-layer-wms :url="it.layerUrl" :params="{ Version: '1.0.0', Format: 'image/png' }" :blend="false"></el-amap-layer-wms>

我们可以将遥感图层分类，像我们的项目中就把遥感图层分成了长势、干旱这些类别，用户按需查看，这样就避免遥感图层大量请求

7.如何确保地图上不同图层之间不会互相遮挡或重叠

1.可以通过控制图层的显示顺序和层级关系来避免图层之间的重叠，例如首先我们可以使用el-amap-layer-tile加载高德的卫星图层，然后通过el-amap-polygon加载地块图层设置图片的相关样式，然后在更具条件在加载遥感图层，以避免不必要的重叠

2.还可以自定义设置图层的透明度来实现，已经自定义图层样式

3.使用z-index来控制图层的堆叠顺序

8.如何获取和展示地块数据，是通过API调用吗 如何处理异步请求

通过调用API接口来获取地块数据，可以使用axios进行请求，请求异步请求处理通常采用Promise和async/await

9.如何动态加载和切换不同的遥感图层呢

通过动态的设置el-amap-layer-wms的url和params 来切换不同的遥感图层。使用 v-show 或 v-if 配合 selectedLayerIndex，控制不同图层的显示和隐藏。

10.如何在地图中实现区域查询功能？例如，用户点击某个区域，展示该区域的相关数据。

基本思路：当用户点击某个区域，然后根据用户点击的区域获取相关的信息,然后展示结果。

1.首先监听地图的点击事件

2.在这个事件中获取当前点的坐标

3.再将得到点的坐标作为参数传到相应的接口中然后得到相关数据

4.然后可以通过el-amap-info-window展示相关信息

11.对于"中国科学院伏羲农场数据指挥中心"的网格体系布局，是如何通过前端技术实现的，在不同屏幕尺寸下如何保证布局的合理性和美观性

我们对于整个项目的的布局，采用了响应式布局技术，使用css媒体查询根据屏幕宽度动态调整元素的样式和布局。对于数据表格来讲，设置合适的列宽和行高，在小屏幕设备上采用折叠式菜单或滚动条来确保数据完整显示且易于阅读。

后续会继续补充，同时会对以上问题进行扩展或者更加深刻的提问