第1页 / 共28页
第2页 / 共28页
第3页 / 共28页
第4页 / 共28页
第5页 / 共28页
第6页 / 共28页
第7页 / 共28页
第8页 / 共28页
2020北京+天津 前端面试问题.docx
首先在el-form标签加上ref和:rules属性配置校验规则对象，并且在每个el-form-it
6 vue 路由跳转四种方式
1 router-link
2 this.$router.push() (函数里面调用)
3 this.$router.replace() replace 瑞普雷斯
4 this.$router.go(n)
先进行axios配置，封装到了api ，然后进行默认配置基准地址与请求头携带token
18 VUE是什么?
2 CSS3 盒子模型(Box Model)
3 CSS3 弹性盒子(Flex Box)
7 HTML常见兼容性问题
10 什么是事件的冒泡和捕获？
方案3-document.domain 通过修改document.domain来跨子域
方案4-window.name 使用window.name来进行跨域；
方案5-window.postMessage
2 简单描述下同步和异步的区别，并举例实际应用中哪些是同步，哪些是异步？
3 简述AJAX的工作原理
2 你知道的HTTP 请求方式有几种？
16 Vue与Angular以及React的区别？
2 webpack是怎样配置的，简要描述一下过程
1 git的作用是什么，有哪些命令，这些命令的作用是什么？在pull时，如果只想要文件的一部分而不是
4 js实现数组去重怎么实现?
负责项目的搭建，与产品、UI 沟通，规范代码书写，页面布局的实现并完成登录功能，权
限管理页面，数据统计页面
1. 使用 vue-cli 快速构建后台管理系统单页应用；
2. 根据 UI 组设计稿，快速搭建后台管理系统中登录功能页面、后台首页页面、
用户管理页面、权限管理页面、用户反馈页面、以及数据统计页面六个页面的基本布
局
3. 登陆功能完成获取数据，验证登陆信息，验证是否非空，用户名是否正确，
用户密码是否正确。提交完数据并验证成功后就实行页面跳转。
4. 首页的侧边栏是通过 element 组件做的,通过后端给的数据渲染,根据不同的
权限给到不同的功能,以达到侧边栏栏的页面渲染。 完成请求拦截器与响应拦截器，
实现实时请求；
5. 完成权限管理中页面的数据渲染与用户列表的结构样式及数据渲染
6. 实现数据统计页面的数据驱动视图；
7. 实现数据统计页面页面渲染，动画实现，使用 ECharts 实现数据统计分析
8. 利用 Vue 的双向数据绑定，组件间的数据交互，减少 DOM 操作，提升代码
维护性
vue全家桶：
Vue-cli 项 目 构 建 工 具 vue-router 路 由 vuex 状 态 管 理
axios http 请 求 工 具
webpack
1 vue 命令
v-if：判断是否隐藏；
v-for：数据循环出来；
v-bind:class：绑定一个属性；
v-model：实现双向绑定
v-on 指令：添加一个事件监听器 ；
2 Vue 项目如何启动
命令 npm run build
bou 的
3 如何使用 vue-cli 构建项目
开始运行 npm run dev
访问项目 ocalhost:8080 楼购后死特
4 表单验证
首先在 el-form 标签加上 ref 和:rules 属性配置校验规则对象，并且在每个 el-form-item 标签里定义
prop 属性校验规则，prop 属性跟:rules 里面的每项对应，在 data 里面定义 rules 属性值 ， 然后
element-ui 表单组件 rule 属性校验规则对象，最后给表单组件加 ref 属性，获取组件实例（dom 对象）
在调用校验函数对整个表单进行校验
el-form el 佛 木
Prop 普弱普
5 导航守卫
vue怎么实现页面的权限控制
利用 vue-router 的 beforeEach 事件，可以在跳转页面前判断用户的权限（利用 cookie 或 token），
是否能够进入此页面，如果不能则提示错误或重定向到其他页面，在后台管理系统中这种场景经常能遇到。
使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
beforeEach 比佛义尺 cookie 克 kei
6 vue 路由跳转四种方式
el-form-item el 佛 木 哎 特 木 element-ui 哎 了 门 优 哎
rules 入 了 死
1 router-link
编程式导航 router.push(location)
push 破吃
2 this.$router.push() (函数里面调用)
跳转到指定 url 路径，并想 history 栈中添加一个记录，点击后退会返回到上一个页面 history
kei 死
特瑞
3 this.$router.replace()
replace 瑞普雷斯
跳转到指定 url 路径，但是 history 栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前
页面)
4 this.$router.go(n)
向前或者向后跳转 n 个页面，n 可为正整数或负整数
7 怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？
在 router 目录下的 index.js 文件中，对 path 属性加上/:id。 使用 router 对象的 params.id
Path
排特 params 排儿门斯
vue-router 的原理就是通过对 URL 地址变化的监听，继而对不同的组件进行渲染。每当 URL 地址改变时，
就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有 hash 模式和 history 模式
history
kei 死特瑞
8 vue-router 有哪几种导航钩子？
1、全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。 next 耐四特
2、组件内的钩子；
3、单独路由独享组件
8 Vue 项目中实现 token 验证大致思路如下：
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个 token
3、前端拿到 token，将 token 存储到 localStorage 和 vuex 中，并跳转路由页面
4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应
路由页面
5、每次调后端接口，都要在请求头中加 token
6、后端判断请求头中有无 token，有 token，就拿到 token 并验证 token，验证成功就返回数据，验证
失败（例如：token 过期）就返回 401，请求头中没有 token 也返回 401
7、如果前端拿到状态码为 401，就清除 token 信息并跳转到登录页面
localStorage 楼购 斯到瑞之
9 如何实现权限管理
在根组件 created 钩子里将路由定向到登录页，用户登录成功后前端拿到用户 token，设置 axios 实例统
一为请求 headers 添加{"Authorization":token}实现用户鉴权，然后获取当前用户的权限数据，主要包括
路由权限和资源权限，之后动态添加路由，生成菜单，实现权限指令和全局权限验证方法，并为 axios 实
例添加请求拦截器，至此完成权限控制初始化。动态加载路由后，路由组件将随之加载并渲染，而后展现
前端界面。
Created 可睿的 headers 海的 Axios 哎克车死
Authorization 奥不睿贼神
10 如何配置请求拦截器与响应拦截器
先进行 axios 配置，封装到了 api ，然后进行默认配置基准地址与请求头携带 token
使用 axios 配置请求拦截器(在每次请求的头部加上一个 token)，每次发送请求之前 执行拦截器，拦截成
功，加 token 否则拦截失败 (成功的业务中出现报错)
使用 axios 配置响应拦截器（在每次响应失败的时候判断 token 是否失效）err 获取 状态码 token 失效
清除存储 token 重新登录 登录成功 跳转到登录页面
11 如何完成实时请求
了 setInterval()定时调用 ajax 请求数据
通过 vue-axios 发送 XHR 请求，通过 progress 事件,我们可以据此在浏览器接收新数据期间添加实时数据
progress 普绕古 ruai 思
12 如何实现数据驱动视图
数据统计页面也由 element-ui 搭建，其中数据图表采用了 echarts 插件，将 axios 获取数据及 echarts
的配置项代码放入 methods 中的一个方法里，并用钩子函数 created 调用这个方法，即可点开页面展示
图表。Axios 哎克车死
Echarts 义车死 methods 买色斯 Created 哭睿忒的
13 请说下封装 vue 组件的过程？
首先，组件可以ᨀ 升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目
开 发：效率低、难维护、复用性等问题。
然后，使用 Vue.extend 方法创建一个组件，然后使用 Vue.component 方法注册组件。子组件需要数
据，可以 在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法
Extend 爱克斯 den 的 component 看破嫩特 emit 亿美特
14 vue 中组件直接的通信是如何实现的？
组件关系可分为父子组件通信、兄弟组件通信。
1、父组件向子组件： 通过 props 属性来实现
2、子组件向父组件：
子组件用$emit （）来触发事件，父组件用$on（）来监昕子组件的事件。
父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。
3、兄弟之间的通信：
通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus，之后通过分别调用 Bus
事件触发和监听来实现组件之间的通信和参数传递。 Bus 八四
15 vue 双向数据绑定
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的
setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
数据驱动 是 vue.js 最大的特点。在 vue.js 中，所谓的数据驱动就是当数据发生变化的时候，用户界面发
生相应的变化，开发者不需要手动的去修改 dom。
Object.defineProperty 偶不摘可特 . 笛梵 普绕普特
setter （赛的） getter （该的）
具体步骤：
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，
这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。 observe 额不
则
第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令
对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。 compile
康拍奥
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:1、在自身实例
化时往属 性订阅器(dep)里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()
通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。 Watcher 我
吃 update 啊不得特
第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来
监听自己
的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和
Compile 之间的通信
桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。
16 前端性能优化
（1） 减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托
管，data 缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每
次操作本地变量，不用请求，减少请求次数
（3） 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。
（4） 当需要设置的样式很多时设置 className 而不是直接操作 style。
（5） 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
（6） 避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比
div+css 布局慢。
Style 死袋奥 inner A 那 class 块死 Name 内幕 table tei bout
17 DOM 操作
Vue 可以减少 dom 操作
Vue 通过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，
可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定。
18 VUE 是什么?
vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架与其他重量级框架不同的是，
Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或
既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复
杂的单页应用程序提供驱动。
19 Vue.js 核心思想：
（1）、Dom 是数据的一种自然映射（双向数据绑定）手动改变 DOM 非常麻烦使用 vue.js
之后，只需要改变数据，通过改变 Directives 指令,当数据发生变化，会通过数据指令去修
改对应的 DOM
（2）、Vue.js 还会对事件进行一定的监听，当我们改变视图（view）的时候通过 DOM
Listeners 来改变数据
通过以上两点就实现了数据的双向绑定
2、组件化
Vue-cli:(它是 vue 的脚手架工具)
作用：帮助我们完成基础的代码（包括：目录结构、本地调试、代码部署、热加载、单元测
试）
组件的设计原则：
1 页面上每一个独立的可视/可交互区域视为一个组件
2 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护
3 展示面不过是组件的容器，组件可以嵌套自由组合形成完整的页面
一 前端相关
1 模块化理解
所谓的模块化开发就是封装细节，供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。
模块化开发的基础就是函数
2 根据设备尺寸做页面自适应
1. 页面中关乎布局的元素都不设置绝对的宽和高，都按百分比来设置。
2. 字体也使用相对大小的字体
3. 用 div+css+浮动 来布局 各个盒子的位置用浮动的，不是固定不变的。
4. 尽量不要使用绝对定位，即 position:absolute 的定位。
5. 根据浏览器的版本做一些 css 的处理
7. css 文件中，根据分辨率设置不同的 css 风格
8. 图片自动缩放，自适应大小
如：img{max-width:100%;}
设置 meta 标签
3
px，em，rem 的区别？
1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长 度单位，
是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸 未被人为设
置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一 个固定的值。
3）rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时， 仍然
是相对大小，但相对的只是 HTML 根元素。
4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是
HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修 改根元素就
成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，
所有浏览器均已支持 rem。
4 用 div+css 网站布局的好处
1：表现和内容相分离
将设计部分剥离出来放在一个独立样式文件中，HTML 文件中只存放文本信息。
2：高搜索引擎对网页的索引效率
用只包含结构化内容的 HTML 代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并 可能给你
一个较高的评价。
3：高页面浏览速度
对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小 得多，
前者一般只有后者的 1/2 大小。
4：易于维护和改版
你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。从以上的᧿述来看，采用 CSS+DIV 对
网站重构可以大大ᨀ 升网站用户与搜索引擎的友好度,CSS+DIV 所以成为目前网页布局 主流.
5 Sass、LESS 是什么？大家为什么要使用他们？
他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数.
LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理， 减少无意义的
机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代
码也可以与 LESS 代码一同编译。
6 实现图片懒加载的原理
先将 img 标签的 src 链接设为同一张图片（比如空白图片），然后给 img 标签设置自定义属性（比如
data-src）,然后将真正的图片地址存储在 data-src 中，当 JS 监听到该图片元素进入可视窗口时，将自定
义属性中的地址存储到 src 属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，
导致服务器响应面，页面卡顿崩溃等。
7 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或
更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie
设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
8 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
简洁版
1 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP，向服务器发起请求；
2 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
3 浏览器对加载到的资源（HTML、JS、CSS 等）进行语法解析，建立相应的内部数据结构（如 HTML 的
DOM）；
4 载入解析到的资源文件，渲染页面，完成。
详细版：
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式
来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过 DNS 解析获取网址的 IP 地址，设置 UA 等信息发出第二个 GET 请求;
4、进行 HTTP 协议会话，客户端发送报头(请求报头);
5、进入到 web 服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，
一致则返回 304;
8、浏览器开始下载 html 文档(响应报头，状态码 200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定 MIME 类型的文件（比如 css、js）,同时设置了 cookie;
10、页面开始渲染 DOM，JS 根据 DOM API 操作 DOM,执行事件绑定等，页面显示完成。
二 HTML CSS
1 CSS3 新特性
1.颜色：新增 RGBA，HSLA 模式
2. 文字阴影（text-shadow、）
3.边框： 圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画 animate @ keyframe 爱了门特 开飞木
9. 在 CSS3 中唯一引入的伪元素是 ：：selection.
10. 媒体查询，多栏布局 @media screen and (width:800px){ … }
11. border-image
12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D 转换
14 字体图标 font-face
15 弹性布局 flex
2 CSS3 盒子模型(Box Model)
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
