我們在做門戶網站的時候，如果網站的內容可以動態從后端進行管理，那么調整網站內容就非常方便，有時候如一些公司新聞、產品資訊、輪播廣告資訊等都需要動態調整的，有一個方便的后端內容管理是非常方便的，本篇隨筆介紹門戶網站的后端管理界面，介紹網站后端的內容管理實作，
1、網站內容模塊的設計
從前面的系列文章，我們大概可以了解到門戶網站的一些常用模塊，如網站選單、網站輪播廣告、網站內容介紹（如公司資訊、產品資訊、合作伙伴、公司客戶等）、網站圖片展覽、公司新聞等等模塊，以及網站的一些常規設定資訊，如Logo、網站名稱、網站底部資訊（包括公司地址、備案資訊等等），
這些模塊有些可以綜合一起管理，因為內容大多數格式差不多，如網站內容介紹（如公司資訊、產品資訊、合作伙伴、公司客戶等），有些這需要獨立設計管理，如網站選單、網站輪播廣告等，另外一些內容管理如新聞和模塊內容類似，我們為了方便也將它獨立進行維護即可，
綜合以上一些內容，我們可以設計一些表來承載這些資訊，然后在后端提供對應對口，供前端使用即可，
對于門戶網站，根據需要我們設計了后端存盤的資料表，如下所示
我們來看看幾個模塊中的一些最終效果，然后再開始設計編碼吧，
1）網站選單和廣告輪播
2）網站模塊內容
其中包括產品、框架等產品的介紹，維護內容差不多，只是展示方式有所差異，
框架產品的介紹，和軟體產品的類似，不過這里采用了大圖展示的方式，柵格的大小也有所變化，
以上這些網站門戶的內容，由于采用了BootstrapVue，因此也是自適應的視窗布局的，我們可以切換到手機螢屏模式，那么可以看到正常、合理的展示，而不會僅僅是給電腦桌面端的展示，
我們可以在實作代碼的時候，合理設定柵格的大小，從而讓內容按照自己的需要展示，
3）圖片展示
如對于圖片的展示，我們可以在小螢屏中展示兩列，也可以展示一列，具體根據自己的需要處理即可，
而圖片展示在電腦螢屏端，則設定為正常的幾屏展示，
而有時候一些模塊需要展示一些圖片內容，如公司客戶、合作伙伴等資訊，主要是以企業LOGO和URL為展示的內容，那么我們可以結合內容管理，以及圖片管理，綜合展示這些內容即可，如下所示，
其中合作伙伴可以采用 vue-awesome-swiper 來動態滑動展示更多的圖片資訊，
4）新聞展示
公司一般都有一些新聞展示，用于為外界提供資訊的參考，同時也是宣傳公司產品資訊或者發布動態資訊的地方，
新聞內容一般比較多，可以結合分頁的處理進行展示更多的新聞訊息
打開新聞鏈接其實就是展示新聞詳細資訊即可，用一個頁面來展示完整的資訊和導航就可以了，
新聞一般為了吸引人，往往會增加很多圖片，我們在后臺的內容管理中適當增加圖片即可達到圖文并茂的效果，
2、網站的后端管理界面
門戶網站前端負責合理展示內容，后端就需要整合資料模型，盡可能的把內容管理得更加方便一些，我們把幾個模塊的內容一起綜合管理，根據不同的類別進行區分即可，因為大多數情況內容模型的格式是相似的，
我們創建了幾個管理選單入口，用于維護管理門戶網站的內容資訊，如下導航所示，
網站資訊，主要就是維護LOGO、網站名稱、網站底部資訊的一些內容的，
模塊的內容管理，是其中最為重要的部分，我們需要綜合各個模塊的模型，把它們統一按照分類管理起來，如下界面所示，
網站選單管理，綜合管理門戶網站中的選單連接資訊，
圖片管理，綜合管理網站所需要管理的圖片內容，
網站新聞，是維護新聞內容串列的，
內容編輯是采用富文本的處理方式，可以添加更加豐富的內容，包括格式、圖片等等，
以上就是門戶網站的前端展示和后端管理集合的大多數效果，前端負責更好的展示資料，后端為資料展示提供動態資料，以便更好的管理維護，
并且通過結合BootstrapVue，我們的網站具有很強大的多種設備兼容性，在各種展示的設備上，都是展示的非常好的效果，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/289091.html
標籤：JavaScript
上一篇：var，let，const區別；get，post區別
下一篇：閉包，防抖，截流