JSP还能撑多久？ -- 关于WEB开发的一些思考(2)，前端开发学习方法

IDE 集

---

VSCode：https://code.visualstudio.com/

SublimeText：https://www.sublimetext.com/

WebStorm：https://www.jetbrains.com/webstorm/

Atom：https://atom.io/

Hbuilderx/Hbuilder：https://www.dcloud.io/hbuilderx.html

微信开发者工具（小程序开发）

QQ 开发者工具（小程序开发）

支付宝开发者工具（小程序开发）

hbuilderx（小程序开发、网页开发、移动端开发）

构建集

---

NPM：https://www.npmjs.com/

简单易操作的包管理器，前端开发必备。

Yarn：https://yarnpkg.com/zh-Hans/

和 npm 差不多也是简单易操作的包管理器，两者选择其中一个。

Webpack：https://webpack.js.org/

强大的包转换器和打包

Gulp：https://www.gulpjs.com.cn/

Babel：https://babeljs.io/

代码转换器

ESLint：https://cn.eslint.org/

可组装的 JavaScript 和 JSX 检查工具。

PostCSS：https://www.postcss.com.cn/

用 JavaScript 工具和插件转换 CSS 代码的工具

框架集

---

Vue.js：https://cn.vuejs.org/

Nuxtjs：https://zh.nuxtjs.org

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染，简称服务端渲染。

React：https://reactjs.org/

Angular：https://angular.cn/

AngularJS：https://angularjs.org/

Nodejs：https://nodejs.org/zh-cn/

基于 JS 开发的一个性能超过 PHP 的的服务器，这是作为一个前端走向全栈工程师必学的东西。

Express：http://www.expressjs.com.cn/

基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

Koa：https://koa.bootcss.com/

基于 Node.js 平台的下一代 Web 开发框架。

Egg：https://eggjs.org/zh-cn/

Egg 继承于 Koa。

Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础。而 Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。

Electron：https://www.electronjs.cn/

Electron（原名为 Atom Shell）是 GitHub 开发的一个开源 js 框架。它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。

Nw:https://nwjs.org.cn/

Nwjs 和 Electronjs 都是同一个作者不同地方开发的前者主要由微软维护，而后者由 GitHub 团队维护，但是目前越来越多的人都在使用 Electron。

例如 VS Code 这个客户端软件就是用 Electron 语言写的，而微信开发者工具就是用 Nw 配合 react 配合开发的。

Redux：https://www.redux.org.cn/

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

ReactNative：https://reactnative.cn/

使用 JavaScript 编写原生移动应用。

WebGL：http://www.hewebgl.com/

主要用于网络游戏开发，是国内较为牛逼的同学开发的。

tensorflow：https://tensorflow.google.cn/

TensorFlow 是一个端到端开源机器学习平台。它拥有一个全面而灵活的生态系统，其中包含各种工具、库和社区资源，可助力研究人员推动先进机器学习技术的发展，并使开发者能够轻松地构建和部署由机器学习提供支持的应用。

多端开发的框架

---

uniapp：https://uniapp.dcloud.io/

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

Taro：https://taro.aotu.io/

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信 / 京东 / 百度 / 支付宝 / 字节跳动 小程序、快应用、H5、React-Native 等）运行的代码。

mpvue：http://mpvue.com/

基于 Vue.js 的小程序开发框架。

kbone: https://developers.weixin.qq.com/miniprogram/dev/extended/kbone/

Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

一些类库集

---

jQuery：http://jquery.com/

Zepto.js：https://zeptojs.com/

可以理解成是移动端的 jQuery。

ECharts：https://echarts.baidu.com/

使用 JavaScript 实现的开源可视化库。

tween.js：http://www.createjs.cc/tweenjs/

用来调整和动画 HTML5 和 Javascript 属性，提供了简单并且强大的 tweening 接口。

EaselJS ：http://www.createjs.cc/easeljs/

使 HTML5 Canvas 标签变得更简单。用于创建游戏，生成艺术作品，和处理其他高级图形化等有着很友好的体验。

SoundJS：http://www.createjs.cc/soundjs/

