中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：產(chǎn)品經(jīng)理在日常工作中涉及的業(yè)務(wù)很多，除了對整個項目進(jìn)行把控之外，對于技術(shù)的一些了解和把握也需要更深一步，才能在工作中更加游刃有余；本文作者介紹了產(chǎn)品經(jīng)理的一些技術(shù)產(chǎn)生常識，我們一起來看一下。

近期因為業(yè)務(wù)需要在做類似自助建站的工具，在做這一工具的過程中加深了前后端開發(fā)知識的了解；本文將從做這個工具的全過程出發(fā)講對自助建站的一些理解，涉及到一些前后端開發(fā)知識，適合初級閱讀。

我們對自助建站典型的應(yīng)用場景應(yīng)該并不陌生，電商大促的時候，在各大電商app能看到很多H5活動頁面，這么多H5活動頁面，每天都在變，都是技術(shù)人員開發(fā)實現(xiàn)的嗎？有些朋友想創(chuàng)建個人網(wǎng)站無奈不懂代碼，通過wix、凡科、起飛頁等工具，不需要寫一行代碼就可以創(chuàng)建一個漂亮的網(wǎng)站，這是怎么做到的呢？

Q1：電商的H5活動頁面，都是技術(shù)人員開發(fā)實現(xiàn)的嗎？【自助建站的適用場景】電商大促要上很多活動，全都由技術(shù)人員開發(fā)并不現(xiàn)實，很多頁面是由產(chǎn)品、運(yùn)營等技術(shù)小白用自助建站工具搭建而成的。

自助建立網(wǎng)頁的工具適用于以下幾種情形：

• 項目時間緊張，上線時間短；
• 頁面相似度高，功能相近；
• 研發(fā)性價比低；
• 不懂專業(yè)開發(fā)技術(shù)；

適用人群是產(chǎn)品/運(yùn)營等技術(shù)小白，核心需求是快速搭建承載業(yè)務(wù)功能的頁面，適用場景是工作中遇到項目時間緊迫需要快速上線的情況，如電商大促活動時間緊湊；或者無網(wǎng)站制作經(jīng)驗，希望簡單套用模板；不懂代碼的人員也可以通過簡單的操作配置頁面，實現(xiàn)頁面快速上線。

Q2：不寫一行代碼創(chuàng)建一個漂亮的網(wǎng)站是怎么做到的呢？【自助建站的實現(xiàn)原理】在此之前，我們先來了解web的基礎(chǔ)技術(shù)知識。

一、技術(shù)知識點1：建設(shè)網(wǎng)站的流程和必需品

傳統(tǒng)建設(shè)網(wǎng)站的流程如下：

網(wǎng)站建設(shè)需要至少三樣?xùn)|西：域名、服務(wù)器和程序。

1）域名：在數(shù)據(jù)傳輸時對計算機(jī)的定位標(biāo)識，不用去記住能夠被機(jī)器直接讀取的IP地址數(shù)串。域名具有唯一性，讓別人找到網(wǎng)站；就像名字是我們身份識別的一種方式，幫助區(qū)分不同的人，域名就是網(wǎng)站的名字。

不同之處在于，世間同名同姓的人很多，但域名與IP地址是一一對應(yīng)的，具有唯一性。

二級域名：除了域名，我們還會經(jīng)常聽到二級域名，它們之間有什么區(qū)別？最大區(qū)別是一級域名要花錢，二級域名是免費的；二級域名是屬于一級域名下的域名；如baidu.com是一級域名，而百度下的各個應(yīng)用如百度網(wǎng)盤pan.baidu.com，百度知道zhidao.baidu.com，百科baike.baidu.com等都是二級域名。

域名備案：比如我們需要到公安機(jī)關(guān)辦理身份證，網(wǎng)站域名也需要進(jìn)行備案，方便網(wǎng)絡(luò)安全管理。

2）服務(wù)器/虛擬主機(jī)：用戶需要在網(wǎng)頁上請求數(shù)據(jù)（get），或者向網(wǎng)頁傳輸數(shù)據(jù)（post），需要一個數(shù)據(jù)存儲的地方，服務(wù)器能處理復(fù)雜的業(yè)務(wù)邏輯并對數(shù)據(jù)進(jìn)行存儲管理。

3）網(wǎng)站程序：用戶可以使用云鳳蝶、wix等第三方模板工具建立網(wǎng)站程序。

自助建站工具把域名和服務(wù)器的步驟都節(jié)省了，用戶不用自己買服務(wù)器，在網(wǎng)站程序這一步中提供了各種設(shè)計好的模板。

