作为一个服务端开发人员, 需要了解并掌握一定的前端技能吗? 回答是, 当然需要.
我记得刚开始做开发的时候, 还不流行前后端分离, 那时候也没那么多的前端框架, 什么 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 等, 甚至 Node.JS 都得掌握点儿. 有些前端同学, 甚至根本就不怎么理解 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 . 当然, 还有更多比我写的强得多开源项目值得参考.
啥都别说了, 动手吧.
不要吝惜你的「推荐」呦
来源: https://www.cnblogs.com/fengzheng/p/11696361.html