編輯導語：產品經理在日常工作中涉及的業務很多，除了對整個項目進行把控之外，對於技術的一些了解和把握也需要更深一步，才能在工作中更加遊刃有餘；本文作者介紹了產品經理的一些技術產生常識，我們一起來看一下。
近期因為業務需要在做類似自助建站的工具，在做這一工具的過程中加深了前後端開發知識的了解；本文將從做這個工具的全過程出發講對自助建站的一些理解，涉及到一些前後端開發知識，適合初級閱讀。
我們對自助建站典型的應用場景應該並不陌生，電商大促的時候，在各大電商app能看到很多H5活動頁面，這麼多H5活動頁面，每天都在變，都是技術人員開發實現的嗎？有些朋友想創建個人網站無奈不懂代碼，通過wix、凡科、起飛頁等工具，不需要寫一行代碼就可以創建一個漂亮的網站，這是怎麼做到的呢？
Q1：電商的H5活動頁面，都是技術人員開發實現的嗎？【自助建站的適用場景】電商大促要上很多活動，全都由技術人員開發並不現實，很多頁面是由產品、運營等技術小白用自助建站工具搭建而成的。
自助建立網頁的工具適用於以下幾種情形：
項目時間緊張，上線時間短；頁面相似度高，功能相近；研發性價比低；不懂專業開發技術；適用人群是產品/運營等技術小白，核心需求是快速搭建承載業務功能的頁面，適用場景是工作中遇到項目時間緊迫需要快速上線的情況，如電商大促活動時間緊湊；或者無網站製作經驗，希望簡單套用模板；不懂代碼的人員也可以通過簡單的操作配置頁面，實現頁面快速上線。
Q2：不寫一行代碼創建一個漂亮的網站是怎麼做到的呢？【自助建站的實現原理】在此之前，我們先來了解web的基礎技術知識。
一、技術知識點1：建設網站的流程和必需品
傳統建設網站的流程如下：
網站建設需要至少三樣東西：域名、伺服器和程序。
1）域名：在數據傳輸時對計算機的定位標識，不用去記住能夠被機器直接讀取的IP位址數串。域名具有唯一性，讓別人找到網站；就像名字是我們身份識別的一種方式，幫助區分不同的人，域名就是網站的名字。
不同之處在於，世間同名同姓的人很多，但域名與IP位址是一一對應的，具有唯一性。
域名備案：比如我們需要到公安機關辦理身份證，網站域名也需要進行備案，方便網絡安全管理。
2）伺服器/虛擬主機：用戶需要在網頁上請求數據（get），或者向網頁傳輸數據（post），需要一個數據存儲的地方，伺服器能處理複雜的業務邏輯並對數據進行存儲管理。
3）網站程序：用戶可以使用雲鳳蝶、wix等第三方模板工具建立網站程序。
自助建站工具把域名和伺服器的步驟都節省了，用戶不用自己買伺服器，在網站程序這一步中提供了各種設計好的模板。
二、技術知識點2：網頁是如何構成的
用戶對自助建站感知最強的地方是網站程序這一步，無需手寫代碼，通過拖拉拽的方式搭建一個網頁，所見即所得。這又是怎麼做到的呢？我們先了解傳統網頁是如何構成的。
HTML，CSS，JavaScript共同構成了我們看到的所有網頁展示和交互；HTML是超文本標記語言，CSS是級聯樣式表，JavaScript是腳本語言，用於前端頁面的DOM處理。
我們用chrome開發者工具（F12或ctrl+shift+i）可以看到這三者是如何作用的。
HTML：定義頁面內容和結構，HTML格式文件存儲在伺服器上，當客戶端向伺服器請求頁面資源時，就會解析呈現出用戶看到的頁面。
點擊Elements就會看到HTML文件，查看並修改元素的代碼（edit as HTML）時，可以直觀感受到HTML是如何定義頁面內容和結構的；比如通過左圖定位到了同花順官網的logo元素，修改元素代碼時將logo的圖像文件（<img>）刪掉了，得到了右圖的效果；修改只對當前頁面渲染生效，不會修改伺服器的原始碼。
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 原創發布於人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基於CC0協議