二、技術(shù)知識點2：網(wǎng)頁是如何構(gòu)成的

用戶對自助建站感知最強(qiáng)的地方是網(wǎng)站程序這一步，無需手寫代碼，通過拖拉拽的方式搭建一個網(wǎng)頁，所見即所得。這又是怎么做到的呢？我們先了解傳統(tǒng)網(wǎng)頁是如何構(gòu)成的。

HTML，CSS，JavaScript共同構(gòu)成了我們看到的所有網(wǎng)頁展示和交互；HTML是超文本標(biāo)記語言，CSS是級聯(lián)樣式表，JavaScript是腳本語言，用于前端頁面的DOM處理。

我們用chrome開發(fā)者工具（F12或ctrl+shift+i）可以看到這三者是如何作用的。

HTML：定義頁面內(nèi)容和結(jié)構(gòu)，HTML格式文件存儲在服務(wù)器上，當(dāng)客戶端向服務(wù)器請求頁面資源時，就會解析呈現(xiàn)出用戶看到的頁面。

點擊Elements就會看到HTML文件，查看并修改元素的代碼（edit as HTML）時，可以直觀感受到HTML是如何定義頁面內(nèi)容和結(jié)構(gòu)的；比如通過左圖定位到了同花順官網(wǎng)的logo元素，修改元素代碼時將logo的圖像文件（<img>）刪掉了，得到了右圖的效果；修改只對當(dāng)前頁面渲染生效，不會修改服務(wù)器的源代碼。

CSS：定義頁面樣式和表現(xiàn)，如何顯示HTML元素，包括大小、顏色等；定位到元素后，可以通過styles修改元素的CSS屬性，比如將同花順的導(dǎo)航欄文字從白色改為了藍(lán)色，可以更改字體大小樣式等。

JavaScript：為頁面增加行為和功能，即交互。

自助建站的模板通過各種模板和布局幫助用戶跳過了HTML和CSS，通過錨點跳轉(zhuǎn)的方式實現(xiàn)了簡單的交互。

模板中每個板塊的長寬、圖文布局都已經(jīng)設(shè)定好，用戶只需要簡單替換圖片、文字或者添加簡單的頁面跳轉(zhuǎn)交互；雖然現(xiàn)在市面上如云鳳蝶、wix等自助建站工具能幫助技術(shù)小白快速搭建頁面，但它們基本做的都是靜態(tài)頁面，沒有數(shù)據(jù)庫的支撐；如果用戶想要搭建支持更強(qiáng)大功能的網(wǎng)頁，比如數(shù)據(jù)動態(tài)變化、組件前端位置信息、樣式等可修改，現(xiàn)在市面上的工具并不能滿足需求。

三、技術(shù)知識點3：靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別

靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的核心區(qū)別在于后臺是否有數(shù)據(jù)庫的支撐，可以簡單描述為網(wǎng)頁上展示的內(nèi)容是否要變化；靜態(tài)網(wǎng)頁不需要后臺程序干預(yù)處理，數(shù)據(jù)無需更新，不需要后續(xù)維護(hù)；動態(tài)網(wǎng)頁需要由數(shù)據(jù)庫提供數(shù)據(jù)支撐。

比如Wix和云鳳蝶都是靜態(tài)網(wǎng)頁，Wix（網(wǎng)頁）提供的頁面模板已經(jīng)確定了頁面布局，能替換修改的只有固定模板中的圖片和文字，不支持修改組件，數(shù)據(jù)也不會動態(tài)變更；云鳳蝶（H5）排版上不會涉及橫向分布，自上往下添加組件；所有組件都是固定樣式，不支持用戶進(jìn)行修改組件，頁面上的可編輯的數(shù)據(jù)有限，數(shù)據(jù)也不會動態(tài)變更。

是否能有支持組件修改及數(shù)據(jù)庫支撐的動態(tài)網(wǎng)頁自助建站工具？

先從市面上已有的自助建站工具看看流程，下方為簡化的流程圖：

• Step1.新建頁面/編輯已有的頁面/復(fù)用已有的頁面；
• Step2.為頁面添加組件，從組件庫中選擇組件并拖拽至頁面上；
• Step3.修改配置信息，替換圖文；
• Step4.增加交互；
• Step5.保存預(yù)覽并發(fā)布；

前面說到靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的核心區(qū)別在于后臺是否有數(shù)據(jù)庫的支撐，網(wǎng)頁上展示的內(nèi)容是否要變化。

