計算機專業的學生如何系統學習前端技術？

個寒假回來，好幾個同學都來問我或者自己開始學起了前端，前端入門雖然簡單，但是想要做好很難，是一個要通十行才能精一行的工作。再這幾年 MVVM 框架的大肆流行，前端已經不是以前用 jQuery 寫一寫就可以的時代了。于是我寫下這篇文章，來給大家一個參考。

首先，請大家牢記以下幾點：

前端不簡單！前端不簡單！前端不簡單！
前端和美工不一樣！不是只會 HTML、CSS、JavaScript 就行的。
程序和其他的行業不一樣，經驗是十分重要的，不管看多少書，都逃不過要經常的練習。
在學會使用 JavaScript 實現相同操作之前，不要使用 jQuery。
JavaScript 和 Java 的關系如同雷鋒和雷峰塔的關系一樣，并沒有什么關系！

前期準備工作

下載好 Sublime Text 3，并自行找教程安裝 Package Control。安裝完后使用 Package Control 安裝 Sublime Text 的漢化包，名字叫做 ChineseLocalizations。之后單獨寫 HTML 和 CSS 的時候，使用 Sublime Text 編輯。
下載 Chrome 瀏覽器，目前（2017 年 3 月 9 日）最新版本為 56，請盡量安裝最新版本，并設置為默認瀏覽器。
下載 Visual Studio Code，之后單獨寫 JavaScript 的時候，使用 VS Code 編輯。
下載并在本地安裝 Node.js，目前（2017 年 3 月 9 日）最新版本為 7.7.1，請盡量安裝最新版本。
使用 Google 搜索，不能使用 Google 的使用 Bing 搜索，不要使用百度。
注冊一個 Github 賬號。

初學階段

學習時間：1 個月

初學階段主要是學習 HTML、CSS 和 JavaScript，掌握三種語言的基礎語法，并且掌握基本的布局方式、基本的 DOM 操作和算法。

HTML 和 CSS

推薦跟著 iMooc 的《HTML + CSS 基礎課程》學習，里面的每一小節都是指引式的教學，跟著指導學習 HTML 和 CSS 的基礎語法。

鏈接：http://www.imooc.com/learn/9

學習完上面《HTML + CSS 基礎課程》的所有內容之后，自行完成一個百度搜索的首頁，要求做到位置、顏色、間距等 99% 還原。不需要點擊可以搜索。

【3.12 更新】

課程中沒有提到的該學習的還有 flex 布局。

JavaScript

學習 JavaScript 可以上廖雪峰的網站上學習：

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

跟著目錄從上往下學習，一直到 Promise。

學習的過程中可以結合練習題學習，這里整理了一些：

https://github.com/iszu/web-learning/blob/master/JavaScript%E7%BB%83%E4%B9%A0%E9%A2%98.md

正確把代碼寫的簡單，短小。最好能一行實現。

當你學完 HTML、CSS 和 JavaScript 的基礎之后，完成這么一個小練習：

實現一個簡單的 TodoList

不懂啥是 TodoList 的自行 Google

限制

界面不能照抄網上已有頁面的風格，可以把網上的設計稿做成你的頁面，也可以自己設計
不能使用任何已有的庫（如 jQuery, Bootstrap, Vue 等）
增加、刪除、修改的操作執行后，頁面不能刷新

基本功能

增刪改查
增刪改查是指可以實現“增加”、“刪除”、“修改”、“查詢”四個功能。其中“查詢”不代表“搜索”，只要頁面刷新后，數據能夠正常顯示即可。
可以儲存 “內容” 與 “是否已完成” 的狀態
使用 localStorage 儲存數據
界面盡可能做的好看

加分項

可以只顯示“未完成”或“已完成”的條目
你可以把它們分開顯示，或者是通過按鈕切換顯示，或者你也可以自己想一種把它們分開顯示的方法
給每一條 todo 添加 “完成日期”
在第二點的基礎上，已過期的條目有不同的樣式
其它更牛逼的功能

進階階段

學習時間：1 個月

學習完上面的課程，你就已經是一個合格的美工了，能根據設計師的設計稿實現出頁面，但是還不是一個前端工程師，或者說還不是一個工程師。這一階段你要開始接觸一些作為程序員需要學習的東西。

Markdown

首先學會使用 Markdown 進行寫作，Markdown 是什么，怎么樣個語法；

git 版本控制

其次要學會使用 git 進行版本控制，還是剛剛的廖雪峰—— git 教程：

http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

并且把上面做的兩個項目，通過 git push 到 Github 上開源，README.md 使用 Markdwon 編寫。

