後端開發有必要學習前端嗎，如何入門呢

• 2019 年 10 月 18 日
• 筆記

作為一個服務端開發人員，需要了解並掌握一定的前端技能嗎？回答是，當然需要。

我記得剛開始做開發的時候，還不流行前後端分離，那時候也沒那麼多的前端框架，什麼 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 上: 。當然，還有更多比我寫的強得多開源項目值得參考。

啥都別說了，動手吧。
不要吝惜你的「推薦」呦

歡迎關注，不定期更新本系列和其他文章
古時的風箏 ，進入公眾號可以加入交流群