react drag

前端可視化拖拽平台

背景

（本項目為作者的畢業設計）

通過對可視化編輯系統的相關研究，以及對業務場景的思考，組件的抽象與拆分等。致力於解決當前前端開發人員較少，頁面需求較多，重複需求多，復用性低的問題。實現了一套基於react 的前端可視化平台的系統。該平台可以為用戶提供可視化編輯前端頁面並生成相應的react 代碼的功能。面向技術人員可用，打造一個通用的頁面搭建平台。

系統設計

本系統的前端部分使用React 技術作為視圖框架。系統使用umi 框架進行路由控制，使用dva 進行狀態管理。其中前端依托Node.js 作為中間層進行服務端的渲染，從而進一步提升頁面首屏的渲染速度。 在前端的展示部分，通過pages，layouts,以及components 來配合完成。在狀態管理部分， 配合models，同時通過dva 中的connect 將視圖與數據相連接。同時，對於前後端的請求， 通過services 層實現。將一些常用的方法放置於utils 下作為工具集。將有特殊含義的變量置於common。

總體功能

本系統的模塊主要為用戶管理、組織管理、頁面拖拽編輯、頁面預覽導出以及組件管理五大模塊。其中由於使用JWT 作為前後端登陸認證的方式，增加用戶認證模塊。系統的核心功能流程是用戶登陸系統，進入可視化頁面編輯區，選擇組件進行編輯，保存頁面至服務器，構建相關代碼，打包生成相應壓縮包

運行平台

• 安裝相關依賴npm i
• 運行後台代碼
• yarn start

效果展示

• 頁面拖拽
• 組件廣場
• 代碼預覽
• 組織廣場

功能

• 登陸
• 註冊
• 頁面（組件）編輯
  • 複製組件
  • 刪除組件
  • 組件組合，生成組件模版
  • 修改屬性
• 代碼預覽
• 組件廣場
  • 分為個人組件，組織組件，以及公共組件，根據不同的權限展示不同的組件
  • 預覽組件
  • 編輯組件
• 組織管理
  • 申請組織
  • 管理申請列表，同意或拒絕