Design And Implementation Of A Vue.js-based Form Visual Building System

With the rapid development of the Internet,the business and traffic of Internet companies continue to expand,and business needs are increasing.The development manpower within Internet companies often cannot catch up with and meet these increasing demands,which puts a lot of burden and pressure on developers.In order to minimize the development cost of the requirements and improve the development efficiency,developers make various attempts.In the business requirements,compared with the c-end demand that pays attention to the user experience,the b-end demand is mostly the middle-office management class requirement of the biased information flow that interacts with the database,usually a list or a form page which has a large number of repeated form controls with similar pages logic.Front-end developers generally develop based on code.For the b-end page with more homogenization,the development process is cumbersome and boring.If one can use the visual editing of the page and template development,he can reduce the development cost.Based on this idea,this paper designs and implements a Vue.js-based form visualization editing and construction system.Firstly,according to the software engineering method,the system is analyzed with requirements,and UML object-oriented modeling technology is used to gradually give the use case diagram of the system,and the overall design of the system is divided into 5 main modules which are user management,channel management,component management,page editing and configuration and page project management.On this basis,the detailed design of the system is given,including the design of the front and back end and the design of the database.The system uses Javascript as the main language,and selects Visual Studio Code and Windows Subsystem for Linux as the development environment.By decoupling the functions of the front and back ends of each module,the development method of separating the front and back ends is adopted.The system uses the Nuxt.js framework for frontend development,and the Koa framework for server-side development.The frontend and backend of the system communicate with each other through API.The system structure is clear and easy to maintain.The system provides componentized and templating methods for visual editing and building of pages,enabling developers to reuse development resources to the greatest extent,greatly reducing the development cost of forms and lists of b-side pages,and improving the development efficiency of front-end developers and the degree of front-end engineering of the department.As a result,the system has met the expanding business needs of Internet companies.