前端学习记录
安和橋北
我不怕千万人阻挡,只怕自己投降
展开
-
nodejs运行后报错Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
实际上这里涉及到数据库操作异步的问题。据我推测,db.query()是异步的,也就是说两次数据库操作可能会同时发生,也就意味着可能同时发生两次res.send()操作,从而出现错误。知道上述原因之后就好解决了,直接把第二次db.query()放到第一次db.query()的处理函数中。在node中,res.send()是不能被同时调用两次及以上的,也正好印证了报错信息中所说的。最开始我想当然的把两次数据库操作并列书写,结果就报错了。以上逻辑需要用到两次数据库操作,即。原创 2022-11-23 22:22:10 · 2011 阅读 · 1 评论 -
初学node踩的坑
1. npm init -y想要在当前文件夹中包含package.json文件,要执行npm init -y命令。这要求文件名必须是英文的,不能包含中文和空格!2. npm install xxx 和 npm i xxx这两个的作用是相同的,直接用i即可。3. npm是全球最大的包网站,里面几乎涵盖了所有你需要的包暂时只有这两个,之后再补充...原创 2022-05-18 22:48:08 · 186 阅读 · 0 评论 -
css的less预处理器学习小结
写在前面由于时间原因,笔者在此仅整理一些最常见的less用法,并未涵盖所有的内容。以后如果在项目的过程中用到了其他的内容,还会再进行补充。 如果以下内容有疏漏错误的地方,还请各位读者指正。1. 嵌套 nest在原生的css中,如果我们要对父选择器下的子选择器进行单独的样式书写,必须要在父选择器的样式下,再把所有的类名全部重复一遍。这样就会导致:代码冗杂,重复度高,可读性不强,层级关系不能很好的体现所以less为我们提供了嵌套的写法,允许将子选择器的样式写在父选择器的花括号里,有了更强的可读性下原创 2022-04-27 17:17:32 · 1739 阅读 · 0 评论 -
基于vuex的数据持久化处理
一、基于vuex的数据持久化存在问题:前端在使用vuex存储数据的时候,一旦页面刷新,所有之前存储的数据就会丢失。这是因为js代码运行在内存中,代码在运行时,所有的变量和函数都是保存在内存中的,因此在刷新时,之前申请的内存会被释放,js脚本会被重新加载,变量重新赋值。此问题映射在本项目上的体现:为了更直观方便的处理数据,一方面在数据库中设置了服务类型表,另一方面在前端视图层处理时,将服务列表里的类型数据都统计一遍,存放在vuex的state中。为了提高本项目的执行效率,我在vuex中设置了一个fl原创 2022-04-18 21:43:35 · 8408 阅读 · 0 评论 -
第一次写vue项目遇到的一些问题(已请教过学长)(未完待续)
问题一:为了及时刷新数据,每一次大的组件挂载的时候,都要请求一次后台的所有数据,导致页面经常有刷新卡顿的情况出现。实际上,这种情况在项目中是绝对不允许出现的,如果后台数据非常多,这样只会导致页面加载十分卡顿。解决方法:在vuex里面设置一个flag,控制只在初次进入页面时(mounted)请求一下后台数据,然后修改flag为false。之后要修改数据,给后台发完请求告诉要修改数据了,然后把vuex中的数据修改就可以了。问题二:一次性把所有的后台服务信息都拿了过来,怎么只显示最新添加的?直接r原创 2022-04-16 22:49:46 · 832 阅读 · 0 评论 -
从github下载项目 npm安装不成功
可以清一下缓存npm clear cache --force然后再重新安装npm install注意,在进行npm安装的时候,不要使用vpn,不然会安装失败,会出现time socket的报错原创 2022-03-29 21:10:48 · 925 阅读 · 0 评论 -
针对Vue3不能直接使用全局Vue这件事
今天发现一个很离谱的事情在我开始使用vue脚手架开始写程序之后Import Vue form ‘vue’ 就不好使了我一直以为是我的程序有问题直到今天学到了插件plugin,我还是没办法在main.js里面引入于是我就去查为什么最新版vue不能使用全局的Vue,这是因为我看的课程还是vue2的,但是脚手架下载的是最新版本的。。。兜兜转转一圈之后,我还是找到了官方文档,找到了插件那一节。我只能说,还是官网文档解决了问题。然后直接在main.js里面写上app.use(plugins)即可原创 2022-03-24 20:13:26 · 2279 阅读 · 0 评论 -
基于面向对象的tab栏crud功能实现
最近刚步入es6,上来就给我整面向对象,梦回java实验。。。功能需求:点击nav栏的各个版块可以切换,同时下面的内容也在跟随变化。 增加nav的版块功能,点击右侧的加号即可实现。 删除nav的版块功能,点击版块右上角的x号就可以删除。 编辑功能。双击nav和下方文本区都可以进行修改。为什么是面向对象?实际上,面向对象的好处不用多说,可维护性高,代码复用性强,低耦合......但是刚刚接触写起来还是挺麻烦的。。。这也是js的第一个面向对象案例。之前的所有案例都是面向过程的原创 2022-02-21 16:35:09 · 440 阅读 · 0 评论 -
淘宝侧边栏返回顶部动画效果实现
正常的animate动画函数一般是左右移动,对于返回顶部的效果,显然需要上下移动。而且涉及到页面卷上去的尺寸,并且是垂直方向。所以主体是window.pageYoffset把原先的animate函数里面的obj.offsetLeft改成window.pageyoffset注意,原先的调整定位的left值,变成了现在的调用window.scroll这个apiwindow.scroll(x-coord, y-coord)x-coord值表示你想要置于左上角的像素点的横坐标。 y-c.原创 2022-02-20 11:34:19 · 300 阅读 · 0 评论 -
导航栏筋斗云的制作
效果实现要求:筋斗云随着鼠标在哪里停留 就飞到哪 如果没有点击,那么鼠标离开的时候筋斗云飞回原来的位置 如果点击了,筋斗云就留在当前位置,并且当前栏目字体可以变色分析:其实就是很简单的animate动画应用,只需要进入animate.js,直接调用函数即可。但是需要注意的是,如何实现点击之后筋斗云停留在当前位置,如果不点击飞回原来位置?这就需要一个变量current来保存当前位置。最开始var current = 0;当点击之后,current = this.offsetlef原创 2022-02-20 11:22:36 · 767 阅读 · 0 评论 -
缓动动画的实现和多个目标值之间的移动
如何实现一个盒子匀速运动?css的linear可以实现。在js中,给定位的盒子left = 盒子当前.offsetleft + 1 + 'px'。怎么实现的呢?靠的就是这个1像素的定值。那么如何实现减速呢?把1变成变量即可。步长step = ( target - 当前offsetleft ) / x这个x可以自己定,x越大的话跑的越慢,很容易理解。那如何实现在多个目标值之间来回移动呢?在做这个效果之前我们必须知道,步长一定要取整,不然的话盒子无法精确的跑到我们的targe原创 2022-02-19 14:42:46 · 485 阅读 · 1 评论 -
拖动登录框
一个小小的拖拽登录框,涉及的地方还挺多的。。。主要在于:元素的正确获取 把一个大的程序,分步骤来做,一个一个完成 对于拖拽效果,我只需要摁住title框,也就是mousedown事件 接下来的登录框随着鼠标移动,松开鼠标登录框停在原地,都是在mousedown事件里面完成的。 登录框的坐标是鼠标页面坐标 - 鼠标盒内坐标,而鼠标盒内坐标是鼠标页面坐标 - 登录框的offset。这样是不是觉得有点永动机了?其实不是,登录框的坐标是固定定位来做的,这个top和left和offset的top和le原创 2022-02-18 22:33:20 · 384 阅读 · 0 评论 -
嵌套div引起的子元素margin-top不起作用
最近发现一个很奇怪的问题,给子盒子div设置一个margin-top,但是却不起作用。经过查阅,发现是该原因引起:父元素的padding值为0,自动将子元素的margin-top提升到了父元素上,因此会表现为父元素的margin-top。但是要注意,如果原先父盒子就有一个margin-top,那么此时子盒子的margin-top就不起作用了。解决方法如下:给父元素一个padding值,比如padding-top:1px,但是这样会撑大盒子,不建议 在父元素里面加一个overflow:h原创 2022-02-18 16:10:47 · 442 阅读 · 0 评论