数据分析项目实战，【想稳，前端程序员必经的实践之路

最新推荐文章于 2024-04-24 23:57:07 发布

2024云技术

最新推荐文章于 2024-04-24 23:57:07 发布

阅读量786

点赞数 28

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

本文链接：https://blog.csdn.net/2401_83621004/article/details/137497899

版权

2024年程序员学习专栏收录该内容

291 篇文章 2 订阅

订阅专栏

没有问题，于是检查后端的跨域配置：

也没有问题，百思不得其解后只能灰溜溜的去问老师，最终的问题在于：我客户端的其他请求都是统一配置好的路径：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中进行深度监视，当数据请求完成后进行组件的初始化：当然也可以通过回调来处理，主要目的是延迟初始化，这样组件就能正常运转了。