厭倦了寫活動(dòng)頁(yè)？快來(lái)擼一個(gè)頁(yè)面生成器吧！

Lsnsh 發(fā)布于2019-08-02 11:50 / 2764人閱讀

摘要：前言如果你經(jīng)常接觸一些公司的活動(dòng)頁(yè)，可能會(huì)經(jīng)常頭疼以下問(wèn)題這些項(xiàng)目周期短，需求頻繁，迭代快，技術(shù)要求不高，成長(zhǎng)空間也小。但是我們還是馬不停蹄的趕著產(chǎn)品提來(lái)的一個(gè)個(gè)需求，隨著公司規(guī)模的增加，我們不可能無(wú)限制的增加人手不斷地重復(fù)著這些活動(dòng)。

前言

如果你經(jīng)常接觸一些公司的活動(dòng)頁(yè)，可能會(huì)經(jīng)常頭疼以下問(wèn)題：這些項(xiàng)目周期短，需求頻繁，迭代快，技術(shù)要求不高，成長(zhǎng)空間也小。但是我們還是馬不停蹄的趕著產(chǎn)品提來(lái)的一個(gè)個(gè)需求，隨著公司規(guī)模的增加，我們不可能無(wú)限制的增加人手不斷地重復(fù)著這些活動(dòng)。這里我就不具體介紹一些有的沒(méi)的的一些概念了，因?yàn)橐榻B的概念實(shí)在太多了，作為一個(gè)前端的我們，直接上代碼擼就好了！！！！
想要了解更多，也歡迎訪問(wèn)：

源地址

blogs

目標(biāo)

我們的目標(biāo)是實(shí)現(xiàn)一個(gè)頁(yè)面制作后臺(tái)，在后臺(tái)中我們可以對(duì)頁(yè)面進(jìn)行 組件選擇 --> 布局樣式調(diào)整 --> 發(fā)布上線 --> 編輯修改這樣的流程操作。

架構(gòu)設(shè)計(jì)

首先是要能提供組件給用戶進(jìn)行選擇，那么我們需要一個(gè)組件庫(kù)，然后需要對(duì)選擇的組件進(jìn)行布局樣式調(diào)整，所以我們需要一個(gè)頁(yè)面編輯后臺(tái)接著我們需要將編輯產(chǎn)出的數(shù)據(jù)渲染成真實(shí)的頁(yè)面，所以我們需要一個(gè)node服務(wù)和用于填充的template 模板。發(fā)布上線，這個(gè)直接對(duì)接各個(gè)公司內(nèi)部的發(fā)布系統(tǒng)就好了，這里我們不做過(guò)多闡述。最后的編輯修改功能也就是針對(duì)配置的修改，所以我們需要一個(gè)數(shù)據(jù)庫(kù)，這里我選擇的是用了mysql。當(dāng)然你也可以順便做做權(quán)限管理，頁(yè)面管理....等等之類的活。
啰嗦了這么長(zhǎng)，我們來(lái)畫個(gè)圖，了解下大概的流程：

開擼 組件的實(shí)現(xiàn)

首先我們來(lái)實(shí)現(xiàn)組件這一部分，因?yàn)榻M件關(guān)聯(lián)著后臺(tái)編輯的預(yù)覽和最后發(fā)布的使用。組件設(shè)計(jì)我們應(yīng)該盡量保持組件的對(duì)外一致性，這樣在進(jìn)行渲染的時(shí)候，我們可以提供一個(gè)統(tǒng)一的對(duì)外數(shù)據(jù)接口。這里我們的技術(shù)選型是基于 Vue 的，所以下面的代碼部分也主要是基于 Vue 的，但是萬(wàn)變不離其宗，其他語(yǔ)言也類似。

根據(jù)上圖，我們的組件是會(huì)被一個(gè)個(gè)拆分多帶帶發(fā)布到 npm倉(cāng)庫(kù)的，為什么這么設(shè)計(jì)呢？其實(shí)之前也考慮過(guò)設(shè)計(jì)成一個(gè)組件庫(kù)，所有組件都包含在一個(gè)組件庫(kù)內(nèi)，這樣只需要發(fā)布一個(gè)組件庫(kù)包，用的時(shí)候按需加載就好了。后來(lái)在實(shí)踐的過(guò)程中發(fā)現(xiàn)這樣并不合適協(xié)同開發(fā)，其他前端如果想貢獻(xiàn)組件，接入的改造成本也很大。舉個(gè)