自助建站内有乾坤,产品经理的技术常识

编辑导语:产品经理在曰常工作中涉及的X很多,除了对整个项目进行把控之外,对于技术的一些了解和把握也需要更深一步,才能在工作中更加游刃有余;本文作者介绍了产品经理的一些技术产生常识,我们一起来看一下。

近期因为X需要在做类似自助建站的工具,在做这一工具的过程中加深了前后端开发知识的了解;本文将从做这个工具的全过程出发讲对自助建站的一些理解,涉及到一些前后端开发知识,适合初级阅读。

我们对自助建站典型的应用场景应该并不陌生,电商大促的时候,在各大电商app能看到很多H5活动页面,这么多H5活动页面,每天都在变,都是技术人员开发实现的吗?有些朋友想创建个人网站无奈不懂代码,Xwix、凡科、起飞页等工具,不需要写一行代码就可以创建一个漂亮的网站,这是怎么做到的呢?

Q1:电商的H5活动页面,都是技术人员开发实现的吗?【自助建站的适用场景】电商大促要上很多活动,全都由技术人员开发并不现实,很多页面是由产品、运营等技术小白用自助建站工具搭建而成的。

自助建立网页的工具适用于以下几种情形:

  • 项目时间紧张,上线时间短;
  • 页面相似度高,功能相近;
  • 研发性价比低;
  • 不懂X开发技术;

适用人X是产品/运营等技术小白,核心需qiú是快速搭建承载X功能的页面,适用场景是工作中遇到项目时间紧迫需要快速上线的情况,如电商大促活动时间紧凑;或者无网站X经验,希望简单套用模板;不懂代码的人员也可以X简单的cāo作配置页面,实现页面快速上线。

Q2:不写一行代码创建一个漂亮的网站是怎么做到的呢?【自助建站的实现原理】在此之前,我们先来了解web的基础技术知识。

一、技术知识点1:建设网站的liú程和必需品

传统建设网站的liú程如下:

自助建站内有乾坤,产品经理的技术常识

网站建设需要至少三样东西:域名、X器和程序。

1)域名:在数据传输时对计算机的定位标识,不用去记住能够被机器直接读取的IP地址数串。域名具有唯一性,让别人找到网站;就像名字是我们身份识别的一种方式,帮助区分不同的人,域名就是网站的名字。

不同之处在于,世间同名同姓的人很多,但域名与IP地址是一一对应的,具有唯一性。

二级域名:除了域名,我们还会经常听到二级域名,它们之间有什么区别?最大区别是一级域名要huā钱,二级域名是X的;二级域名是属于一级域名下的域名;如baidu.com是一级域名,而百度下的各个应用如百度网盘pan.baidu.com,百度知道zhidao.baidu.com,百科baike.baidu.com等都是二级域名。

域名备案:比如我们需要到XXXX,网站域名也需要进行备案,方便网络安全管理。

2)X器/虚拟主机:用户需要在网页上请qiú数据(get),或者向网页传输数据(post),需要一个数据存储的地方,X器能处理复杂的X逻辑并对数据进行存储管理。

3)网站程序:用户可以使用云凤蝶、wix等第三方模板工具建立网站程序。

自助建站工具把域名和X器的步骤都节省了,用户不用自己mǎiX器,在网站程序这一步中X了各种设计好的模板。

二、技术知识点2:网页是如何构成的

用户对自助建站感知最强的地方是网站程序这一步,无需手写代码,X拖拉拽的方式搭建一个网页,所见即所得。这又是怎么做到的呢?我们先了解传统网页是如何构成的。

HTML,CSS,JavaScript共同构成了我们看到的所有网页展示和交互;HTML是超文本标记语言,CSS是级联样式表,JavaScript是脚本语言,用于前端页面的DOM处理。

自助建站内有乾坤,产品经理的技术常识

我们用chrome开发者工具(F12或ctrl+shift+i)可以看到这三者是如何作用的。

HTML:定义页面内容和结构,HTML格式文件存储在X器上,当客户端向X器请qiú页面资源时,就会解析呈现出用户看到的页面。

XElements就会看到HTML文件,查看并修改元素的代码(edit as HTML)时,可以直观感受到HTML是如何定义页面内容和结构的;比如X左图定位到了同huā顺guān网的logo元素,修改元素代码时将logo的图像文件(<img>)册刂掉了,得到了右图的效果;修改只对当前页面渲染生效,不会修改X器的源代码。

CSS:定义页面样式和表现,如何显示HTML元素,包括大小、颜sè等;定位到元素后,可以Xstyles修改元素的CSS属性,比如将同huā顺的导航栏X从白sè改为了蓝sè,可以更改字体大小样式等。

自助建站内有乾坤,产品经理的技术常识

JavaScript:为页面增加行为和功能,即交互。

自助建站的模板X各种模板和布jú帮助用户跳过了HTML和CSS,X锚点跳转的方式实现了简单的交互。

模板中每个板块的长宽、图文布jú都已经设定好,用户只需要简单替换图片、X或者添加简单的页面跳转交互;虽然现在市面上如云凤蝶、wix等自助建站工具能帮助技术小白快速搭建页面,但它们基本做的都是静态页面,没有数据库的支撑;如果用户想要搭建支持更强大功能的网页,比如数据动态变化、组件前端位置信息、样式等可修改,现在市面上的工具并不能满足需qiú。

