2024年前端最全web开发软件，jquery模态窗口，2024年最新Web前端高级面试framework

2401_84411323

于 2024-05-12 20:11:02 发布

阅读量972

点赞数 27

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411323/article/details/138765587

版权

程序员专栏收录该内容

218 篇文章 1 订阅

订阅专栏

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

二级版块主要做了首页的二三级购物流程页面。基本上把电商项目的整个流程跑通了。

商城项目用到的技术点主要包括:

2.服务器端

服务器端主要用的是Node的express框架搭建的应用服务器, 自己定义了项目中需要的接口, 主要基于post/get。服务器端没有进行深度的开发，主要实现了对数据流的增删改查，为客户端进行动态数据支撑。

下图是服务器端定义的部分接口

[站外图片上传中…(image-64e2a-1619332697948)]

数据库用的是MySQL，没有用mongoose，感觉还是关系型数据库使用更加灵活一点。主要是单表和多表关联查询，基本的SQL语句也能搞定。

二、项目开发中坑点记录

虽然是跟着视频一步步学习的，但是自己在动手做的时候还是遇到了各种奇葩问题，在写完项目后总结记录下，一方面方便自己回顾，另一方面其他朋友遇到类似的问题可以参考借鉴。

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的地方，所以始终得是同步的。