编辑导语:产品经理在日常工作中涉及到很多业务。除了控制整个项目，他们还需要对技术有更深的理解和掌握，才能在工作中更加得心应手。笔者介绍一些产品经理技术代的常识。让我们看一看。
因为最近业务需要做一个类似自助建站的工具，在做这个工具的过程中加深了前端和后端开发的知识；本文将从做这个工具的全过程入手，谈谈对自助建站的一些认识，涉及到一些前端和后端的开发知识，适合初级阅读。
对于自助建站的典型应用场景，我们应该并不陌生。在推广电商的时候，各大电商app里都能看到很多H5的活动页面。如此多的H5活动页面每天都在变化。都是技术人员开发实现的吗？有朋友想创建一个个人网站，但是不知道代码。通过wix，柯凡，起飞页和其他工具，他们可以创建一个美丽的网站，而不用写一行代码。这是怎么做到的？
Q1:电子商务的H5活动页面是由技术人员开发和实现的吗？【自助建站适用场景】电商推广需要大量的活动，都是技术人员开发，不现实。很多页面是产品、运营等技术使用自助建站工具搭建的。
构建自助网页的工具适用于以下情况:
项目时间紧，上线时间短；页面相似度高，功能相似；RD性价比低；不懂专业开发技术；适用人群是产品/运营技术小白，核心需求是快速搭建一个承载业务功能的页面。适用场景是项目时间紧张，工作中需要快速上线的情况，比如电商促销活动日程紧张；或者没有网站制作经验，想简单套用模板；不懂代码的人也可以通过简单的操作配置页面，让页面快速上线。
Q2:你如何不用写一行代码就能创建一个漂亮的网站？【自助网站的实现原理】在此之前，我们先来了解一下web的基础技术知识。
一、技术知识点1:网站建设的流程和必要性
传统网站建设的流程如下:
网站至少需要三样东西:域名、服务器、程序。
1)域名:计算机在数据传输过程中的位置标识，不用记住机器可以直接读取的IP地址的数量。域名唯一，方便别人找到网站；就像名字是识别我们自己和帮助区分不同人的一种方式一样，域名是网站的名称。
不同的是，世界上有很多同名的人，但是域名和IP地址是一一对应的，唯一的。
备案域名:比如我们需要去公安机关办理身份证，网站的域名也需要备案，方便网络安全管理。
2)服务器/虚拟主机:用户需要在网页上请求数据或者向网页传输数据，需要一个数据存储场所。服务器可以处理复杂的业务逻辑并管理数据存储。
3)网站程序:用户可以使用云峰蝶、wix等第三方模板工具搭建网站程序。
自助建站工具省去了域名和服务器的步骤，用户不用自己买服务器。网站程序的这一步提供了各种设计模板。
2.技术知识点二:网页是如何形成的？
用户对自助建站感知最强的是网站程序，不需要手写代码，通过拖拽就可以建立一个网页。所见即所得。这是怎么做到的？我们先来了解一下传统网页是如何形成的。
HTML、CSS和Javascript共同构成了我们看到的所有网页展示和交互；HTML是超文本标记语言，CSS是级联样式表，Javascript是脚本语言，用于前端页面的DOM处理。
我们可以看到这三个如何与chrome开发者工具一起工作。
HTML:定义页面的内容和结构。HTML文件存储在服务器上。当客户端向服务器请求页面资源时，它将解析并呈现用户看到的页面。
单击元素查看HTML文件。当您查看和修改元素的代码时，您可以直观地感受到HTML如何定义页面的内容和结构。比如同花顺官网的logo元素，通过左图定位，修改元素代码时删除logo的图像文件，获得右图的效果；修改只对当前页面渲染生效，不修改服务器的源代码。
CSS:定义页面样式和呈现方式，如何显示HTML元素，包括大小、颜色等。定位元素后，可以通过样式修改元素的CSS属性，比如将同花顺的导航栏文字由白色改为蓝色，改变字体大小和样式。
Javascript:给页面添加行为和功能，也就是交互。
自助网站的模板通过各种模板和布局帮助用户跳过HTML和CSS，通过跳锚实现简单交互。
模板中各板块的长、宽、图形布局已经设置好，用户只需要简单的替换图文或者添加简单的页面跳转交互即可；市面上的云峰蝶、wix等自助建站工具虽然可以帮助技术小白快速建站页面，但基本都是做静态页面，没有数据库的支持；如果用户希望构建支持更强大功能的网页，比如数据动态变化、组件前端位置信息、样式等。，可以修改，现在市面上的工具都满足不了需求。
三、技术知识点三:静态网页和动态网页的区别
静态网页和动态网页的核心区别在于后台是否有数据库支持，可以简单描述为网页上显示的内容是否需要改变；静态网页不需要后台程序干预、数据更新和后续维护；动态网页需要数据库的数据支持。
比如Wix和云峰蝶都是静态网页。Wix提供的页面模板已经确定了页面布局，只能替换和修改固定模板中的图片和文字。不支持修改组件，数据不会动态更改。云峰蝶排版不会涉及横向分布，自上而下添加组件；所有组件都是固定样式，不允许用户修改组件。页面上可编辑的数据是有限的，数据不会动态变化。
有没有支持组件修改和数据库支持的动态自助建站工具？
先从市面上现有的自助建站工具看流程。以下是简化的流程图:
第一步。创建新页面/编辑现有页面/重用现有页面；2.将组件添加到页面，从组件库中选择组件并将其拖到页面上。第三步。修改配置信息，更换图文；第四步。增加互动；第五步。保存预览并发布它；
如前所述，静态网页和动态网页的核心区别在于后台是否有数据库支持，网页上显示的内容是否要改变。
动态网页需要有数据库提供的数据支持，包括具体的组件位置信息、组件前端显示的风格以及组件呈现的数据。
从两个流程图的对比可以看出，静态网页只能替换已有组件的图片和文字，而动态网页的修改配置功能要强得多，支持修改组件位置信息、修改组件前端配置和参数来源。
1)组件位置信息:网页不同于H5页面，需要考虑组件的位置信息，不是简单拖拽就能定位的。具体的位置信息变化包括元件排列方向、元件宽度和高度、元件内外间距，如下思维导图所示。
所有的HTML元素都可以看作是盒子。在CSS中，盒子模型盒子模型用于设计和布局。
伸缩方向指定元件排列的方向。常见的定义如行列边距、边框和填充如下图所示。
2)前端配置变更:动态网页支持修改组件的前端显示样式，如组件标题的内容和位置、是否有浮动框、某个图表组件的颜色、图例、滚动条等。可能前端在开发组件的时候，收到参数后就写好了渲染逻辑，包括交互逻辑。
就是这样。动态网页的关键是如何与数据库建立传输关系。
3)参数源配置
4.技术知识点4:不同的数据库
有两种数据库，关系数据库RDBMS和非关系数据库NoSQL。
关系数据库使用关系模型来组织数据。代表性的数据库有Oracle、微软SQL Server、MySQL和PostgreSQL。
NoSQL是一个非关系的分布式数据存储系统。它以键值对的形式存储，结构不固定，也就是说数据库有MongoDB。
明显的区别在于，关系型数据库就像我们平时使用的excel表，数据以行和列的形式存储，而MongoDB等非关系型数据库以键值对的形式存储{key=value}字符串，文档类似于json对象。
MongoDB有专门的概念，比如数据库database；集合数据表/集合；行/文档数据记录行；列/字段数据字段。
通过paramMap字段映射、名称前端字段名称和值后端映射字段，建立前端接口与后端数据库的传输关系。
如果要检查数据传输是否已经正确建立，可以通过postman等接口测试工具来完成。
动词 （verb的缩写）技术知识点5:发送请求的两种方式get和post
Get是在不改变服务器资源的情况下从服务器拉取资源，post是向服务器提交数据；所以如果要检查数据传输是否建立，只需用get发送请求即可。如果数据库中的数据能正确返回，恭喜传输建立。
至此，动态网页自助网站已经完成。前端在开发组件库时，要考虑最大化组件的扩展性和通用性，支持多种业务场景下的复用。
相比静态页面的自助网站，动态页面的自助网站更需要了解前端和后端的开发知识，不再是“傻瓜”操作。在设计过程中，产品人员还可以考虑如何让用户更容易掌握配置。
由于本人对前后端技术了解有限，目前还处于探索阶段。内容如有错误或不足，请指正。非常感谢~
参考资料:
菜鸟学院HTML/CSS，Javascript章节
陈愉、龚晓波、高杨、杨俊勇，给产品经理讲技术
《产品经理必须了解的技术:成为全栈产品经理》唐人
本文由@RfSr原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。