動態(tài)網(wǎng)頁需要由數(shù)據(jù)庫提供數(shù)據(jù)支撐，包括具體的組件位置信息（如排列方向、寬高、間距等）、組件前端顯示的樣式及組件呈現(xiàn)的數(shù)據(jù)。

從兩張流程圖對比可以看出，靜態(tài)網(wǎng)頁只能替換已有組件的圖片和文字，動態(tài)網(wǎng)頁的修改配置功能則強(qiáng)大很多，支持修改組件位置信息、修改組件前端配置以及參數(shù)來源。

1）組件位置信息：Web頁面不同于H5頁面的上下排列，需要考慮組件的位置信息，并不是簡單的拖拉拽就能定位的，具體的位置信息更改包括組件排列方向、組件的寬度高度、組件的內(nèi)外間距，如下方思維導(dǎo)圖。

所有HTML元素都可以看作是盒子，在CSS中，box model盒子模型是用來設(shè)計和布局時用的。

Flex direction規(guī)定組件排列的方向，常見的有row（行）和column（列）Margin、Border、Padding等定義見下圖。

2）前端配置更改：動態(tài)網(wǎng)頁支持修改組件前端顯示的樣式，比如組件標(biāo)題的內(nèi)容和位置、是否有懸浮框，某一個圖表組件的顏色、圖例、滾動條等?？赡芮岸嗽陂_發(fā)組件時，已經(jīng)寫好了接收參數(shù)后的渲染邏輯，包含了交互邏輯。

前端說完了，動態(tài)網(wǎng)頁的關(guān)鍵是如何與數(shù)據(jù)庫建立傳輸關(guān)系。

3）參數(shù)來源配置

四、技術(shù)知識點4：不同的數(shù)據(jù)庫

數(shù)據(jù)庫分為兩種，關(guān)系型數(shù)據(jù)庫RDBMS和非關(guān)系型數(shù)據(jù)庫NoSQL。

關(guān)系型數(shù)據(jù)庫采用關(guān)系模型來組織數(shù)據(jù)，代表數(shù)據(jù)庫有Oracle，Microsoft SQL Server，MySQL，PostgreSQL。

NoSQL則是非關(guān)系型、分布式的數(shù)據(jù)存儲系統(tǒng)，以鍵值對存儲，結(jié)構(gòu)不固定，代表數(shù)據(jù)庫有MongoDB。

明顯感知區(qū)別就是，關(guān)系型數(shù)據(jù)庫就像我們平時用的excel表格，數(shù)據(jù)以行、列的形式存儲，而非關(guān)系型數(shù)據(jù)庫如MongoDB則是以鍵值對形式存儲{key=value}字符串，文檔類似json對象。

MongoDB有專門的概念，如database數(shù)據(jù)庫；collection數(shù)據(jù)表/集合；row/document數(shù)據(jù)記錄行；column/field數(shù)據(jù)字段。

通過paramMap字段映射，name前端字段名稱，value后端映射字段，建立前端界面和后端數(shù)據(jù)庫的傳輸關(guān)系。

如果想要檢測數(shù)據(jù)傳輸是否已正確建立，可以通過postman等接口測試工具檢測。

五、技術(shù)知識點5：發(fā)送請求的兩種方式get和post

get是從服務(wù)器拉取資源而不改變服務(wù)器的資源，post是向服務(wù)器提交數(shù)據(jù)；所以如果要檢測數(shù)據(jù)傳輸是否建立，用get發(fā)送請求即可，如果能正確返回數(shù)據(jù)庫中的數(shù)據(jù)，那么恭喜你傳輸已建立。

至此為此，動態(tài)網(wǎng)頁的自助建站算是完成了，前端在開發(fā)組件庫的時候，應(yīng)該考慮最大化組件的擴(kuò)展性和通用性，支持復(fù)用在多個業(yè)務(wù)場景之中。

相較于靜態(tài)頁面的自助建站，動態(tài)頁面自助建站需要對前后端開發(fā)知識有更多的了解，不再是“傻瓜”操作，產(chǎn)品人員在設(shè)計過程中也可以考慮如何讓用戶能夠更輕松地掌握配置。

由于對前后端技術(shù)了解有限，也在摸索階段，如果內(nèi)容有誤或不足之處敬請指正，非常感謝~

參考資料：

菜鳥學(xué)院HTML/CSS，JavaScript章節(jié)

《給產(chǎn)品經(jīng)理講技術(shù)》陳宇、鞏曉波、高楊、楊俊勇

《產(chǎn)品經(jīng)理必懂的技術(shù)那點事兒：成為全棧產(chǎn)品經(jīng)理》唐韌

本文由 @RfSr 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議