HTTP, Ajax 和異步

學習 Ajax 的基本實現，在這個階段你會接觸到 JavaScript 的異步編程，你得自行了解什么是異步，并且會開始基礎 HTTP 協議，請自行了解 HTTP 狀態碼，請求頭，響應頭等基礎知識，并了解 TCP/IP，HTTP，HTTPS 協議的概念和關系。接著了解 JavaScript 的同源策略，為什么需要同源策略，以及如何跨域。

高級階段

學習時間：6 個月以上

【3.12 更新】

這個階段你會開始多終端前端的開發，了解響應式布局，接觸前端工程化和前端框架，并開始深入學習 JavaScript 的深入內容，包括 ES6、ES7 等。

響應式布局

了解響應式布局的應用范圍、基本原理。學習 em, px, rem, vh, vw 等單位的使用。

ECMAScript 6

學習 ECMAScript 6，了解 ECMAScript 和 JavaScript 的關系，具體文章可以看阮一峰的《ECMAScript 6 入門》，另外可以參考我寫的《ECMAScript6 學習筆記》。

NPM

自行找教程學習 npm 的使用，接觸前端工程化，了解 Gulp, Webpack 等工具的用處，并在本地自己搭建一個工程化環境。

前端框架

自行找教程學習 Vue.js 或 React 或 Angular 等前端框架，并嘗試使用這些框架搭建一個單頁面應用。以下以 Vue.js 舉例：

學習 Vue.js 基礎語法，一定要看官方的文檔來學習：https://cn.vuejs.org。
學習使用 Vue-cli 在本地一鍵搭建 Vue.js 項目。
本地開發一個 Todolist 的 Vue.js 版本，同樣使用 localstorage 進行存儲。
學習使用 Github pages 部署開發好的 Todolist，可以讓別人一起使用。
了解 Vue.js 2.0 的內部原理和外部思想：

Virtual DOM
數據監聽
render 函數
單向數據流
Vue.js 的 Lifecycle
服務端渲染的原理
Vuex 和 Vue-Router
……

Canvas 相關

了解 Canvas API 的使用，懂得使用 Canvas 制作動畫，以此來制作一些更炫酷的前端效果，如圖片背景的高斯模糊等。

深入階段

學習時間：無限

這個階段是作為一個前端繼續精進自己的一個階段，你已經可以勝任小型項目了，但是還有一些細節需要你一直不斷的學習。

前端儲存

前端儲存知識點：

儲存技術有哪些？
Cookie, SessionStorage, LocalStorage 有什么區別？
……

History API

什么是 History API，為什么要增加這個功能？

性能優化

學習有關前端性能優化的相關知識等：

如何縮短白屏時間
如何提升 CSS3 動畫的性能
……

安全

學習有關前端的安全相關知識等：

通信安全

如何保障 Ajax 通信安全

XSS 攻擊

什么是 XSS 攻擊
如何防范 XSS 攻擊

CSRF 攻擊

什么是 CSRF 攻擊
如何防范 CSRF 攻擊
CSRF 攻擊和 XSS 攻擊的區別是什么

……

兼容性

有關 IE 瀏覽器以及老版本瀏覽器的兼容性問題的學習和解決，包括：

HTML 標簽的兼容性
CSS 樣式的兼容性
JavaScript 的 API 的兼容性
優雅降級與漸進增強

學習后端

等到前端學習的差不多了，可以通過 Node.js 來接觸后端的開發，這里不再詳述。

penAPI，也稱為開放平臺，是服務型網站常見的一種應用，在許多業務如海外倉WMS業務中，OpenAPI平臺的存在就不容忽視。那么，產品經理、尤其是不懂技術的產品經理，要怎么參與搭建OpenAPI平臺？不妨一起來看看這篇文章，或許會對你有所啟發。

一、什么是OpenAPI平臺？

OpenAPI即開放API，也稱為開放平臺，是服務型網站常見的一種應用，網站的服務商將自己的網站服務封裝成一系列API（Application Programming Interface，應用編程接口）并搭建一個對外開放的平臺提供給第三方開發者使用，它提供了一套標準的API接口，讓不同的業務系統可以通過這些接口進行交互和數據共享。這種行為就叫做開放網站的API，所開放的API就被稱作OpenAPI或者OpenAPI平臺。

二、為什么需要OpenAPI平臺？

在海外倉WMS業務中，其他上游系統可以通過OpenAPI與海外倉進行數據交互和信息的傳遞，而不用從A系統導出數據，然后再登錄海外倉的系統再手動導入進去，極大地提升了用戶的體驗。

無OpenAPI的模式

