某公司行銷系統(tǒng)的動(dòng)態(tài)前端設(shè)計(jì)與實(shí)現(xiàn)
發(fā)布時(shí)間:2020-04-12 21:40
【摘要】:隨著經(jīng)濟(jì)全球化,越來越多的中國產(chǎn)品、技術(shù)走向國際。對行銷人員來說,如何更好、更快、更全的將實(shí)時(shí)信息傳遞給客戶,成為其難題。針對行銷人員的訴求,不少企業(yè)采用了多菜單多模塊模式的方法,為不同類型的需求進(jìn)行頁面定制。這種方法雖然較好的解決了行銷人員的問題,但是卻給開發(fā)人員增加了巨大的代碼壓力。這種單一且完全依靠前端工程師手寫的網(wǎng)站,隨著公司產(chǎn)品和方案的不斷增多,無形之中造成了人力資源的嚴(yán)重浪費(fèi)。如果網(wǎng)頁層次結(jié)構(gòu)發(fā)生改變,對于前后端人員而言都將是巨大的災(zāi)難。系統(tǒng)致力于解決行銷人員困擾,避免開發(fā)人員重復(fù)工作。系統(tǒng)通過動(dòng)態(tài)的、可操作的菜單樹進(jìn)行方案的編排和展示。當(dāng)行銷人員有展示需求時(shí),管理人員只需要通過簡單的頁面操作,即可實(shí)現(xiàn)菜單欄的動(dòng)態(tài)更新,行銷人員只需點(diǎn)擊菜單欄中的菜單項(xiàng),即可動(dòng)態(tài)生動(dòng)的向客戶進(jìn)行解決方案效果的傳遞,從而大大避免了人力成本的浪費(fèi)。系統(tǒng)平臺(tái)的搭建主要基于HTML文檔流和CSS模型,為了解決信息同步、菜單展示等問題,結(jié)合vue的雙向綁定技術(shù)編寫了tree組件,tree組件通過遞歸、遍歷、樣式預(yù)處理等方法實(shí)現(xiàn)了數(shù)據(jù)傳遞、動(dòng)態(tài)樣式等功能。系統(tǒng)采用了前后端分離的開發(fā)模式,不僅提升了用戶體驗(yàn),還降低了應(yīng)用的開發(fā)和維護(hù)成本。系統(tǒng)主要包含動(dòng)態(tài)菜單樹、方案列表和可視化界面。其中動(dòng)態(tài)菜單樹為用戶列表、方案列表的展示,方案模式對應(yīng)應(yīng)用場景和解決方案,可視化界面為當(dāng)前解決方案的效果展示。通過上述方案實(shí)現(xiàn)了某公司行銷平臺(tái)的動(dòng)態(tài)前端平臺(tái),使得動(dòng)態(tài)化的頁面實(shí)現(xiàn)成本得以降低與用戶體驗(yàn)感大幅度提升,真正意義上實(shí)現(xiàn)了信息的實(shí)時(shí)傳遞與共享。
【圖文】:
都是可以通過該過程傳回的。基于XHR對象發(fā)送請求的過程是異步的,所以客戶端收到數(shù)據(jù)的時(shí)候是先有JavaScript進(jìn)行處理,,而不是直接進(jìn)行顯示的。如圖2-6所示,在AJAX技術(shù)應(yīng)用之前,客戶端的更新流程分為如下幾個(gè)步驟。首先,客戶端向服務(wù)端發(fā)送一個(gè)HTTP請求,服務(wù)端返回相應(yīng)的請求數(shù)據(jù)。服務(wù)器返回給客戶端的是一個(gè)全新的頁面。這樣一來,在Web應(yīng)用中一旦涉及數(shù)據(jù)更新,返回的都是整個(gè)頁面。那么客戶端的響應(yīng)時(shí)間完全依賴于服務(wù)器的響應(yīng)時(shí)間。不僅造成了時(shí)間和資源的浪費(fèi),而且每次的頁面重載也降低了用戶的體驗(yàn)。Web BrowserDBHTTP RequestHTML、Images、CSS、JavaScriptQuery/Data RequestData圖2-6 傳統(tǒng)Web應(yīng)用工作原理圖Web BrowserDBHTTPRequestQuery/DataRequestDataDataUserinterfaceAjaxEngineerHTML 、CSSJavaScript call圖2-7 AJAX Web應(yīng)用的工作原理AJAX Web應(yīng)用的工作原理如圖2-7所示。AJAX的異步請求方式的出現(xiàn)
模塊化編寫。采用 vue 實(shí)現(xiàn)頁面的渲染。未進(jìn)行菜單樹編輯的首頁面渲染效果如圖 4-1所示。圖4-1 首頁面渲染效果圖方案中心主要為方案的列表集合,包含導(dǎo)航欄、廣告模塊和方案列表。廣告模塊輪為公司推薦方案的輪播圖。方案列表默認(rèn)根據(jù)最熱進(jìn)行排列,可切換至最新進(jìn)行排列展示。方案中心渲染效果如圖 4-2 所示。圖4-2 方案中心渲染效果圖
【學(xué)位授予單位】:華中科技大學(xué)
【學(xué)位級別】:碩士
【學(xué)位授予年份】:2018
【分類號(hào)】:TP311.52
【圖文】:
都是可以通過該過程傳回的。基于XHR對象發(fā)送請求的過程是異步的,所以客戶端收到數(shù)據(jù)的時(shí)候是先有JavaScript進(jìn)行處理,,而不是直接進(jìn)行顯示的。如圖2-6所示,在AJAX技術(shù)應(yīng)用之前,客戶端的更新流程分為如下幾個(gè)步驟。首先,客戶端向服務(wù)端發(fā)送一個(gè)HTTP請求,服務(wù)端返回相應(yīng)的請求數(shù)據(jù)。服務(wù)器返回給客戶端的是一個(gè)全新的頁面。這樣一來,在Web應(yīng)用中一旦涉及數(shù)據(jù)更新,返回的都是整個(gè)頁面。那么客戶端的響應(yīng)時(shí)間完全依賴于服務(wù)器的響應(yīng)時(shí)間。不僅造成了時(shí)間和資源的浪費(fèi),而且每次的頁面重載也降低了用戶的體驗(yàn)。Web BrowserDBHTTP RequestHTML、Images、CSS、JavaScriptQuery/Data RequestData圖2-6 傳統(tǒng)Web應(yīng)用工作原理圖Web BrowserDBHTTPRequestQuery/DataRequestDataDataUserinterfaceAjaxEngineerHTML 、CSSJavaScript call圖2-7 AJAX Web應(yīng)用的工作原理AJAX Web應(yīng)用的工作原理如圖2-7所示。AJAX的異步請求方式的出現(xiàn)
模塊化編寫。采用 vue 實(shí)現(xiàn)頁面的渲染。未進(jìn)行菜單樹編輯的首頁面渲染效果如圖 4-1所示。圖4-1 首頁面渲染效果圖方案中心主要為方案的列表集合,包含導(dǎo)航欄、廣告模塊和方案列表。廣告模塊輪為公司推薦方案的輪播圖。方案列表默認(rèn)根據(jù)最熱進(jìn)行排列,可切換至最新進(jìn)行排列展示。方案中心渲染效果如圖 4-2 所示。圖4-2 方案中心渲染效果圖
【學(xué)位授予單位】:華中科技大學(xué)
【學(xué)位級別】:碩士
【學(xué)位授予年份】:2018
【分類號(hào)】:TP311.52
【相似文獻(xiàn)】
相關(guān)期刊論文 前10條
1 張菊芬;成自力;張瓊;潘瓊;徐燕梅;;一種體現(xiàn)中間件技術(shù)的動(dòng)態(tài)菜單編輯器[J];醫(yī)療設(shè)備信息;2005年12期
2 朱旭
本文編號(hào):2625201
本文鏈接:http://sikaile.net/kejilunwen/ruanjiangongchenglunwen/2625201.html
最近更新
教材專著