记录：职业生涯中的所有学习资料和网站

已注销
320 阅读12分钟

大家好，我是梅巴哥er。本篇将作为永久记录的文档，用来记录在职业生涯中的所有学习资料和网站。随时更新学习资料和网站。

本篇目录：

百度

  • 没错，就是百度
  • 有问题，找百度
  • 这个网站，大概率会一直一直用
  • 同类型还有个wiki，就是维基百科。

W3CSchool

  • 最早遇到的学习网站。
  • 最早用来学习html和css的，不过里面也有js等其他内容。

菜鸟教程

  • https://www.runoob.com/

MDN官网

  • 神器，正如官网所说，这是一个技术人员学习各种知识的社区，你也可以把他当成一个查询文档
  • MDN文档

node

  • node 文档： http://nodejs.cn/api/
  • node下载：http://nodejs.cn/download/

bilibili

  • 我们都毕业于哔哩哔哩大学（笑~）
  • 学习视频特别多，很多培训机构和个人，都会在b站发布学习视频。足够学习之用。

前端三大框架之一 react

  • 一个构建UI界面的库， https://reactjs.bootcss.com/。

我自己在B站的学习视频

  • https://space.bilibili.com/169381868/favlist?fid=471717568&ftype=create
  • 我自己在学习过程中积累的学习视频

各种技术博客官网

  • csdn ： https://blog.csdn.net/tuzi007a?spm=1000.2115.3001.5343&type=blog
  • 博客园 https://www.cnblogs.com/ （经常崩溃…）
  • 掘金： https://juejin.cn/
  • 简书： https://www.jianshu.com
  • github
  • gitee

一个刷题网站 牛客

  • https://www.nowcoder.com/

力扣官网

  • https://leetcode-cn.com/
  • 一个算法题库网站
  • 里面有几千个不同难度的算法题目
  • 每个算法都能掌握的话，你就是算法界的大神了

Typora官网

  • https://www.typora.io/#
  • 一款非常棒、非常轻量级的markdown文档编辑器
  • 平时写技术文档，基本上都是用这个了

安装mongoDB数据库及文档

  • 去下载： https://www.mongodb.com/try/download/community
  • 用于服务器的各个版本的mongodb : http://dl.mongodb.org/dl/win32/x86_64
  • 安装和配置： https://www.cnblogs.com/DJRemix/p/12910066.html
  • 往下拉，有连接教程https://www.mongodb.com/zh-cn/what-is-mongodb 。
  • mongodb中文文档： https://docs.mongoing.com/
  • 英文文档：https://docs.mongodb.com/manual/ 。注意，右边有个选择语言的，常用的有shell ， compass ， nodejs 。 shell就是powershell 控制台 ， compass就是mongodb官方的可视化工具， node.js就是node代码。 语言一定要选择正确。

在这里插入图片描述

  • mongodb的API文档：https://mongodb.github.io/node-mongodb-native/。 自己用哪个版本就点进去那个版本查看即可。 进去之后记得选择好自己用的语言。 比如我用的node，我就选nodeJs 。 文档就会给你按照node语言来提示api用法。（所有的资料都在这个文档里，可以直接到这个文档里查看）

下载nvm控制node版本

  • https://blog.csdn.net/qq_44401643/article/details/90400626
  • 这个人的博客里有百度网盘，也直接去他网盘里直接下载，速度更快（谢谢这位小哥的分享）
  • 下载nvm前，要确保之前下载过的node都已经卸载了，环境变量也清除掉了
  • 如果下载安装nvm后，发现之前有安装node且没卸载，那么，就把nvm和node都卸载了，环境变量都清除了，再现在安装nvm，然后再用nvm下载node

tips

  • npm i 是生成node_modules包的，里面的包会适配当前npm版本， npm init是初始化生成package.json文件的，这个文件是记录各个包的版本号等信息。

Nginx官网下载

  • http://nginx.org/en/download.html
  • 做前端也要用到nginx，还要了解nginx的反向代理，我的b站收藏夹里有学习内容。
  • 打开链接后直接下载的
  • 安装好后，打开git-bash.exe，输入命令行git –version 查看安装的git版本。正常输出版本号，表示安装成功。

window nginx 基础命令

  • 简单的命令行 https://www.cnblogs.com/tengrl/p/10642046.html
  • 关掉nginx的更粗暴的办法是，直接任务管理器里结束任务

安装git过程中的配置解释

  • https://blog.csdn.net/eno_yang/article/details/114782695
  • 这篇讲的很详细，不知道如何安装git，可以看看。看完记得给这位老哥点个赞。

