JAVA前端

Java前端相关的面试在企业中是非常重要的一环，因为前端是企业展示给用户的第一屏，也是用户体验的直接来源。要顺利通过前端面试，首先要掌握基本的HTML、CSS、JavaScript等前端技术，包括常用的前端框架和库如jQuery、Vue.js、React等。其次，需要了解前后端分离开发的基本概念和技术，如Ajax、RESTful API等。另外，熟悉前端工程化开发的流程和工具，如Webpack、npm、Node.js等，也是非常有帮助的。同时，了解Java后端开发的相关知识，如Spring、Hibernate、MyBatis等框架，可以帮助应聘者更好地理解前后端数据交互和接口开发。最后，良好的沟通和团队协作能力也是很重要的，因为前端工作通常需要和设计师、产品经理、后端开发等团队成员密切合作。

概述

前端面试题分两块：jQuery时代以及前后端分离时代；千万不要觉得jQuery时代已经过去，一定不会被问到；还是有30%的概率问到，因为它能够筛选出真正有开发经验的人，同时很多公司的老项目依然会用到jQuery。

一、jQuery时代 2018年之前为主流，常见问题如下

1.你的前端能力怎么样？面试官考核的点是HTML、css、js基本的样式调整能不能解决，如盒子模型、浮动、定位等基本问题。岗位可能涉及少量前端工作。2.jQuery常用的方法
3.ajax有哪些属性
4.bootstrap、easyui、layui用过哪些组件
以上三个能力就是侧面考量面试者的开发经验，答的越多越好。

相关参考

一、jQuery时代	2018年
1.HTML	网页结构
2.css	美化
3.JavaScript	特效
前端能力怎么样？
10个人以上研发团队
盒子模型，定位，浮动4.jQuery	2012-2018	简化dom操作
ajax：有哪些属性设置，同步异步的设置
url/data/success/datatype/type/async
var phone = 0;
$.ajax({url:..,async:false,success:function(data){...phone=data.phone}
});
....
alert(phone);
sendMsg常用方法：
html/val/css/attr/append/next/show/hide/each/
find/ajax/get/post/getJSON..5.Bootstrap	2016-2018	前端快速布局
6.easyui	2012-2016	后端快速开发，组件api丰富
7.layui		2018-2020	比easyui更美观
常用组件？
1.form控件
2.布局控件	
3.树形控件
4.选项卡控件
5.数据表格控件
6.窗体控件

二、前后端分离时代 2018年之后慢慢兴起，成为当下主流开发模式

二、前后端分离时代 2018年
1.vue
概念：渐进式框架
mvvm模型：model、view、viewModel（虚拟dom）
它的出现能够让开发者专注于数据，不需要渲染dom节点
生命周期？
beforeCreate，Created，beforeMount，mounted，
beforeUPdate，updated，beforedestroy，destroyed
vue实例初始化会触发的钩子函数？
beforeCreate，Created，beforeMount，mounted
new Vue({el:'container',data(){return {};}
})语法：
常用指令？
v-model,v-bind:属性,v-on:事件
v-if,v-for
v-if/v-show test？
v-if 网页结构压根不存在，F12看不到
v-show 网页结构存在，F12能看到，被display:none隐藏了组件：
①相互传参：
父传子：props
子传父：$emit
②路由1.定义两个组件2.定义路由关系var routes=[{path:'/home',compontent:HOME}]3.获取路由对象routernew VueRouter(routes)4.将router对象挂载vue实例5.route-link to6.route-view2.Elementuinodejs：前端运行环境，相当于后台的tomcatnpm：包管理工具，相当于后台mavennpm install -g/-s/-d 全局/打包上线/开发环境axios中get/post区别？跨域怎么解决？this.axios.get(url,{param:json}).then(..).catch(..)this.axios.post(url,json).then(..).catch(..)qs.stringfy(obj)跨域现象：403 fibbdon，origin跨域解决方案：set.head(信任的主机ip)设置信任的请求方式Vuex的理解相当于前端数据库，管理整个前端的变量state.js    存储变量mutations.js	同步修改变量值actions.js 	异步修改变量值getters.js 	获取变量值jwt的理解概念：管理token令牌的解决方案java.http.HttpServlet${empty user}1.用户第一次发送登录请求，会将用户信息与密码与后台数据库进行校验，校验通过，会将用户信息转换成jwt串，放入响应头中，发送给前端；2.前端SPA会有响应拦截器，将响应头 response header中拦截获取jwt串，存储到Vuex中；3.用户第二次发送访问资源的请求，会被前端SPA的请求拦截器拦截，从Vuex中获取jwt串，放入请求头中，发到后台；4.后台会有jwt的过滤器，会从中拦截并且获取request header的jwt串；5.解析jwt串，反向得到用户信息，进行redis存储的用户信息校验；校验通过则放行；

标准

一、jQuery时代

1.CSS选择符有哪些？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）

2.描述下JSON对象的两个很重要的方法

JSON.parse() //JSON字符串转换为JSON对象
JSON.stringify() //JSON对象转化为字符串

3.eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');

4.web前端开发，如何提高页面性能优化？

内容方面：
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对CSS：
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式 (Avoid CSS Expressions)
针对JavaScript ：
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4. 移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image)：
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化

二、前后端分离时代

5.使用Vue的好处

vue两大特点：响应式编程、组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

6.Vue的生命周期

beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

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

触发 下面这几个beforeCreate, created, beforeMount, mounted ，并在mounted的时候DOM渲染完成

8.vue几种常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

9.v-if 和 v-show 区别

v-if按照条件是否渲染，v-show是display的block或none

10.computed、watch、methods的区别

computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
methods方法，函数，绑定事件调用；不会使用缓存

11.什么是js的冒泡？Vue中如何阻止冒泡事件？

js冒泡概念：当父元素内多级子元素绑定了同一个事件，js会依次从内往外或者从外往内（？）执行每个元素的该事件，从而引发冒泡js解决冒泡：event.stopPropagation()
vue解决冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

12.vue 组件通信

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。也可使用vuex

13.axios的特点有哪些？

1、axios是一个基于promise的HTTP库，支持promise的所有API；
2、它可以拦截请求和响应；
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；
4、它安全性更高，客户端支持防御XSRF；

14.为什么要进行前后端分离？前后端分离的优势在哪里？劣势在哪里？

优点：前端专门负责前端页面和特效的编写，后端专门负责后端业务逻辑的处理，前端追求的是页面美观、页面流畅、页面兼容等。后端追求的是三高（高并发、高可用、高性能）让他们各自负责各自的领域，让专业的人负责处理专业的事情，提高开发效率
缺点：1 、当接口发生改变的时候，前后端都需要改变2、 当发生异常的时候，前后端需要联调--联调是非常浪费时间的