1.二级路由界面底部Tabbar隐藏
通过vue-router配置完全局路由后, 在项目中一级路由界面是需要有底部tabbar的, 但是由一级界面过渡到二级界面是不需要的, 如下图所示：
解决方案: 在路由选项中有个meta属性, 可以在该属性中传一个字面量对象记录是否显示底部的tabbar, 然后在页面中做判断即可！
前端页面处理:
2.拉加载数据中获取数据重复
我在做推荐版块的列表数据加载时, 自己在后端写好了get的请求接口, 前端发起get请求, 前面几次加载都很正常, 后面上拉加载的时候总是多个重复数据被同时拉下来, 如下图所示：
上拉加载用mint-UI做了界面的提示, 而且也在action中设置了回调, 只要数据没有下来, loading框是不消失的, 但结果还是如下图所示：
最后请教老师, 终于解决了该问题, 主要的方案思路是: 客户端每次发请求时把本地最后一条商品的id传给后端, 后端在接口中写查询语句的时候用limit做限制就保证了数据的不重复了。看来自己既写前端又写后端, 需要考虑的因素还是很多！
3.超坑的跨域
问题描述: 主要是前端请求图形验证码引发的血案，因为我服务器的地址是localhost:3000, 所以我在请求图形验证码的时候，使用的是如下的方式：
而且通过浏览器访问也是OK的：
但是问题在于：我在服务器端是用session保存了该验证码，用于前端请求时来做前后端比对的，但是每次请求都不能从session中获取，始终的undefined。此刻，我第一反应是跨域，检查前端页面：
没有问题，于是检查后端的跨域配置：
也没有问题，百思不得其解后只能灰溜溜的去问老师，最终的问题在于：我客户端的其他请求都是统一配置好的路径：http://localhost:3000, 但在请求图形验证码出使用了：http://127.0.0.1:3000/api/captcha ，在后端验证是localhost:3000和127.0.0.1:3000代表的不是同一个客户端，所以始终拿不到值，改了之后瞬间好了。非常小的一个细节，粗心、粗心！
4.配置vuex中的细节点分析
一开始不是很理解为什么要绕这一圈来使用vuex进行状态和数据的管理，当使用了之后才发现中大型项目中使用vuex进行数据管理是十分有必要的，当你理解了它的运作机制，流程就显得异常简单了，此处借用老师课上的一幅图：
使用vuex进行状态管理要注意的一些细节点：
-
如果项目比较大，一定要把state，action，mutation划分成独立的文件夹，这样以后在进行状态管理的时候非常方便，目录结构可以如下图所示：
-
action向mutation直接commit数据的时候，要注意参数保持一致，否则会出错，如下图所示：
-
在请求网络数据时，一定要在action中处理，主要是通过async和await进行异步和同步，mutation中因为是唯一修改state的地方，所以始终得是同步的。
vuex中大致要注意的细节差不多就这些，其它的都是按照固定流程处理即可。
5.node连接MySQL数据丢失
问题描述：第一次发起请求的时候，连接数据库都是正常的；但是第二个接口发起请求时，数据库就连接不上了，会报错说连接丢失。
原因分析：因为每操作完一次数据库就关闭了数据库连接，再次访问的时候就找不到连接了，但是连接又不能不关闭，问题在于我把连接数据库的代码没有放到db.query的函数中，而是放在外面，这样就导致连接只生成一次，关闭了以后，第二请求时得不到连接。
解决方案：直接写好一个数据库连接文件，用 module.exports = conn;输出，这样每次访问都是一个新的请求。
6.node连接mysql数据池一定要释放
使用node连接mysql进行数据交互一定要释放数据池，不然请求几次之后会出现“一直请求中”的状态导致无法完成交互。
如下图所示：
7.页面刷新后vuex中状态被清空
- 解决方案一：localStorage
使用localStorage进行数据本地化，但电商类型的项目我感觉并不是太适合，因为localStorage是长时间缓存，有可能导致数据不同步。
- 解决方案二：判断数据是否存在，不存在重新从服务器端获取，或者可以进行路由懒加载保持数据在内存中也是可以的。
8.nextTick的使用
问题描述：在使用自定义组件的时候，或者使用第三方的组件（轮播图等），因为数据是异步获取的，所以组件初始化会在数据获取之前完成，此时可能导致组件无法正常工作，就拿轮播图举例子，正确的写法是在watch中进行深度监视，当数据请求完成后进行组件的初始化：
当然也可以通过回调来处理，主要目的是延迟初始化，这样组件就能正常运转了。
nextTick主要作用在于将回调延迟到下次 DOM 更新循环之后执行;
在修改数据之后立即使用它，然后等待 DOM 更新;
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！
档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！**
[外链图片转存中…(img-HoznOyLJ-1712548987649)]
[外链图片转存中…(img-5VHaSsY7-1712548987649)]