关于问问题该怎么问的事情

  • 首先要自己百度，并查阅资料，尝试自己解决

  • 查完还解决不了，就要考虑找人问了。这时候，不要抛出一段代码就问怎么办或者抛出一张图就问代码怎么写，切记切记！

  • 你需要让被问的人充分了解你掌握的信息和遇到的问题在哪里，所以，你应该尝试这样去问：

    • 我想做什么，达到什么样的效果，被问的人第一时间就能了解到你的需求
    • 我做了什么，这可以让被问的人快速了解到 你做的事情可能是造成bug的原因，或者你做了什么，但是没达到效果，他就可以快速找对应方法
    • 我该怎么做

  • 一定要记住啊。

  • 解决完问题，一定要做个笔记。下次出类似问题就可以直接当作资料来查了。 不然的话，同一个问题，你要一直问别人，怕是要说不过去了。

有些公司的项目图，需要前端自己动手切，那么该怎么切呢

  • 首先，打开PS软件，打开一张待切片的图片，或者直接把图片拉进ps操作台
  • 操作台最上面的“视图”选项里，点进去，先把标尺勾上。右边工具栏最下面，有3个点的图标，右击一下，选编辑工具栏，可以看到对应的工具。切片工具是隐藏的，要右击图标快捷键是C的图标，把切片工具找出来。同样还有切片选择工具，都在同一个地方，快捷键都是C。
  • 然后，放大图片，尽量多放大点，方便操作。接着开始拉参考线，沿着要切图的边。
  • 拉好线后，右击快捷键为C的图标，选切片工具。把要切的图片选出来。
  • 切好之后，点操作台最上面的“基于参考线的切片”，一定要记得点这个选项啊，不然最后导出肯定出问题。
  • 然后，右击快捷键为C的图标，选出切片选择工具，按住shift键，把要选择的切片，都点一下，选中的切片有明显标记的。
  • 选好之后，右击一个被选中的切片，选“组合切片”，这样就把切片组合到一起了。
  • 到操作台最左上角，点“文件”，再选“导出”，再选“存储为web所用格式”。
  • 这时候会有个弹窗，右上角可以选要导出的图片的格式，右下角点“存储”。
  • 这时候又一个弹窗，在最下面，选择“选中的切片”。找个文件夹，点保存，就完事儿了。Over。
  • 切片的操作步骤，大致就是这样了，我觉得写的是极为详细了，如果还有不明白的地方，可以去百度。 后续如果还需要精细化处理，我还会继续补充。
  • 更新均匀切片的一种更快的方法
  • 直接找出“切片选择工具”
  • 右击要均匀切片的图片，选择“划分切片”选项。根据自己的需求划分。
  • 划分好之后点确定，然后按照上面的步骤进行导出即可。
  • 此方法更快捷好用。
  • update 2021-5-20

推荐书籍：js高级程序设计（第4版）

  • 高程4，俗名“红宝书”，前端JS经典书目。
  • 我目前在读，被深深的吸引了，停不下来。
  • 该书需要有一定的js知识储备和实践，然后再读该书比较好
  • 如果没有js基础，可以先去b站看看pink老师讲解的js，或者看看《Head First JavaScript程序设计》这本入门书。
  • 如果你属于尚未工作的且想从事前端开发，那就更应该好好读读该书了，市场上大部分前端面试题的知识，在这本书里都有讲到。

推荐书籍：js权威指南（第7版）

  • 俗称“犀牛书”，是js界的圣经级别书目
  • 可以多看看，当成一个查询文档
  • Tips：以上三本书推荐的时间是2021-4-28 ，如果多年后有小伙伴看到该博文，请根据你当时的最新版本进行购买和阅读。
  • 不建议看电子书，建议看纸质版。你会发现一些很玄妙的东西。

