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.获取路由对象router
new VueRouter(routes)
4.将router对象挂载vue实例
5.route-link to
6.route-view
2.Elementui
nodejs:前端运行环境,相当于后台的tomcat
npm:包管理工具,相当于后台maven
npm 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、 当发生异常的时候,前后端需要联调--联调是非常浪费时间的