提供了简单而强大的 API 来处理音频。通过插件来执行实际的音频实现，简单直接的处理声音。

PreloadJS：http://www.createjs.cc/preloadjs/

用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源。

openlayers：https://openlayers.org/

一个高性能的、功能丰富的库，满足您的所有映射需求。使得在任何网页中放置动态地图变得很容易。它可以显示从任何源加载的地图块、矢量数据和标记。开发 OpenLayers 是为了进一步利用各种地理信息。它是完全免费的，开源 JavaScript，在 2 子句 BSD 许可下发布(也称为 FreeBSD)。

数据库

---

MongoDB：https://www.mongodb.com/

MongoDB 是一个文档数据库，这意味着它将数据存储在类似于 JSON 的文档中。我们认为这是思考数据的最自然的方式，并且比传统的行/列模型更有表现力和更强大的功能。

Mongoose：https://mongoosejs.com/

Mongoose 是一个 MongoDB 的框架便于更好的操作数据库

CSS

---

Sass：https://sass-lang.com/

Sass 是成熟、稳定、强大的 CSS 扩展语言。入门文档可以看：http://sass.bootcss.com/

Less：http://lesscss.org/

给 CSS 加点料。入门文档可以看：https://less.bootcss.com/

Stylus：http://stylus-lang.com/

UI 框架

---

Bootstrap：http://www.bootcss.com/

ElementUI：http://element-cn.eleme.io/

基于 Vue.js 的组件库。

iView：https://www.iviewui.com/

一套基于 Vue.js 的高质量 UI 组件库。

VUX：https://vux.li/

一个凑合的 Vue.js 移动端 UI 组件库（由个人维护）

cube-ui：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

cube-ui 是基于 Vue.js 实现的精致移动端组件库。

Muse-UI：https://muse-ui.org/#/zh-CN

Muse UI 基于 Vue2.0 开发，Vue2.0 是当下最快的前端框架之一，小巧，api 友好，可用于开发的复杂单页应用

vant：https://youzan.github.io/vant/#/zh-CN/

轻量、可靠的移动端 Vue 组件库

---

Layui：https://www.layui.com/

由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端 UI 解决方案

MUI：https://dev.dcloud.net.cn/mui/

最接近原生 APP 体验的高性能前端框架

Ant Design：https://ant.design

基于 React 的 UI 组件库，主要用于研发企业级中后台产品。官网推出了 Ant Design pro 作为示例，可以看看。

Ant Design Mobile：https://mobile.ant.design/

一个基于 Preact / React / React Native 的 移动端 UI 组件库。

Ant Design of Vue：https://vue.ant.design/docs/vue/introduce-cn/

Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

CDN 加速器

---

BootCDN: https://www.bootcdn.cn/

稳定、快速、免费的前端开源项目 CDN 加速服务

共收录了 3599 个前端开源项目

调试集

---

whistle：https://wproxy.org/whistle/

代理抓包工具，很好很强大。

---

Fiddler：https://www.telerik.com/fiddler

编码规范

---

Bootstrap 编码规范：https://codeguide.bootcss.com/

es6 编程风格：http://es6.ruanyifeng.com/#docs/style

AirbnbJavascriptStyleGuide：https://github.com/airbnb/javascript

强大的技术学习网站

MDN：https://developer.mozilla.org/zh-CN/docs/Web

w3schools：https://www.quanzhanketang.com/

w3school：https://www.w3school.com.cn

w3cschool：https://www.w3cschool.cn/

菜鸟教程：https://www.runoob.com/

开源中国：https://www.oschina.net/project/lang/28/javascript

smashingmagazine：https://www.smashingmagazine.com/

HTML 中文网：http://www.css88.com

前端乱炖：http://www.html-js.com/

爱思资源网：http://www.aseoe.com/

掘金 APP

CSDN 网站及 APP

segmentFauultAPP

字体图标集

---

Font Awesome：http://www.fontawesome.com.cn/

Iconfont：https://www.iconfont.cn/

icomoon：https://icomoon.io/

EasyIcon：https://www.easyicon.net/

icons8：https://icons8.cn/

IconStore：https://iconstore.co/

iconninja：http://www.iconninja.com/

