产品经理必备技术知识体系（前端与后端）

type

status

date

slug

summary

技术框架

应用/表现层、PC端、HS、移动端、小程序、开放平台

由前端工程师负责开发，包括：移动端（安卓、ios）、小程序、H5、PC端等；

用户体验反馈：点击、弹窗、滑动等。

接口层、API网关、负载均衡

为业务服务层和前端表现层之间做数据传递和处理；

业务服务器、业务逻辑、产品逻辑、产品规则

toB产品经理负责。包括业务规则制定、业务流程实现与相关的需求设计；

T业务服务层门前端个项展示结果以来规则、计算逻辑合集的集合、是系统架构的核心部分。

基础服务器

前端通用的组件进行模块化设计、开发与封装，通常为反复用到的能力；

【基础服务层】包括系统Push、站内消息、电话能力、转账能力。

数据层

对底层数据库内容进行基础计算和包装、便于上层业务使用，例如点击率。

数据库

所有互联网产品产生的数据组织、存储、管理的地方；例如计算点击率和点T数据库击次数和访问次数。

技术数据

数据请求方式

GET:从服务端获取数据

POST：向服务器发送数据，创新新的内容

PUT：向服务端发送数据，更新已有内容

DELETE:向服务端发送请求，删除一个数据

Get和POST的区别

应用场景：

Get请求一般用于查询接口；

Post请求一般用于添加数据接口或者修改数据接口

安全性：

Get请求的请求参数都是放在url中，可以直接看到，不安全

Post请求的请求参数都是放在body（请求体）中，发送请求的时候不会被直接看到，相对安全。

传输的数据太小：

get请求最大为2Kb

post请求通过body传递参数理论上无限制

前后端数据传递的两种方式

写死：让一些参数或数据固定，不可变动，后续改动依赖前端

写死的好处：前端响应快，用户体验好

接口：数据和参数不固定，逻辑可以由服务端修改

接口的好处：灵活度高，要修改时不需要发客户端版本

接口文档与联调

接口文档：将某个接口定义（输入参数，请求方式、输出参数）记录下来的文档，是前后端协调的重要依据

联调：前后端确认接口是否按设计工作，是否畅通

HTML

定义：

HTML全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文本格式统一，使分散的Internet资源连接为一个逻辑体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同的位置的信息资源随机方式进行连接，为人们查找，检索信息提供方便。

产品应用：

产品设计出一个页面，页面上每一个元素（包括控件、信息、图片）都由HTML元素（例如input、P、img）来定义或者说实现

这些页面控件、信息、图片的魔性同样可以由HTML元素属性来实现，例如通过设置placeholder属性值，可以为输入框加入提示文案，通过设置draggable属性，让元素可以拖动。在页面结构层面了解设计与技术的关联，可以帮助从技术的角度撰写产品方案

了解技术会把页面结构拆解为元素及其属性，我们在写文档时，也应当以这种思路拆解描述页面，写清楚页面有哪些信息，哪些输入控件，哪些显示控件，这些控件的属性是否需要自定义，还是直接使用浏览器或操作系统的默认样式

了解元素及其基本属性，也可减少产品方案中对细节描述的遗漏

CSS

定义：

CSS指的是层叠样式表*（Cascading Style Sheets）

CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素

CSS节省了大量工作，它可以同时控制多张网页的布局CSS的样式属性，例如color、border、font-style等，可以控制HTML元素的字体颜色、边框、字体样式等等

CSS将每个HTML元素看作一个盒子（这也就是“盒子模型”），以控制其内外边距、边框等

产品应用：

在详细的产品设计实现方案中，不仅要定义页面具有哪些元素，也要定义这些元素的样式、外观、动效等。在技术实现上，这是两个不同的层面，由不同的语言来实现；因而在文档写作中，将元素与其样式区分开来进行描述，而不是将所有说明混杂在一起（显然这个工作往往需要和设计进行配合）

例如在描述按钮时，不仅要指明按钮元素的基本属性（例如按钮文本，按钮类别），也应该指出按钮在不同状态的不同样式

在宏观层面，随着设备形态的多样化，样式适配也变成了一个很大的主题也应是产品设计中应该考虑的重要方面。

以网站设计而言，同样的内容元素，在手机和PC上往往需要定义不同的样式，对此也有很多技术实现方案，产品经理应对样式适配的借本认知，才能与技术共同商定适配方案

JAVA Script

定义：

上述可知，使用HTML标记和CSS可以帮助搭建web页面，尔JavaScript的使用，可以为这些页面增加行为和功能（比如对用户行为做出响应、处理事件、更新页面、与服务端通信），从而成为真正意义上的web应用

HTML5是HTML的最新版本，但实际上当我们谈论HTML时，不仅仅指代标记，而是HTML标记，CSS样式，java Script 脚本这些技术的结合，这些技术共同帮助构建web应用

通过在代码中引用JavaScript文件或者直接将脚本放在script元素中，就可以在web页面中增加JavaScript

工作方式

JavaScript的工作方式是通过DOM对页面进行更新

浏览器在加载页面时，对HTML中每一个元素会创建一个该元素的对象，把它与所有其他元素一起放在一个类似的树的结构中，这个树即为DOM(文档对象模型 Document object Model),DoM是浏览器对于页面结构的内部表示

JavaScript可以通过DOM对页面元素进行访问，修改、增删。例如，可以使用document.getElementBy id在DOM中查找元素，使用元素innderHTML属性修改其内容，然后浏览器会近乎与实时的对DOM以及页面进行更新

处理事件

浏览器在显示页面时，会有许多事件发生，例如按钮点击事件、数据到达事件、事件到期事件，使用JavaScript编写事件处理程序，可以对这些事件进行处理

以表单的按钮点击事件为例进行说明：用户在输入框输入信息，点击按钮提交信息后，可以在当前页查看已经提交的信息

实现思路：首先通过DOM获取按钮元素，并为按钮的onclick属性设置一个处理程序。

该处理程序需要通过DO访问输入元素并通过输入元素的value属性获取用户输入值，最后再通过DOM增加到页面中。这样在用户点击按钮时，就会执行处理程序，获取用户输入并增加到页面中，从此实现用户与系统的交互

JavaScriptAPI 通过使用JavaScitptAPI(API即应用编程接口，提供一组对象，方法和属性，可以用来访问这些技术和所有功能；对象可以理解为是属性的集合)可以为页面增加更多新的功能，如视频播放、本地存储、地理定位等

以地理定位为例，通过调用地理定位API,使用其getCurrentPosition方法可以获取当前位置信息（浏览器可以通过IP定位、GPS定位等方式获取职位等信息）并进行处理和显示；使用watchPosition方法可以对位置更新进行实时监控和报告；使用ClearWatch以停止监视位置。