三、技术知识点3:静态网页和X页的区别

静态网页和X页的核心区别在于X是否有数据库的支撑,可以简单描述为网页上展示的内容是否要变化;静态网页不需要X程序干预处理,数据无需更新,不需要后续维护;X页需要由数据库X数据支撑。

比如Wix和云凤蝶都是静态网页,Wix(网页)X的页面模板已经确定了页面布jú,能替换修改的只有固定模板中的图片和X,不支持修改组件,数据也不会动态变更;云凤蝶(H5)排版上不会涉及横向分布,自上往下添加组件;所有组件都是固定样式,不支持用户进行修改组件,页面上的可编辑的数据有限,数据也不会动态变更。

是否能有支持组件修改及数据库支撑的X页自助建站工具?

先从市面上已有的自助建站工具看看liú程,下方为简化的liú程图:

  • Step1.新建页面/编辑已有的页面/复用已有的页面;
  • Step2.为页面添加组件,从组件库中选择组件并拖拽至页面上;
  • Step3.修改配置信息,替换图文;
  • Step4.增加交互;
  • Step5.保存预览并发布;

自助建站内有乾坤,产品经理的技术常识

前面说到静态网页和X页的核心区别在于X是否有数据库的支撑,网页上展示的内容是否要变化。

X页需要由数据库X数据支撑,包括具体的组件位置信息(如排列方向、宽高、间距等)、组件前端显示的样式及组件呈现的数据。

自助建站内有乾坤,产品经理的技术常识

从两张liú程图对比可以看出,静态网页只能替换已有组件的图片和X,X页的修改配置功能则强大很多,支持修改组件位置信息、修改组件前端配置以及参数来源。

1)组件位置信息:Web页面不同于H5页面的上下排列,需要考虑组件的位置信息,并不是简单的拖拉拽就能定位的,具体的位置信息更改包括组件排列方向、组件的宽度高度、组件的内外间距,如下方思维导图。

所有HTML元素都可以看作是盒子,在CSS中,box model盒子模型是用来设计和布jú时用的。

自助建站内有乾坤,产品经理的技术常识

Flex direction规定组件排列的方向,常见的有row(行)和column(列)Margin、Border、Padding等定义见下图。

自助建站内有乾坤,产品经理的技术常识

2)前端配置更改:X页支持修改组件前端显示的样式,比如组件标题的内容和位置、是否有悬浮框,某一个图表组件的颜sè、图例、滚动条等。可能前端在开发组件时,已经写好了接收参数后的渲染逻辑,包hán了交互逻辑。

自助建站内有乾坤,产品经理的技术常识

前端说完了,X页的关键是如何与数据库建立传输关系。

3)参数来源配置

四、技术知识点4:不同的数据库

数据库分为两种,关系型数据库RDBMS和非关系型数据库NoSQL。

关系型数据库采用关系模型来X数据,X数据库有Oracle,Microsoft SQL Server,MySQL,PostgreSQL。

NoSQL则是非关系型、分布式的数据存储系统,以键值对存储,结构不固定,X数据库有MongoDB。

明显感知区别就是,关系型数据库就像我们平时用的excel表格,数据以行、列的形式存储,而非关系型数据库如MongoDB则是以键值对形式存储{key=value}字符串,文档类似json对象。

MongoDB有专门的概念,如database数据库;collection数据表/X;row/document数据记录行;column/field数据字段。

XparamMap字段映射,name前端字段名称,value后端映射字段,建立前端界面和后端数据库的传输关系。

自助建站内有乾坤,产品经理的技术常识

如果想要检测数据传输是否已正确建立,可以Xpostman等接口测试工具检测。

五、技术知识点5:发送请qiú的两种方式get和post

get是从X器拉取资源而不改变X器的资源,post是向X器提交数据;所以如果要检测数据传输是否建立,用get发送请qiú即可,如果能正确返回数据库中的数据,那么恭喜你传输已建立。

至此为此,X页的自助建站算是完成了,前端在开发组件库的时候,应该考虑最大化组件的扩展性和通用性,支持复用在多个X场景之中。

相较于静态页面的自助建站,动态页面自助建站需要对前后端开发知识有更多的了解,不再是“X”cāo作,产品人员在设计过程中也可以考虑如何让用户能够更X地掌握配置。

由于对前后端技术了解有限,也在mō索阶段,如果内容有误或不足之处敬请指正,非常感谢~

参考资料:

菜鸟学院HTML/CSS,JavaScript章节

《给产品经理讲技术》陈宇、巩X、高yáng、yáng俊勇

《产品经理必懂的技术那点事儿:成为全栈产品经理》唐韧

收藏 (0) 打赏

以上内容不错,打赏支持一下!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有教程资源,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

雄发创业网 自媒体是如何赚钱的 自助建站内有乾坤,产品经理的技术常识 https://www.xiongfawang.com/1241.html

常见问题

相关文章

自助建站内有乾坤,产品经理的技术常识-海报

分享本文封面