web 字体

---

webfont：https://www.webfont.com/onlinefont/index

MOKE 数据

---

Easy Mock：https://www.easy-mock.com

切图工具

---

PS

Pxcook(像素大厨)：https://www.fancynode.com.cn/pxcook

原型设计工具

墨刀：https://modao.cc/

Mockplus：直接搜索下载

uxpin：https://www.uxpin.com/

静态站点生成工具集

Hexo：https://hexo.io/zh-cn/

VuePress：https://www.vuepress.cn/

GitBook：https://www.gitbook.com/

GitHubpage：https://pages.github.com/

API 接口

聚合数据：https://www.juhe.cn/

和风天气：https://www.heweather.com/

讯飞开放平台：https://www.xfyun.cn/

网易云音乐接口：https://binaryify.github.io/NeteaseCloudMusicApi/#/

心知天气：https://www.seniverse.com/

饿了么接口：https://github.com/bailicangdu/node-elm/blob/master/API.md

其他工具

===================================================================

程序员的工具箱：https://tool.lu/

有八十个在线小工具特别强悍，是我较为喜欢的一个。

CanIUse：https://caniuse.com/

浏览器兼容性查询。前端同学必须要知道。

幕布：https://mubu.com

极简大纲笔记、一键生成思维导图。非常好用。

JSON 格式化：http://www.bejson.com/

短链生成：http://www.dh6.ink/

GitHub 短网址：https://git.io/

图片压缩：https://www.yasuotu.com/

在线 PS：https://www.photopea.com/

图片在线裁剪：https://www.asqql.com/gifc/

Gif 添加字幕：http://www.yingjingtu.com/

Photoshop 的投影参数转换为 CSS 代码：https://psd2css.mezw.com/

将 Photoshop 设计文件图层中的混合选项参数快速转换为 CSS3 代码，以节省前端开发人员的时间和精力。

Get Emoji：https://emoji.svend.cc/

图片转 Ascii：http://picascii.com/

视频转 GIF：https://github.com/vvo/gifify

OCR 文字识别：https://app.xunjiepdf.com/ocr

学 UI 网：http://www.xueui.cn/design/online-tools

总结

---

该内容主要收集于网络和平常自己用到的一些工具，如果想学习前端开发的同学，你可以先学习 HTML、CSS 和 JS 基础打牢后，可以学习一些库和框架，前端常用的库、框架、UI 上面都已经贴出，你可以按照该技术栈进行学习而不是漫无目的去晚上找各种资料，学框架啃文档做小 demo 会学的更快更牢。

JAVA 后端常用技术

==========================================================================

Spring Framework

Spring 容器

http://projects.spring.io/spring-framework/

SpringMVC

Spring MVC 框架

http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/#mvc

Apache Shiro

安全框架 http://shiro.apache.org/

Spring session

分布式 Session 管理

http://projects.spring.io/spring-session/

MyBatis

ORM 框架

http://www.mybatis.org/mybatis-3/zh/index.html

MyBatis Generator

代码生成

http://www.mybatis.org/generator/index.html

PageHelper

MyBatis 物理分页插件

http://git.oschina.net/free/Mybatis_PageHelper

Druid

数据库连接池

https://github.com/alibaba/druid

FluentValidator

校验框架

https://github.com/neoremind/fluent-validator

Thymeleaf

模板引擎

http://www.thymeleaf.org/

Velocity

模板引擎

http://velocity.apache.org/

ZooKeeper

分布式协调服务

http://zookeeper.apache.org/

Dubbo

分布式服务框架 http://dubbo.io/

TBSchedule & elastic-job

分布式调度框架

https://github.com/dangdangdotcom/elastic-job

Redis

分布式缓存数据库 https://redis.io/

Solr & Elasticsearch

分布式全文搜索引擎

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里免费获取

dangdangdotcom/elastic-job

Redis

分布式缓存数据库 https://redis.io/

Solr & Elasticsearch

分布式全文搜索引擎

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-1hLRHEey-1712164509364)]

[外链图片转存中…(img-UUIsJ50H-1712164509365)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-ZjlqeR5q-1712164509365)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里免费获取