建设一个招聘网站,wordpress客户表单数据库,邢台本地网站,网站上的流动图片怎么做的项目场景面试题
如何防止短信验证码被刷
问题场景
添加倒计时和图片滑动验证#xff0c;避免不必要的资源浪费
发送短信验证码需要费用发送短信消耗服务器资源
公司的图片、视频、文件资源如何存储的
传统模式
分开存储到数据服务器#xff0c;托管服务器到云端 缺点避免不必要的资源浪费
发送短信验证码需要费用发送短信消耗服务器资源
公司的图片、视频、文件资源如何存储的
传统模式
分开存储到数据服务器托管服务器到云端 缺点
数据服务器压力大需要专人维护服务器存储数据需要成本
云空间
专业的服务器管理团队提供空间、域名、带宽等 vue项目打包时有些静态资源图片路径不正常可以使用云空间 图床存储项目的图片
项目中的所有数据操作方案
数组 for循环遍历 缺点当多维数组时需要多重循环 map操作数据
console.log(arr.map((item,index){return item
}))filter 从数组中筛选出符合条件的数据
console.log(arr.filter((item,index){return item.id 1
}))reduce reduve(prev,cur,index,arr)
prev是上一次调用回调的返回值如果是首次执行就是初始值cur是当前要处理的元素index是当前元素的索引arr是数组本身
//求和
//10是prev的初始值
let sumarr.reduce(function(prev,cur){return prevcur
},10)
//如果回调函数没有返回值prev第一次是初始值第二次就是undefinedjson数据 for遍历操作 只能使用for in 因为json数据没有length属性 forEach操作
页面代码在浏览器是如何运行的
cssom
css成为树状结构提供api操作css 包括model和view model:样式表规则和模型部分 style/link创建的 view:元素视图相关的api部分 分为窗口、滚动、布局的API
浏览器加载规则
构造DOM和CSSOM构建期间如果遇到js阻塞DOM和cssom优先执行js根据dom和cssom构建渲染树计算每个可见元素的布局并渲染到页面上如果js操作DOM浏览器可能对元素进行重绘或重排
web3.0的助记词如何转换为私钥
web3.0
是互联网发展的阶段主要强调
去中心化数据和程序在分部署网络中运行同步数据运行在区块链基础上用户数据主权区块链技术可以同步数据每个节点都有一组相同的数据语义网智能化透明性和信任度
助记词生成
需要bip39 包,生成助记词12个单词用于方便用户记忆和恢复私钥 bitcore-lib 助记词生成私钥是长字符串用于生成数字签名证明账户所有权
登录鉴权的实现过程
实现方式
角色自定义权限 每个菜单对应资源id创建角色时分配资源数组 用户可以有多个角色再加上自定义权限
用户登录后获取自定义权限和角色权限取交集将资源树存储到pinia中动态添加到router路由中
角色数据字典 数据字典所有权限预先定义好等待角色匹配 优点是不用重新请求服务器缺点是角色权限无法动态修改且字典可能较大 权限码[:] ‘’
动态路由的使用
路由表中根据用户权限不同添加不同的路由登录鉴权时使用 addRoute(route)可以把路由添加到router/index.ts中然后将路由表存储到pinia中刷新时router/index读取pinia中的路由 难点在于和后端规定路由数据的格式
项目中组件如何划分
组件分为容器组件和展示组件
容器组件最外层组件包裹内容、数据抓取展示组件数据渲染 导致产生较多的展示组件
根据数据划分
有调用接口就是单独的组件动态没有调用接口静态 缺点主文件的代码较多
遇到bug是如何解决的
配置类型bug
加载顺序不对版本问题可以看下早期的项目的包的版本号 代码bug 打断点调试、console输出中间结果 样式bug 检查CSS选择器优先级、浏览器兼容性测试
怎么防止恶意登录
恶意登录分类
猜测密码 – 暴力破解 根据页面路由寻找代码漏洞
防御手段
路由拦截器未授权token时直接返回登录页面验证码图片、文字、滑块验证码令牌机制token有狭隘性可以生成唯一校验码与后端进行比较前后端都进行数据过滤隐私数据传输的时候进行加密SHA256加盐加密关闭不需要的端口和服务频繁登录失败后锁设备
websocket的了解
在单个TCP连接上进行全双工通信连接建立后客户端和服务器都可以随时发送数据帧无需等待对方发送或确认
握手过程
websocket连接开始于普通的HTTP请求使用特定的Upgrade和Connection头来指示服务器如果服务器同意升级连接发送带有101状态码的HTTP响应并且包含Upgrade:websocket和Connection:Upgrade头
心跳机制
客户端与服务器定期发送心跳消息接收到心跳包的一方需回应确认消息如果没有收到确认消息认为断开连接
数据发生变化视图没有更新
产生原因vue2中使用defineProperty进行数据劫持无法对后续更新的数据进行操作 解决方案
使用this.$set(obj,key,value) 对改变的数据赋值强制更新this.$forceUpdate()深拷贝
vue为了提高性能会对数据变化进行批量处理patching在所有变化完成后一次性更新DOM如果数据变化后立即操作DOM可能出现问题 可以使用nextTick方法
大文件切片上传
业务背景
需要上传视频或高清照片等传统的文件上传比如element-plus中的upload组件
实现思想
将一个大文件切分为很多小文件每个小文件不超过100k支持断点续传
选择上传文件后获取上传文件对象大小、类型等信息创建FileReader对象arraybuffer创建缓存对象文件转为二进制流缓存用md5加密同时生成最终文件名根据固定大小(比如100k)切片得到切片数量如果切片过多调整每个片的大小比如文件大小/100为每个切片取名hashindex实现断点续传接口返回当前已传的文件名和切片序号合并已传的文件每上传一个就再合并一下
项目中的自定义指令
项目背景
在按钮级的权限中用到了自定义指令不同权限的用户显示不同按钮
实现
main.js中全局引入自定义指令v-permission写在directives下权限规则存放在字典中用户登录时已经将权限存储在pinia中在指令中根据权限判断是否显示如果没有就removeChild移除当前元素
解决长时间保存token的安全问题
token通过pinia存储在localStorage中请求时携带在header-authorization中
加密存储tokencrypto-js md5使用令牌绑定token用户的特定信息IP或设备频繁定期更换token有效期之后自动更新token身份验证如提供另一个配置如手机验证码
渲染较多数据时怎么保证不卡顿
分页
滚动到底部时再请求下一分页的数据
懒加载
监听滚动事件向后端再次发送请求
虚拟列表
当后端返回较多数据时浏览器渲染大量DOM节点会导致卡顿可以使用虚拟列表只对可视区域的元素进行渲染
实现原理
固定dom节点数量通过修改dom节点的内容而不是重新增加dom节点来实现列表的更新
监听页面滚动获取滚动的高度scrollTop根据scrollTop计算出当前展示的数据的index根据当前的数据在列表中的index对列表进行偏移translate
小程序怎么适配iPhone及Android的底部导航/顶部区域
安全区域忽略底部、刘海屏等的影响 小程序可以使用uni.getSystemInfo获取屏幕高度与安全区域 最顶部的容器增加padding-top就行了
提升首页性能
uniapp通过uni.preloadPage设置首页预加载缓存首页的组件image-webpack-loader进行图片压缩减少重排尽量用transform代替位置和尺寸的修改第三方组件可以使用cdn服务器进行分发
vue和uniapp分别怎么打包和发布的
vue打包
npm run build 需要配置vite.config.js中设置base为/路由模式设为hash模式如果是history模式需要服务器支持history模式否则会404
uniapp打包
前端SEO优化
页面设计扁平化利于爬虫获取页面信息重要标签包含关键词比如h1alttitle等标签语义化能使用p就不用font-weight:bold页面加载速度尽量快尽量静态化网站添加必要的404页面复杂网站添加站点地图添加title description keywords
vue是SPA单页面应用对SEO不友好
可以使用SSR服务器端渲染使用nuxt实现静态化使用预渲染的插件
如何解决接口安全
网络传输数据存在安全问题
加密算法
ASE对称加密 crypto-js包密钥和偏移量
移动端点击事件300ms延迟
产生原因
移动端浏览器有双击缩放功能点击之后在300ms内检测是否再有一次点击有的话就缩放网页因此造成单击事件有300ms延迟
解决方案
使用tap事件在移动端使用fastclick.js库浏览器设置不能缩放meta中设置user-scalableno
移动端点击穿透问题
产生原因
移动端混用click和touch时产生 页面中有B元素在A元素之上B元素的touchstart事件上注册回调函数隐藏B元素但是A元素的click事件也被触发了。是因为移动端浏览器事件执行顺序touchstarttouchedclick而且click有300ms延迟
解决方案
B元素设置消失动画事件大于300ms使用fastclick库
前端如何减少http请求
为什么需要减少
发生http请求后大致有DNS解析、TCP握手、服务器接收请求、解析请求、返回响应等阶段其中不管返回的数据有多小都要耗费前面网络连接的时间同时过于频繁的http请求会增大服务器压力
如何解决
如果是请求脚本和样式对它们进行合并实现接口缓存缓存期间请求同一个接口接口地址、请求参数、请求类型一致将不会重复发起请求直接使用已缓存的数据。请求图片资源时使用雪碧图启用http2可以在一个TCP连接上并行发送多个http请求
如何优化搜索
增加即使搜索反馈让用户看到相关的搜索建议可以使用虚拟列表实现分页或无限滚动功能让用户方便地查看更多搜索结果高亮关键词使用v-html懒加载延迟加载搜索结果中的图片or其他资源异步加载搜索结果避免阻塞主线程
对前端的定位理解和后端、UI沟通中遇到过什么问题
前端是最接近用户的人软件最直观的感受反应到前端交互体验更是前端开发的核心点。开发中要和UI、产品、后端、测试都有频繁密切的沟通和UI遇到的问题就是UI设计品味比较高要求前端一比一复刻但是实际上uniapp现有的组件完全可以满足功能需求如果自定义组件需要耗费时间与精力比如UI曾要求在个人名片加个目录样式比较花哨功能也比较复杂就展示现有组件的优势、和ui讨论简化设计方案建议先实现基本功能后续再优化完善。和后端沟通中深刻体会到一定要先对业务梳理清楚约定好数据格式再讨论技术细节否则如果在前端接收到数据再进一步处理一定程度影响页面性能一定要有理有据的去和后端讨论不然后端只是觉得增加他工作量团队讨论中产品和UI可能只是考虑功能的大方向比如他们提出发布项目之后要进行审核但是实现的时候就有很多细节比如审核期间能否编辑、是否会多次审核、是否需要保留审核记录等
