智学无忧(套题)
选择题 | 填空题 | 问答题 | 编程题 | 试题难度 |
---|---|---|---|---|
0 | 0 | 11 | 0 | 比较难 |
问答题
1、项目中遇到哪些困难和问题
最近使用uniapp做了一个兼容三端微信小程序,H5,Android三端的程序,遇到的兼容性问题还是挺多的。我的解决方法就是要分析调试,找到问题的原因就好解决了。
在布局登录页面时,需要登录框垂直居中,在小程序对登录框容器使用高度100vh,使用弹性盒子布局,设置align-items:center就可以了,但在h5端不行,进过调试发现,H5端的导航栏是模拟出来,100vh是包含了导航栏的高度,所以在H5端就不能使用100vh。最后面的做法就是让page的高度为100%,登录框的容器也为100%,page的100%高度正好是去掉了导航栏的窗体高度,这样就兼容了三端。
还有项目要求登录框是椭圆的,我用的是easy-input组件需要样式覆盖才能实现,发现在小程序上不行,原因是easyinput是虚拟化组件节点,添加的class不会被渲染,而在H5端是可以的,只好用view包裹起来,添加class。
兼容性的问题还是挺多的,一般进过分析,调试找出问题的原因,就能够很快的解决。
还有困难就是商品上架的数据比较复杂,接口文档也没有详细说明,就需要经常和后端同事进行沟通交流,理解字段的作用和意义,然后根据需求在前端重构接口所需的数据结构。不仅如此,这个页面还要涉及到笛卡尔积算法来构建商品规格,商品规格表格需要合并相同的选项,涉及到比较多的算法知识,所以花费时间比较多。
还有就是需求不明确的时候经常改需求,导致以前的代码废掉,这个也是很痛苦的,所以在开发前,我们会对需求进行充分的讨论在开始编码
2、你的项目亮点是
我做的一个后台商城系统,个人认为是有几个亮点的,就是用户体验方面做得挺好
第一个是使用组件缓存的方式,防止用户填写的商品信息丢失,商品上架填写的信息很多,也很耗时,如果中途数据丢失就会给用户带来很不好的用户体验。
第二个是令牌过期后,用户在操作时会跳转到登录页面,导致用户体验非常不好,为了改善这一点,我在响应拦截器做了令牌无痛刷新的处理,令牌过期后重新获取新的令牌后再次发送用户的上一次请求,这样用户的操作就非常的流畅。
在技术上来说我个人觉得比较好的地方就是我封装了一个公共富文本框编辑组件,自定义了v-model使用起来非常的方便。
3、你的项目优化 / 你对项目做过什么优化?
针对网络请求的方面的优化,我会这样做
- 路由懒加载,打包工具根据路由分割不同的代码块,访问的时候才去加载
- 对请求的文件进行压缩,减少体积
- 减少网络请求,和后台商量,将需要请求的数据合并到一个请求里完成
- 与渲染相关的文件先请求,对于后操作的文件可以等页面渲染出来后在请求
- 将图片视频等资源放到cdn服务
对项目有复用的页面功能,我会抽取到一个公共组件实现;有复用的功能就会封装到util.js里,避免写重复的代码,方便项目的维护
还有用户体验优化,在开发中很注重用户体验,我做了令牌无痛刷新、组件缓存、UI操作逻辑优化
项目做完后,我们在再次走读代码,优化代码执行的流程,减少循环的次数,优化表达式这些工作。
以上是我开中做得比较的多优化方式
4、你觉得项目有哪些不足的地方
我个人不足的地方因为需求不是很理解需要经常修改代码,在这方面要和产品多沟通,自己平时也应该多了解行业知识。
公司的接口文档也是需要改进的,需要对接口的使用进行详细的描述,有示例是最好的
最近上线的系统有用户反馈用久了会变慢,这个地方应该组件缓存太多导致的,需要在改进一下
5、权限怎么配置 / 权限是怎么实现的 / 怎样去实现权限按钮
我们的后台是的多用户系统,不同的用户权限不一样,我们的权限方案是这样的
用户登录成功后会返回对应的菜单,也会返回该用户对应的路由,前端需要动态加载路由,这样可以有效的防止通过路由来越权访问。
有些权限需要精确到按钮,我的做法是自定义全局指令,在mounted钩子做逻辑处理,绑定按钮参数不在权限列表,说明没有权限,就做DOM移除,不显示按钮。
6、有遇到过跨域吗,怎么解决的 / 谈一下你对跨域的理解,包括如何解决跨域?
跨域是浏览器的同源策略造成的,是对js安全运行的一种策略。那么在微信小程序和APP开发就不存在这个问题,所以在开发网站时会才存在这个问题。
我们团队开发项目时都是采用代理跨域解决的,代理跨域的原理就是由开发服务器去访问接口服务器,这样是不存在跨域,然后由开发服务器返回结果。所以项目上线后代理跨域是没有用的,要解决这个问题我们公司的做法是让后台设置允许我们的站点可以跨域访问。如果不这么做,那只能把前端项目部署到接口站点,这样就不存在跨域问题了。
7、如果后端的传的数据不是你想要的你会怎么做
我遇到的一般是有两种情况
第一种就是没有返回前端需要的数据,这种情况需要和后端同事沟通解决。
第二种情况是有返回,但结构复杂,数据不直接,我会通过计算属性,对数据结构重构前端期待的,增强了我在前端处理数据的能力。
8、axios / axios封装流程
为了更好的适用项目需求,对Axios封装是有必要的,封装大体流程是这样的:
创建Axios实例同时配置http请求的相关信息,接口的基路径,请求头的content-type,接口请求超时的时间。
在请求拦截器附加token到请求头,在拦截处理器做令牌无痛刷新
然后暴露项目中常用的功能post、get、upload,这样使用起来就很方便。
9、vue的打包上线流程?
上一个vue3项目就是我来打包上线的,在打包之前在vite.config.ts做一下配置,去掉console和debugger语句,为build命令设置build-only参数,目的是在打包时去掉TS类型检查。然后就可以使用yarn build 打包项目到目录dist,生成标准的html、js、css文件。
在上线前,我会通过yarn preview本地预览,测试出一些基础性的问题,然后修正在重新打包。
上线的过程就是将这些打包后的文件上传到web站点,我们公司是通过宝塔来管理站点,直接通过宝塔来上传就可以了,当然也可以通过FTP工具上传。上传之后要做一下测试。
10、共享登录状态怎么实现?
这个功能在我们的项目是没有这样做的,让我想想(假装你在思考问题)
我想这样做应该可以,登录状态最重要的是通过token来验证的,我现在的项目token是保存到状态管理,如果要实现共享登录状态,那么可以把token放到cookie,通过cookie的domain属性设置要共享登录的域名,这样共享的站点也可以访问到这个token,共享登录状态就实现了。