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

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

【學(xué)位級(jí)別】：碩士

【文章目錄】：
摘要
Abstract
第一章 引言
    1.1 項(xiàng)目背景
    1.2 可視化頁(yè)面編輯在前端領(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é)
第三章 可視化頁(yè)面編輯平臺(tái)的分析與設(shè)計(jì)
    3.1 可視化頁(yè)面編輯平臺(tái)總體規(guī)劃
    3.2 可視化頁(yè)面編輯平臺(tái)需求分析
        3.2.1 可視化頁(yè)面編輯平臺(tái)系統(tǒng)需求分析
        3.2.2 工程管理模塊需求分析
        3.2.3 組件管理模塊需求分析
        3.2.4 用戶管理模塊需求分析
        3.2.5 群組管理模塊需求分析
        3.2.6 頁(yè)面內(nèi)容編排模塊需求分析
        3.2.7 非功能性需求分析
    3.3 可視化頁(yè)面編輯平臺(tái)詳細(xì)設(shè)計(jì)
        3.3.1 可視化頁(yè)面編輯平臺(tái)總體系統(tǒng)架構(gòu)
        3.3.2 可視化編輯Tyr系統(tǒng)設(shè)計(jì)
        3.3.3 快速搭建平臺(tái)Smart-Build系統(tǒng)設(shè)計(jì)
        3.3.4 動(dòng)態(tài)表單Juno&智能報(bào)表Mars設(shè)計(jì)
    3.4 可視化頁(yè)面編輯平臺(tái)數(shù)據(jù)庫(kù)設(shè)計(jì)
    3.5 本章小結(jié)
第四章 可視化頁(yè)面編輯平臺(tái)的實(shí)現(xiàn)
    4.1 可視化編輯Tyr的實(shí)現(xiàn)
        4.1.1 視覺(jué)搭建的實(shí)現(xiàn)
        4.1.2 數(shù)據(jù)上下行的實(shí)現(xiàn)
        4.1.3 行為描述的實(shí)現(xiàn)
        4.1.4 插件擴(kuò)展機(jī)制的實(shí)現(xiàn)
    4.2 快速搭建平臺(tái)Smart-Build的實(shí)現(xiàn)
        4.2.1 快速搭建平臺(tái)前端的實(shí)現(xiàn)
        4.2.2 快速搭建平臺(tái)后端的實(shí)現(xiàn)
    4.3 動(dòng)態(tài)表單Juno&智能報(bào)表Mars的實(shí)現(xiàn)
        4.3.1 渲染引擎的實(shí)現(xiàn)
        4.3.2 物料組件的實(shí)現(xiàn)
    4.4 系統(tǒng)的運(yùn)行與性能
    4.5 本章小結(jié)
第五章 總結(jié)與展望
    5.1 總結(jié)
    5.2 進(jìn)一步工作展望
參考文獻(xiàn)
致謝



本文編號(hào)：3833185