前端面试总结

190 阅读4分钟
  1. CDN是什么? 从哪里来的 内容分发网络, 国内最常用的付费平台是七牛CDN

  2. 接口出现跨域了, 你是怎么处理的

  • CORS: 后端通过设置响应头 Access-Control-Allow-Origin 来允许某个域名是否可以跨域访问
  • 代理服务器: 通过配置 vue.config.js 中的 devServer 的 proxy 选项进行处理 (正向代理代理的是客户端, 反向代理代理的是服务端)
  1. 至少找一个能访问的项目

  2. 除了变量、嵌套,你还使用过哪些和 Less/Sass 相关的特性

  • 混入/计算/函数/判断/循环
  • 在 sass 中会用到 mixin 混入, 用 @mixin 定义, 用 @include 调用插入
  • 在 vue 中也会用到 mixin 混入
  1. 我作为这个系统的使用者, 你来描述下我该怎么用?

  2. 介绍一个你封装的组件, 用到了哪些技术点?

  • 作用域插槽: 可以在父组件拿到子组件的数据, 在父组件加工处理后再交给子组件使用
  • 传值和检验、插槽和作用于插槽、自定义事件
  • 每一个路由页面的面包屑组件、每一个路由页面的公共标题、编辑和新增功能的组件封装、上传组件。。。
  • 第三方的UI组件、element UI、Vant
  • 每一个 .vue 文件就是一个大组件,一般称为业务组件
  1. 登录的流程是怎样的? 前端收集数据 => 校验数据 => 提交数据到后端, 后端返回 token => 前端拿到 token 后, 先存储到本地持久化, 再同步到 Vuex (方便使用和响应式)

  2. 说说你们公司开发项目的整体流程?

  • 产品经理根据第三方用户的需求, 并画出原型图
  • 召集前端/后端/设计/测试一起开会, 讨论需求的合理性, 大概的进度
  • 相关的部门负责人拿到原型图后拆分模块并分配任务
  • 设计师根据原型图设计出设计图
  • 前端根据设计师设计的设计稿进行还原(切图)
  • 根据后端提供的接口, 进行联调
  • 开发完毕之后(这可能会被问到 git 工作流), 交给测试人员进行测试
  • 测试完成之后负责人打包上线
  1. Axios 的使用或封装是怎么进行的?

image.png

  1. 在介绍自己做过哪些模块的时候, 不要说具体做了几个项目, 简历中介绍自己做过人资或面面中所有模块也没有关系

  2. 后端怎么向你提供接口文档的? SwaggerUI 框架, 可以生成接口文档, 能够在线查看接口 并能 在线进行接口测试(就不需要用 postman 进行测试了), 然后部署到公司内网, 给我提供网址

image.png

  1. git 工作流是怎么回事? 组长会建立三个分支 master => 打包上线 release => 测试(测试人员可以拉取这个分支的代码, 自行打包上线) develop => 开发分支(会基于此分支创建自己的功能分支) feature/tags => 功能分支, 会在此分支写分支, 最后把写到的代码合并到 develop 并提交

  2. 你是怎样使用 mock 进行发送请求获取模拟数据的

image.png

  1. 和 vue 相关的性能优化的手段你考虑哪些?
  • v-if 和 v-show
  • v-for 循环的时候加 key
  • v-for 和 v-if 不要放在一行使用
  • computed 和方法优先使用 computed
  • 路由懒加载 / 组件懒加载 / 图片懒加载
  • 组件的异步加载
  • keepAlive
  • 异步组件 / 动态组件(component 配合 is) / 组件缓存 / 路由缓存
  1. 图片上传 与 图片预览是怎么做的?

image.png

  1. 界面访问控制怎么做的? 在全局路由前置路由守卫中, 拿到用户 token. 如果 token 存在时, 如果跳转 /login 页, 则强行跳转首页, 如果跳转其他页面, 则 next 放行; 如果 token 不存在时, 如果跳转白名单, 则 next 放行, 如果跳转首页, 则强行跳转至登录

  2. 权限是怎么处理的?

image.png

image.png

  1. 打包过程?

image.png

  1. 移动端适配怎么做的?

image.png

  1. 移动端开发有碰到过什么问题吗? 去查一查