后端开发如何入门前端

作为一个服务端开发人员，需要了解并掌握一定的前端技能吗？回答是，当然需要。

我记得刚开始做开发的时候，还不流行前后端分离，那时候也没那么多的前端框架，什么 Vue、React 都还不存在，Angular 才刚刚发布第一代版本不久，但是在国内基本上还没人用。

那时候，大部分应用都还是服务端渲染，比如 Java 的 jsp、.NET 的 aspx、Python 的 Jinja2 等等，剩下的真的需要异步加载的，也是 JQuery 一统天下。

那时候我还投身在 .NET 的怀抱，在微软的一款叫做 SharePoint 的产品上做定制开发，使用的技术就是 .NET。接触前端也就是从那时候开始的，那时候团队里没有人是专门的前端，也没有人是专门的后端，甚至根本就没有前端这一说法。前端的概念也很简单，就是 HTML + CSS + JQuery，掌握这三样，那就是掌握了前端。

还要感谢那时候我们做的产品，因为 SharePoint 有个特点。它里面的功能都是以组件的形式存在，你可以在页面上选择性的添加需要的组件，并且实现拖动布局，这些组件就是定制开发出来的，由于这样的产品特性，所以那时候我们开发的组件其实就是前后端分离的，后端就提供接口，最开始写的是 webservice，后来变成了 RESTful 接口。前端就是那三样， HTML + CSS + JQuery 。

无论是技术的发展，还是学习新技术。都是现有的技术不能满足业务或者开发上的需求，才催生出新的技术框架，才能让团队或者开发人员发现新的技术框架。由于当时需要一些表单的动态变化，比如 A 字段的修改实时联动 B、C 字段，这时找到了一些实现表单双向绑定的模板引擎，然后就发现了还有 Angular 这种东西。

那么说到正题了，作为一个后端，如果你还没掌握甚至没有入门前端，怎么样才能快速入门并掌握呢？当然有方法。

在几年前开始学习前端

当然了，这个方法不是适用于每个人，对于到现在为止还没掌握前端的人来说就不太适合。

但是，还有但是，适合过几年后的你自己。

是不是有点绕，是不是有点哲学的意思。是不是和那句"种一棵树最好的时间是十年前，其次是现在。"是一个道理。

学习前端基础

以前的前端基础就是 HTML + CSS + Javascript。但是现在呢，有些人说，除了这些，各个前端框架都是基础，比如 Vue、React 等，甚至 nodejs 都得掌握点儿。有些前端同学，甚至根本就不怎么理解 Javascript，上来直接就各种框架了。

先不要看什么框架，先把 Javascript 是什么搞明白。不管是什么 Vue、React，什么 ES5、ES6 ，甚至 typescript，到最后编译完成还是 Javascript 代码。

先老老实实的做几个页面，就用纯的 HTML ，与后台的交互就用 JQuery，比如做一个表单页，提交表单传到后台，再做一个列表页，用来展示数据列表。样式不用太关心，毕竟我们不是专业前端，了解前端基础，重点是前后端的数据交互。因为最近我发现，有些同学不太理解前后端交互的流程，主要是刚开始做开发的同学。另外有的同学只埋头做后端，对于前后端交互也不甚了解。

自己实现一个 web

学习的方法就是实践，尤其对于开发，动手才是最重要的。 Talk is cheap. Show me the code.除非你是天才，不然技术都是靠时间堆出来，经验是靠实践积累而来的。

就算读再多的书，看再多的博文，关注再多的公众号，收藏再多的文章。一旦开始动手了，也是一脸懵的状态，请相信我，丝毫都不用怀疑。

有了上一步前端的基础，就可以选一个框架了，推荐 Vue 或者 React 里选一个。上来什么都别干，先到官网读一遍官方文档，差不多耗时1、2个小时。然后就开始按照官网的例子，创建项目、运行项目、编译项目，保证出来一个最简单的可运行项目。

接下来就开始动手添枝加叶了，你的这个网站可以从个人博客入手，做一个简易的博客，有顶部或者左侧菜单，有个人信息，有文章列表页，文章详情页等等。前端的展示层面，有好多开源的 UI 框架，比如 AntDesign、iView、Bootstrap 等等。

还是要强调，样式不是很重要，重点是前后端交互过程。比如说后端接口需要验证 header 中的 Token 信息，前端如何在 header 中加入 Token。如何 post json 格式参数到后端，如何向服务端传文件等等，只有把这个过程都了解了，在设计后端接口的时候才能更加清楚。

另外，在学习新技术的时候，不要过度关注细节。比如你用 Vue 开发，可能配置上要涉及到 webpack，webpack 有很多的设置，但是它只是用来调试和打包的，不用太关注它的配置，因为重点不是它。

一旦动起手来，万事开头难。刚开始的时候，你会步步难行，唯有搜索引擎可以救你。除了搜索之外，找一些简单的开源项目做参考也是不错的方式。

比如我前几天做的 web 版的 JVM 监控工具。前端就是用 React 做的，你也可以参考一下。源码在 github 上: https://github.com/huzhicheng/little-flower。当然，还有更多比我写的强得多开源项目值得参考。

啥都别说了，动手吧。