个寒假回来，好几个同学都来问我或者自己开始学起了前端，前端入门虽然简单，但是想要做好很难，是一个要通十行才能精一行的工作。再这几年 MVVM 框架的大肆流行，前端已经不是以前用 jQuery 写一写就可以的时代了。于是我写下这篇文章，来给大家一个参考。

首先，请大家牢记以下几点：

1. 前端不简单！前端不简单！前端不简单！
2. 前端和美工不一样！不是只会 HTML、CSS、JavaScript 就行的。
3. 程序和其他的行业不一样，经验是十分重要的，不管看多少书，都逃不过要经常的练习。
4. 在学会使用 JavaScript 实现相同操作之前，不要使用 jQuery。
5. JavaScript 和 Java 的关系如同雷锋和雷峰塔的关系一样，并没有什么关系！

前期准备工作

1. 下载好 Sublime Text 3，并自行找教程安装 Package Control。安装完后使用 Package Control 安装 Sublime Text 的汉化包，名字叫做 ChineseLocalizations。之后单独写 HTML 和 CSS 的时候，使用 Sublime Text 编辑。
2. 下载 Chrome 浏览器，目前（2017 年 3 月 9 日）最新版本为 56，请尽量安装最新版本，并设置为默认浏览器。
3. 下载 Visual Studio Code，之后单独写 JavaScript 的时候，使用 VS Code 编辑。
4. 下载并在本地安装 Node.js，目前（2017 年 3 月 9 日）最新版本为 7.7.1，请尽量安装最新版本。
5. 使用 Google 搜索，不能使用 Google 的使用 Bing 搜索，不要使用百度。
6. 注册一个 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

限制

1. 界面不能照抄网上已有页面的风格，可以把网上的设计稿做成你的页面，也可以自己设计
2. 不能使用任何已有的库（如 jQuery, Bootstrap, Vue 等）
3. 增加、删除、修改的操作执行后，页面不能刷新

基本功能

1. 增删改查
   增删改查是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 其中“查询”不代表“搜索”，只要页面刷新后，数据能够正常显示即可。
2. 可以储存 “内容” 与 “是否已完成” 的状态
3. 使用 localStorage 储存数据
4. 界面尽可能做的好看

加分项

1. 可以只显示“未完成”或“已完成”的条目
   你可以把它们分开显示，或者是通过按钮切换显示，或者你也可以自己想一种把它们分开显示的方法
2. 给每一条 todo 添加 “完成日期”
3. 在第二点的基础上，已过期的条目有不同的样式
4. 其它更牛逼的功能

进阶阶段

学习时间：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 协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。