隨著前端技術(shù)的不斷發(fā)展,前端頁面開發(fā)工作越來越繁重,而傳統(tǒng)代碼開發(fā)方式存在效率低下、技術(shù)門檻高等問題,極大制約了前端開發(fā)者的工作效率。本文著眼于公司內(nèi)部業(yè)務(wù)場景,通過平臺化服務(wù)和可視化編輯框架的方式進行常規(guī)頁面的快速開發(fā),提高頁面開發(fā)的效率和質(zhì)量。本項目提供了可視化編輯的頁面編排方案、優(yōu)秀的UI組件、平臺化服務(wù)來實現(xiàn)解決傳統(tǒng)代碼開發(fā)頁面的缺陷。本文設(shè)計了全新的可視化編輯、動態(tài)表單&智能報表、快速搭建平臺三個模塊,以實現(xiàn)簡單,高效,智能的頁面服務(wù)。各模塊主要工作如下:(1)鑒于HTML+CSS代碼頁面開發(fā)方式的效率低下,本文實現(xiàn)了可視化編輯模塊進行頁面在線可視化編輯,同時頁面布局采用柵格化布局,用戶不需要在頁面調(diào)試和編排中花費大量的時間,極大提升了頁面開發(fā)效率。(2)表單和報表頁面往往具有特殊的布局和數(shù)據(jù)邏輯,例如label標簽和內(nèi)容區(qū)的并排布局、數(shù)據(jù)校驗邏輯等,動態(tài)表單&智能報表模塊通過React + Redux技術(shù)的封裝,賦予了常規(guī)組件的條目布局、數(shù)據(jù)上下行、邏輯校驗、屬性設(shè)置等功能,同時通過渲染引擎快速渲染頁面,使得用戶只需要關(guān)注組件的屬性設(shè)置和頁面編排,而不用關(guān)注...

【文章頁數(shù)】：89 頁

【學位級別】：碩士

【文章目錄】：
摘要
Abstract
第一章 引言
    1.1 項目背景
    1.2 可視化頁面編輯在前端領(lǐng)域的發(fā)展概況
    1.3 本文的主要工作
    1.4 本文的組織結(jié)構(gòu)
第二章 技術(shù)綜述
    2.1 瀏覽器端技術(shù)
        2.1.1 React
        2.1.2 ECMAScript 6
        2.1.3 Redux
        2.1.4 Webpack
        2.1.5 Babel
    2.2 服務(wù)器端技術(shù)
        2.2.1 Node.js
        2.2.2 Egg.js
        2.2.3 MySQL
    2.5 本章小結(jié)
第三章 可視化頁面編輯平臺的分析與設(shè)計
    3.1 可視化頁面編輯平臺總體規(guī)劃
    3.2 可視化頁面編輯平臺需求分析
        3.2.1 可視化頁面編輯平臺系統(tǒng)需求分析
        3.2.2 工程管理模塊需求分析
        3.2.3 組件管理模塊需求分析
        3.2.4 用戶管理模塊需求分析
        3.2.5 群組管理模塊需求分析
        3.2.6 頁面內(nèi)容編排模塊需求分析
        3.2.7 非功能性需求分析
    3.3 可視化頁面編輯平臺詳細設(shè)計
        3.3.1 可視化頁面編輯平臺總體系統(tǒng)架構(gòu)
        3.3.2 可視化編輯Tyr系統(tǒng)設(shè)計
        3.3.3 快速搭建平臺Smart-Build系統(tǒng)設(shè)計
        3.3.4 動態(tài)表單Juno&智能報表Mars設(shè)計
    3.4 可視化頁面編輯平臺數(shù)據(jù)庫設(shè)計
    3.5 本章小結(jié)
第四章 可視化頁面編輯平臺的實現(xiàn)
    4.1 可視化編輯Tyr的實現(xiàn)
        4.1.1 視覺搭建的實現(xiàn)
        4.1.2 數(shù)據(jù)上下行的實現(xiàn)
        4.1.3 行為描述的實現(xiàn)
        4.1.4 插件擴展機制的實現(xiàn)
    4.2 快速搭建平臺Smart-Build的實現(xiàn)
        4.2.1 快速搭建平臺前端的實現(xiàn)
        4.2.2 快速搭建平臺后端的實現(xiàn)
    4.3 動態(tài)表單Juno&智能報表Mars的實現(xiàn)
        4.3.1 渲染引擎的實現(xiàn)
        4.3.2 物料組件的實現(xiàn)
    4.4 系統(tǒng)的運行與性能
    4.5 本章小結(jié)
第五章 總結(jié)與展望
    5.1 總結(jié)
    5.2 進一步工作展望
參考文獻
致謝



本文編號：3833185