如果沒有OpenAPI的時候，用戶要將數據推送到海外倉WMS中，則需要從電商平臺或者電商ERP中手動導出業務數據，然后再登錄海外倉OMS，根據導入模板去填寫業務數據，最后再導入到OMS中，再通過OMS推送到WMS中。而且WMS作業完成之后，雖然OMS可以看到最新的業務狀態，但是由于沒有對外的API，所以外部的系統并不知道最新的狀態，還需要人工手動根據OMS的最新狀態（數據）去更新電商平臺或者電商ERP的狀態（數據）。

如果引入了OpenAPI之后，只需要電商平臺或者電商ERP和海外倉的OpenAPI完成了對接之后，這一切都不要手動去處理，系統可以自動完成相關的數據傳遞，包括上游系統主動推送給海外倉和海外倉反饋最新的數據給上游系統等。

有OpenAPI的模式

三、OpenAPI和海外倉系統的交互示意圖

OpenAPI和海外倉系統的交互示意圖

在前面海外倉OMS的章節有介紹過，在海外倉WMS領域中，OMS承擔的是一個客戶端的角色，也是WMS的上游端，所以一般來說外部系統是先通過OPenAPI這個通道觸達到OMS，然后再由OMS處理、轉化之后再推送到WMS中。幾乎很少有直接通過OpenAPI直接觸達WMS的玩法，海外倉領域中OMS和WMS一般都是配套出現的，很多業務邏輯都掛在OMS層面，當然如果需要特殊定制讓OpenAPI的數據直接推送到WMS層也不是不可以，國內倉的玩法就是這樣做的，稍后我們會進行介紹。

要注意的是，文中提到的OpenAPI平臺是指海外倉作為提供方去建設的平臺，通俗點可以理解為是上游系統去接入海外倉WMS，而不是海外倉WMS去接入上游系統。所以，嚴格來說電商平臺并不是通過OpenAPI去接入海外倉OMS的，而是海外倉OMS通過電商平臺的OpenAPI去接入電商平臺，這個模式和電商ERP接入海外倉OMS是不太一樣的，剛好相反。

對于國內倉WMS來說，由于各家的倉儲系統不太一樣，發展歷程也比較悠久，很多國內倉都沒有對應的OMS，而且京東，淘寶都分別做了相關的“業務系統標準化對接平臺”，例如阿里的奇門，京東的虎符等，所以在國內電商領域，電商ERP會接入奇門，而國內倉也會接入奇門，大多數場景下就不需要倉庫WMS單獨去提供額外的OpenAPI去給ERP接入了，除非是一些耦合性比較高的特殊需求。

阿里奇門的作用說明

隨著電子商務發展，商家所使用到的各類軟件越來越多，各個軟件之間沒有相互打通，形成一個個信息孤島，給商家的使用帶來種種不便，商家要求各個系統之間的對接需求已經越來越迫切。
目前在行業內已經有部分系統直接由服務商之間完成了系統軟件的對接，但是由于沒有統一的接入標準，導致接入較混亂，對接接口的版本也參差不齊，往往這樣的系統對接不具有可復制性，多個系統之間的對接，需要多次開發，給商家的使用和功能迭代升級帶來了諸多的不便，同時也給服務商帶來額外的維護、開發成本。
為了滿足商家需求，讓商家能夠突破各個業務系統之間的信息孤島，提升商家在各個系統之間的操作效率，解決各個系統之間標準化對接的痛點，我們推出了奇門項目。
奇門項目一期支持ERP、WMS 之間的系統標準化對接，通過構建 ERP、 WMS 系統之間標準通信協議來實現不同系統之間的打通。對商家來說，省去了更換系統軟件所帶來的額外開發成本。對 ISV 來說，省去了與多家ERP、 WMS系統對接難的問題，ERP通過一次對接奇門項目，打通與所有WMS之間的通信，WMS通過一次對接奇門項目，可以適配所有ERP軟件……

四、產品經理如何去參與搭建OpenAPI

前面大概介紹了什么是OpenAPI，為什么需要OpenAPI，以及海外倉的OpenAPI背后是用OMS來承接相應的數據，接下來就來介紹一下，作為產品經理應該怎么參與搭建OpenAPI。

很多人以為，OpenAPI是技術相關的事情，應該全權交給技術去處理，自己壓根就不用管。但是這種想法是不對的，是片面的，對于OpenAPI的技術細節方面作為產品經理確實可以不用參與，但是其它方面的內容產品經理都是需要去參與的。

