阅读 181

前端实习问题记录【持续更新中。。。】😉

前言

笔者正处于大三升大四的暑假期间,目前在杭州某医疗类公司进行前端方向的实习,在实习之前,我的学习模式主要是看书看视频做小项目,然后在前端相关的群里向厉害的大佬请教和交流。目前在实习阶段,同样遇到了非常多的问题,但是这些问题都属于比较散但是一时难以解决的烦人问题,有时候无意中百度到解决方案,成功解决了错误,但是随着时间的推移其实会忘记解法,忘记错误,这样下去,虽然一路打怪升级过来,但是并不不利于前端的学习和积累,于是便开了这一帖子打算作为个人实习期间所遇到疑难杂症的记录帖。😎

999.jpg

项目

无法通过点击button按钮跳转对应组件?

问题的起初是我在页面上放置了这样一个按钮👇, 66.png 希望做到点击页面按钮跳转相应界面的功能,然而。。。貌似不可能完成。。 )9GIF$2{I9L`[NNRW@]K0.png

通过查询相关资料,原来页面的跳转只能通过路由,而我是不能通过return的方式进行页面跳转的。可以使用Link组件跳转,或者Router.push()方法👍

遇到 [nodemon] app crashed...问题,该怎么办?😯

1.png

上边的错误显示3020端口已经被占用,但是我并没有在页面上找到已经在使用的3020端口,上网查找相关的资料,据说将package.json文件中的nodemon改成node会有效,但是我在修改过后,输入npm start重启了很多次,也并没有生效,于是我打算直接找到3020被占用的端口,并将其关掉

解决方案

输入window+R组合键调出命令窗口,输入cmd88.png

11.png 输入命令netstat -aon | findstr "3020" 查看端口的运行情况

_BM(J(@UXVI7~SNTX34W1.png 由上图可知,3020端口监听的PID24740,再次输入命令tasklist | findstr "24740"查看是什么进程占用了3020端口,得到以下结果:

(N95`SOMNPT_ZRHWQ$ERJ.png

显然,占用3020端口的是node服务端,于是,我们直接进入任务管理器,找到PID24740的进程

AY86X_81KA[_CHSX80HZT.png 单击此程序,并点击结束进程,然后再返回到本身的VScode端,重新npm start进行启动,接着就会发现问题完全解决,程序启动成功!

9.png

[更新]---最佳解决方案

由于我这个项目经常出现这个问题,所以这个方法实在是过于繁琐了,现在我发现了一个更好的方法,只需要三行命令即可解决:😎

首先输入查看端口是否被占用以及占用该端口的PID命令:

netstat -ano|findstr "端口号"

其次,通过输入下面这个命令去这个PID号找到对应的进程名称:

tasklist|findstr "PID号"

最后,找到对应的进程名称后,输入以下这个命令关掉这个进程

taskkill /f /t /im 进程名

输完这三条命令后,就可以再重启项目,就可以成功了!

nodemodules文件太大,难以删除?😐使用git指令快速删除nodemodules文件😎(使用mac开发的人员可忽略这条,我知道你们快...😶)

在实习以及日常写项目的时候,我们常常会涉及nodemodules文件的删除,由于nodemodules文件过于庞大,不论是进入项目所在文件夹删除还是直接在vscode上面手动删除,都需要花费不少时间,那么,有没有办法快速删除呢?当然是有的,嘻嘻,那就是万能的git指令

  • 安装特定环境删除nodemodules

npm install rimraf -g

rimraf node_modules

  • 如果是window环境的话,则首先打开cmd窗口,并进入nodemodules文件所在文件夹,输入以下命令:

rmdir /s/q node_modules

  • 如果是Linux环境,同理也进入cmd窗口,进入nodemodules所在文件夹,输入以下命令:

rm -f /node_modules

众所周知,由于nodemodules文件非常大,需要等很久才能删除,所以输入指令也需要等一小会儿。

JavaScript

map和filter方法

在项目中对数据进行过滤处理的时候,常常会使用到mapfilter方法,这两种方法其实是JavaScript对于循环遍历方法的一种封装形式,本质上和for循环差不多,而且这两种方法不会改变原数组,会返回一个新的数组,可以说是非常方便了。这两个方法可以在项目中结合使用,进行数组的遍历和过滤,非常好用,只是一定要记得加上

return {
    ...item
}
复制代码

不然,返回的就是空了。。。😓

CSS

height:100%失效了怎么办?😯

在项目最初编写静态页面的时候,我一拿到UI设计图,非常兴奋,立马开始写页面,好不容易写完了页面后,立即提交代码,被导师提醒后才了解到了页面自适应的问题。原来我只是写好了整个UI界面,并没考虑到实际的应用情况,我写的页面在自己的小屏上可以显现,但是如果用了大屏的显示器打开,就会出现问题。这时,就不能将宽高写死,应该采用flex布局或者将宽高设置成动态的,随页面可调整的模式才行。先不谈flex布局,就说说height高度的设置吧!

width宽度的设置,其实有时候只需要将宽设置成100%或者不设置宽度,盒子的宽度就会自动拉满,但是对于height就不行,在我的项目中,我发现直接设置子盒子的height是没有用的,于是我在网页上查询了相关资料,才了解到子盒子的高度100%是基于父盒子的,所以要使得子盒子有效就需要给父盒子设置高度,不然就无法撑开父盒子,所以我们的样式代码要根据如下所示:

11111.png

dddd.png

div的父标签为body标签,body标签的父标签为html标签,所以这两个的标签都需要设置height高度,所得到的页面如下图所示:

0000.png 当然,这是很简单的情况,项目中的实际情况远比这复杂,而且有时候你感觉已经全部设置了height高度,可是页面却还没出现的崩溃情况,这时我们只能再耐心的检查代码,如果查找很久找不出bug所在,也可以求助同事或者导师,让其他人看看,因为自己很有可能会陷入思维的死循环里,走不出来...😶

文章分类
前端
文章标签