The Design And Implementation Of Visual Editing Platform Based On React

TAL Visual Editing Platform is the H5 page editing platform of the Internet R&D Department of TAL Education Group.The opportunity for the birth of the platform was the outbreak of the new crown epidemic in early 2020,the company’s public welfare live classes have a very large flow,urgently need the development and long-term maintenance of a large number of H5 pages.But using the method of separate development for each page,will cause rapid consumption of development time and development costs.Based on this situation,we have put forward the design and development requirements of the visual editing platform.The platform mainly provides marketing activities components for different users and different scenarios for business parties.And it is committed to combining visual data display and linking data tracking,giving effective strategic support and operational data analysis support,with early warning mechanisms in different scenarios,and giving the business side a one-stop efficient,stable,convenient,safe and reliable one service platform.I participated in the design and development of the project management module,authority management module,template management module,resource management module and data center module of the visual editing platform,and performed functional maintenance of part of the functions of each module.The main tasks completed by the thesis as following:A preliminary analysis was made on the background of the birth,the research significance,the initial expected goal,and the key problems and technical difficulties encountered in the development process of the visual editing platform;A brief introduction to the React development framework,Koa development framework and other related technologies that the visual editing platform needs to use;Starting from the characteristics of the system and users,a detailed analysis of the usage scenarios and business requirements of the five modules of the visual editing platform is carried out,and the future demand planning and development direction of the module are proposed;Design the overall architecture of the visual editing platform,and design a separate module structure for each sub-module,and introduce the design ideas of multiple main data tables in the database of the editing platform;Design and implement five sub-modules of the visual editing platform including Project Management Module,Authority Management Module,Template Management Module,Resource Management Module and Data Center Module,showing the current implementation effects of each sub-module;Design test cases covering all function points for the main sub-modules,conduct a comprehensive functional test of the system,and analyze the results of the visual editing platform based on the test results.At present,the project has been successfully deployed online for use,and the platform is functionally maintained every week based on feedback from the business side.The platform provides convenient and fast page development methods for all R&D departments,improves page production efficiency,and enables rapid business development.Its application scenarios cover the use of activities,courses,research and other scenarios,which improves the overall operational efficiency,and become the "gear" of the entire company,turning around and driving the efficient circulation of platforms involved in the overall business line.