自助建站内有乾坤，产品经理的技术常识
近期因为业务需要在做类似自助建站的工具，在做这一工具的过程中加深了前后端开发知识的了解；本文将从做这个工具的全过程出发讲对自助建站的一些理解，涉及到一些前后端开发知识，适合初级阅读。
我们对自助建站典型的应用场景应该并不陌生，电商大促的时候，在各大电商app能看到很多H5活动页面，这么多H5活动页面，每天都在变，都是技术人员开发实现的吗？有些朋友想创建个人网站无奈不懂代码，通过wix、凡科、起飞页等工具，不需要写一行代码就可以创建一个漂亮的网站，这是怎么做到的呢？
Q1：电商的H5活动页面，都是技术人员开发实现的吗？【自助建站的适用场景】电商大促要上很多活动，全都由技术人员开发并不现实，很多页面是由产品、运营等技术小白用自助建站工具搭建而成的。
自助建立网页的工具适用于以下几种情形：
- 项目时间紧张，上线时间短；
- 页面相似度高，功能相近；
- 研发性价比低；
- 不懂专业开发技术；
适用人群是产品/运营等技术小白，核心需求是快速搭建承载业务功能的页面，适用场景是工作中遇到项目时间紧迫需要快速上线的情况，如电商大促活动时间紧凑；或者无网站制作经验，希望简单套用模板；不懂代码的人员也可以通过简单的操作配置页面，实现页面快速上线。
Q2：不写一行代码创建一个漂亮的网站是怎么做到的呢？【自助建站的实现原理】在此之前，我们先来了解web的基础技术知识。
一、技术知识点1：建设网站的流程和必需品
传统建设网站的流程如下：
CSS：定义页面样式和表现，如何显示HTML元素，包括大小、颜色等；定位到元素后，可以通过styles修改元素的CSS属性，比如将同花顺的导航栏文字从白色改为了蓝色，可以更改字体大小样式等。
JavaScript：为页面增加行为和功能，即交互。
自助建站的模板通过各种模板和布局帮助用户跳过了HTML和CSS，通过锚点跳转的方式实现了简单的交互。
模板中每个板块的长宽、图文布局都已经设定好，用户只需要简单替换图片、文字或者添加简单的页面跳转交互；虽然现在市面上如云凤蝶、wix等自助建站工具能帮助技术小白快速搭建页面，但它们基本做的都是静态页面，没有数据库的支撑；如果用户想要搭建支持更强大功能的网页，比如数据动态变化、组件前端位置信息、样式等可修改，现在市面上的工具并不能满足需求。
三、技术知识点3：静态网页和动态网页的区别
静态网页和动态网页的核心区别在于后台是否有数据库的支撑，可以简单描述为网页上展示的内容是否要变化；静态网页不需要后台程序干预处理，数据无需更新，不需要后续维护；动态网页需要由数据库提供数据支撑。
比如Wix和云凤蝶都是静态网页，Wix（网页）提供的页面模板已经确定了页面布局，能替换修改的只有固定模板中的图片和文字，不支持修改组件，数据也不会动态变更；云凤蝶（H5）排版上不会涉及横向分布，自上往下添加组件；所有组件都是固定样式，不支持用户进行修改组件，页面上的可编辑的数据有限，数据也不会动态变更。
是否能有支持组件修改及数据库支撑的动态网页自助建站工具？
先从市面上已有的自助建站工具看看流程，下方为简化的流程图：
- Step1.新建页面/编辑已有的页面/复用已有的页面；
- Step2.为页面添加组件，从组件库中选择组件并拖拽至页面上；
- Step3.修改配置信息，替换图文；
- Step4.增加交互；
- Step5.保存预览并发布；
前面说到静态网页和动态网页的核心区别在于后台是否有数据库的支撑，网页上展示的内容是否要变化。
动态网页需要由数据库提供数据支撑，包括具体的组件位置信息（如排列方向、宽高、间距等）、组件前端显示的样式及组件呈现的数据。
从两张流程图对比可以看出，静态网页只能替换已有组件的图片和文字，动态网页的修改配置功能则强大很多，支持修改组件位置信息、修改组件前端配置以及参数来源。
1）组件位置信息：Web页面不同于H5页面的上下排列，需要考虑组件的位置信息，并不是简单的拖拉拽就能定位的，具体的位置信息更改包括组件排列方向、组件的宽度高度、组件的内外间距，如下方思维导图。
所有HTML元素都可以看作是盒子，在CSS中，box model盒子模型是用来设计和布局时用的。
Flex direction规定组件排列的方向，常见的有row（行）和column（列）Margin、Border、Padding等定义见下图。
2）前端配置更改：动态网页支持修改组件前端显示的样式，比如组件标题的内容和位置、是否有悬浮框，某一个图表组件的颜色、图例、滚动条等。可能前端在开发组件时，已经写好了接收参数后的渲染逻辑，包含了交互逻辑。
前端说完了，动态网页的关键是如何与数据库建立传输关系。
3）参数来源配置
四、技术知识点4：不同的数据库
数据库分为两种，关系型数据库RDBMS和非关系型数据库NoSQL。
关系型数据库采用关系模型来组织数据，代表数据库有Oracle，Microsoft SQL Server，MySQL，PostgreSQL。
NoSQL则是非关系型、分布式的数据存储系统，以键值对存储，结构不固定，代表数据库有MongoDB。
明显感知区别就是，关系型数据库就像我们平时用的excel表格，数据以行、列的形式存储，而非关系型数据库如MongoDB则是以键值对形式存储{key=value}字符串，文档类似json对象。
MongoDB有专门的概念，如database数据库；collection数据表/集合；row/document数据记录行；column/field数据字段。
通过paramMap字段映射，name前端字段名称，value后端映射字段，建立前端界面和后端数据库的传输关系。
如果想要检测数据传输是否已正确建立，可以通过postman等接口测试工具检测。
五、技术知识点5：发送请求的两种方式get和post
get是从服务器拉取资源而不改变服务器的资源，post是向服务器提交数据；所以如果要检测数据传输是否建立，用get发送请求即可，如果能正确返回数据库中的数据，那么恭喜你传输已建立。
至此为此，动态网页的自助建站算是完成了，前端在开发组件库的时候，应该考虑最大化组件的扩展性和通用性，支持复用在多个业务场景之中。
相较于静态页面的自助建站，动态页面自助建站需要对前后端开发知识有更多的了解，不再是“傻瓜”操作，产品人员在设计过程中也可以考虑如何让用户能够更轻松地掌握配置。
由于对前后端技术了解有限，也在摸索阶段，如果内容有误或不足之处敬请指正，非常感谢~
参考资料：
菜鸟学院HTML/CSS，JavaScript章节
《给产品经理讲技术》陈宇、巩晓波、高杨、杨俊勇
《产品经理必懂的技术那点事儿：成为全栈产品经理》唐韧
本文作者 @RfSr 。
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