不要把OpenAPI當作一個技術名詞去理解，而是要把搭建OpenAPI平臺作為一個需求，作為一款產品去對待。去分析它的商業目標是什么，用戶群體是誰，解決了什么問題，創造了什么價值。細化到具體的產品設計方案就是有多少套系統，有多少業務場景，有多少功能模塊，這些和做一款信息化系統并無二致。

1. OpenAPI平臺有哪些內容需要搭建？

如果是搭建一個OpenAPI平臺，一般來說會有兩個端，分別的：

開放平臺端，也可以稱之為用戶端，用戶是指需要接入OpenAPI的開發者們，他們需要在OpenAPI平臺上查看API接口文檔，查看開放平臺的接入方式，查看自己申請的應用APP和接口調用的情況等。

API管理后臺，也可以稱之為管理端，使用者是接口的提供商，例如海外倉需要對外提供開放平臺的接口，那么海外倉就需要搭建相關的API管理后臺，用來發布接口，審核開發者的資質，還有監控一些接口的日志等。

所以，當產品經理接收到了任務需要去搭建OpenAPI平臺之后，并不是說把這個事情簡單翻譯一下丟給技術人員就好了，實際上還是要把它當作一個大的項目，大的需求，去做業務的分析和梳理，做競品的調研，做用戶畫像的梳理等。起碼要搞清楚有多少個端（系統），有多少功能模塊，有幾類使用的用戶等……

2. 用戶端的搭建

一般來說開放平臺的用戶端會分成這么幾個部分：

其中API文檔和接入指南一般都是直接對外開放的，訪問相關URL就可以直接訪問，不會做權限的控制。

Shopee開放平臺

谷倉開放平臺

而控制中心/工作臺則需要注冊成為了開發者，登錄賬號和密碼后才可以訪問，里面一般就是包含了自己的個人信息，接入的APP，還有一些接口調用日志，消息通知等。

4PX的開發者工作臺

Shopee的開發者控制中心

3. 后臺管理端的搭建

相較于用戶端來說，內部管理端的競品非常不好找，因為這個內容一般都是不對外開放的，所以這個時候產品經理往往要想好另一條路：就是多和研發人員溝通，確認一些技術需求，同時梳理出典型的業務場景，通過這些場景去設計內部的管理端功能。

例如，如果需要在用戶端需要開發者入駐，那么開發者入駐的時候會填寫一些申請信息，后臺管理端就需要有開發者資質審核的功能模塊。

同樣的，如果用戶端的開發者申請開通了一些APP應用，也是需要后臺審核的，那么后臺管理端也需要有對應的審核功能模塊。

然后前臺的一些API文檔和接入文檔等可能會不定期的更新，那么后臺管理端可能就需要有CMS（內容管理系統）的功能模塊，這樣才可以快速地完成修改和更新。

針對技術部分的內容，一些API的調用可能比較敏感，需要做費用的計算，調用次數的限制，日志的統計，還有異常的監控等，所以這些都需要在后臺管理端去完成。

接口大師后臺管理系統

4. 業務接口的梳理

通過前面3個部分內容的學習，我們知道了原來搭建一個OpenAPI平臺要做這么多事情，有這么多內容，并不是想象中的做個“甩手掌柜”就夠了。

如果要從0開始去搭建一個OpenAPI平臺確實要做很多事情，OpenAPI搭建成本比較高，適用于有多個開發者要接入的場景，所以一般都是業務量到了一定量級之后才會去做這件事。如果目前只有少量的用戶需要接入海外倉系統，那么可以考慮用MVP的思路去實現，不是上來就搭建一個OpenAPI平臺，而是先搭建對外的技術接口，然后整理相關的說明，用一個在線文檔或者Word等方式交付。

如果是以MVP的方式去交付，作為產品經理需要做的事情就稍微少一些，大概是下圖中的這么一些：

產品經理怎么輸出接口文檔

關于產品經理輸出接口文檔這件事，很多人都會有一個誤區，覺得這個東西是技術相關的內容不需要自己參與過多。但是實際上從我的個人經驗來看，如果純粹由技術輸出接口文檔，對于接入方來說非常痛苦，要么看不懂文檔，要么發現有些接口調不通，要么就發現文檔閱讀體驗賊差等，對于開放平臺方來說可能是偷懶了，但是接入方的產品和研發往往就很痛苦了。

而且從API文檔也可以看得出對方的研發能力，一般小規模的技術團隊或者整體能力偏差的技術團隊，輸出的API文檔都比較爛，會讓客戶產生一些不信任感，感覺不安全。

所以我都是建議產品經理要參與到開放平臺或者開放接口的搭建過程中去，要和技術進行協同，你不懂技術方面的東西那就交付給研發去搞定，但是體驗方面的內容、業務和邏輯的表達方面的內容產品經理是需要把關的，大家都是同為一體的，應該共同為最后的交付結果（API功能和API文檔）承擔責任。