新入职后，VS Code新装插件和一些设置的修改

  • Auto Close Tag：自动闭合标签，括号等
  • Auto Rename Tag：当修改开始或闭合标签时，会自动修改另一半的闭合或开始标签。
  • Bracket Pair Colorizer：代码中的括号成对高亮显示。当代码量多了之后，特别有用，不容易弄混
  • Chinese (Simplified) Language Pack for Visual Studio Code：启用中文简体版本的vscode 。*注：如果你英语阅读能力超强或者习惯了英文版vscode，那就忽略这条。
  • Code Runner：安装之后，鼠标右键点击代码区域，就可以直接运行代码了。不用单独去文件夹里打开cmd了。
  • Debugger for Chrome：字面意义的debug
  • filesize：添加头header comment
  • indent-rainbow：很清晰的识别你的代码块，比较有帮助
  • IntelliSense for CSS class names in HTML：类名补全
  • npm Intellisense：在写后台代码用到require引入包时，会给提示包名
  • open in browser：写好页面后，右键点击代码区，就可以选择在哪个浏览器里打开页面了。不需要再去双击.html文件了。
  • Path Intellisense：路径提示
  • Prettier - Code formatter：这个插件会让你写出的代码特别美观，特别靓，他的安装量已经突破1220万，真可怕。看来程序员也是爱美之人呀，哈哈
  • Rainbow Brackets：括号颜色变好看
  • 文件--首选项--设置：Editor: Tab Size 这里把数字4改成2，表示代码缩进是2个空格。这是标准，改就对了。
  • 文件--首选项--设置：Accept Suggestion On Commit Character这个选项的√给去掉，不要勾选。Accept Suggestion On Enter这个选项设置成off。目的是防止点击enter、（、 ， 、 ； 等符号的时候，自动补全代码，出现重大错误或影响代码速度和质量。调整后，点击下面的“去settings.json里编辑”，看下这两句代码"editor.acceptSuggestionOnEnter": "off", "editor.acceptSuggestionOnCommitCharacter": false 是否是这样设置的，如果不是，就补充进去。如果是，就对了。
  • 文件--首选项--设置：Editor:Word Wrap选项，把off改选成on，就可以让代码自动折行。
  • filesize插件。可以显示当前文件大小，很实用.
  • react的jsx里自动标签补全设置：https://blog.csdn.net/shaleilei/article/details/82984228
  • 安装正则插件库any-rule。使用方法：在你要用的页面右键 选择正则大全，然后搜索需要的正则即可。
  • 在Vue的template模板中自动补全html标签的配置：https://blog.csdn.net/zhangyuying_777/article/details/114439128

Gitlab 添加 SSHkey

  • https://www.cnblogs.com/hafiz/p/8146324.html
  • 所在公司是用gitlab管理项目的，需要添加SSHkey
  • 如果你刚好也入职了用gitlab管理工具的公司，且不懂怎么添加，看这篇文章就够用了。

预览svga格式的动画

  • 有些公司里，比如直播平台，电商直播平台等，会经常用到svga格式的动画。
  • 打开该网站，把svga文件放上去，就可以实现预览效果。
  • 如果想学习应用svga，这里是svga的github官网，可以点进去查看和学习。
  • http://svga.io/svga-preview.html
  • update 2021-5-13

菜鸟教程工具

里面有各种前端、后端、编译等工具。如
前端三剑客压缩/解压工具，
json在线解析和格式化工具，
正则在线检测工具，
IP地址查询，
取色器，
在线字数统计工具，等等。
https://c.runoob.com/

  • update 2021-5-19

测试工具Postman

  • 一个测试接口的工具
  • 该标题指向postman下载地址，直接点击跳转到官网下载页面
  • 下载地址：https://www.postman.com/downloads/
  • update 2021-5-20

一位大佬分享的学习路线图

在这里插入图片描述

API商城，里面有各种免费 / 付费接口

  • 链接：https://apis.baidu.com/
  • update 2021-6-24

聚合数据的接口，也有不少免费的

  • 链接：https://www.juhe.cn/docs?bd_vid=12043647083935390897
  • update 2021-7-2

layui ， 一个ui库

express ， koa 后端框架

  • 原生http算是第一代后端框架， 监听端口，写入路由，导出接口等
  • express算是第二代，在http基础上做了封装。
  • koa1算是第三代，在对原生js的支持上做了很大改进。同时也变得更轻量级。
  • koa2算是第四代， 在koa1基础上，做了更多提升。
  • koa2官方文档：https://koa.bootcss.com/
  • koa2中文文档：https://www.itying.com/koa/article-index-id-90.html 建议看中文文档。比较清晰有条理。

mongodb compass ， 一个操作mongodb数据库的可视化工具，官方自带的

  • https://www.mongodb.com/try/download/compass

搭配前端框架用的ui库 antd

  • https://ant.design/docs/react/introduce-cn

yarn的安装和使用

  • 推荐原因：npm install 有时候会卡住不动，装了镜像也一样会有这种情况。但是yarn很顺利
  • https://www.jianshu.com/p/021df9efdda5

redux官方文档

  • https://www.cntofu.com/book/4/readme.html
  • http://cn.redux.js.org/introduction/getting-started
  • 这俩都是

各种数据库介绍

  • http://c.biancheng.net/view/3856.html

微信开放文档

  • https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

npm包

  • npmjs.com
  • 该网站包含了所有的npm包，想学习哪个包，就可以在这里搜索名称，然后找到对应的文档进行学习。

该博客永久更新，最新更新日期：2022/1/3

avatar
文章
阅读
粉丝