海外倉的OpenAPI需要開放哪些接口，這個是沒有標準的，需要結合實際的業務去選擇，這里我把行業內做得比較好的一些友商的開放平臺整理了一下，大家可以直接看他們的接口文檔，對照學習和輸出即可。

其中做得最好的應該是谷倉的開放平臺，整體的體驗和邏輯說明都很優秀，值得反復看看。

https://open.goodcang.com/（重點推薦）

https://open.4px.com/apiInfo/api

https://developer.winit.com.cn/

五、API對接方面的學習和提升

OpenAPI開放平臺這個項目說大也大，說小也小，和業務需求有直接的關系，但是考慮到后續大家肯定還是會有機會經歷這一塊的，所以我整理了相關的學習資料和參考資料在文末，等后續要做這一塊業務的時候再翻出來查閱即可。

1. OpenAPI平臺

https://open.weixin.qq.com/

https://open.shopee.com/

https://open.lazada.com/

https://partner.tiktokshop.com/doc/page/63fd7444715d622a338c5097

2. 接口API的一些知識

https://juejin.cn/post/6987377856447774734

https://www.ruanyifeng.com/blog/2014/05/restful_api.html

https://www.ruanyifeng.com/blog/2019/04/oauth_design.html

http://www.yesx2.com/

https://www.imooc.com/learn/68/

3. 接口調試工具

https://www.bilibili.com/video/BV1ae4y1y7bf/?share_source=copy_web&vd_source=52af3a6250261fa8c6e13c736f8e3884

專欄作家

我叫維他命（Vitamin），微信公眾號：PM維他命。前PHPer，做過在線教育類產品，也做過4年多的跨境倉儲物流方向的產品，目前是一位外貿SaaS領域的供應鏈產品經理。主要專注于WMS/OMS/TMS/BMS/ERP等領域，分享供應鏈相關的產品知識。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。

我不是前端工程師，對于前端知識略有研究，因此這篇文章是咨詢了幾位前端工程師才斗膽發出來的。或許有不對有瑕疵，一定要提醒我。

那么，回到今天的主題。如何成為前端工程師？

首先前端工程師的學習路線分為：

以下我們會按照以上的路線整理教程。

一、開發工具：sublime、HBuilder

sublime==> 前端開發工具技巧介紹

HBuilder==> HBuilder 使用教程

(開發工具只是輔助，具體選擇看個人的喜好)

二、基礎：HTML， CSS教程

選擇一（w3c的教程）：HTML 教程 + HTML 5 教程 + CSS 教程

選擇二（imooc教程）： HTML+CSS基礎課程 + 如何用CSS進行網頁布局 + 網頁布局基礎-慕課網 + 網頁簡單布局之結構與表現原則

選擇三（網易云課堂）：oeasy教html、css網頁設計與制作(html5教程) 、HTML5入門 - 網易云課堂、 8小時學會HTML網頁開發

任意選擇其一進行學習即可。

三、進階：Javascript，jQuery

Javascript==> JavaScript 教程（w3c）或 JavaScript - 網易云課堂或李炎恢JavaScript教程第一季

或者JavaScript入門篇-JavaScript入門視頻教程和 JavaScript進階篇_JavaScript視頻教程

jQuery==>jQuery 教程 | 菜鳥教程

或者 jQuery基礎視頻教程和 jQuery基礎修煉圣典_DOM篇_jQuery視頻教程和 jQuery基礎修煉圣典和 jQuery基礎修煉圣典

實戰：網頁定位導航特效 + 瀑布流布局-慕課網 + 搜索框制作-慕課網

或者jQuery 實戰經典

四、高級：AJAX 教程

AJAX 教程 | 菜鳥教程或者 Ajax全接觸-慕課網

五、框架擴展學習：zepto、Bootstrap、React、VUE、Angular

Bootstrap==> http://v3.bootcss.com/ || Bootstrap 教程

zepto==> GMU API 文檔

React==> 用于構建用戶界面的JAVASCRIPT庫 || React 入門實例教程

Angular==> AngularJS 教程 || AngularJS中文網

六、調試工具：Firebug

Firebug 教程 || WEB調試工具-Firebug-慕課網

七、網站優化

seo： SEO在網頁制作中的應用

前端性能優化： Yahoo軍規-慕課網 || 網站前端性能優化總結

在線咨詢

上一篇：Axure 小技巧：翻滾吧頁面
下一篇：如何申請成為淘寶直播主播

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商