CN117523933A - Visual software development practice teaching system and method based on dragging configuration - Google Patents
Visual software development practice teaching system and method based on dragging configuration Download PDFInfo
- Publication number
- CN117523933A CN117523933A CN202311394511.1A CN202311394511A CN117523933A CN 117523933 A CN117523933 A CN 117523933A CN 202311394511 A CN202311394511 A CN 202311394511A CN 117523933 A CN117523933 A CN 117523933A
- Authority
- CN
- China
- Prior art keywords
- configuration
- page
- unit
- component
- components
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 54
- 238000000034 method Methods 0.000 title claims abstract description 30
- 238000011161 development Methods 0.000 claims abstract description 39
- 238000013499 data model Methods 0.000 claims description 47
- 230000003993 interaction Effects 0.000 claims description 26
- 230000008569 process Effects 0.000 claims description 15
- 238000012986 modification Methods 0.000 claims description 10
- 230000004048 modification Effects 0.000 claims description 10
- 230000009471 action Effects 0.000 claims description 6
- 230000008859 change Effects 0.000 claims description 3
- 230000000694 effects Effects 0.000 claims description 3
- 238000001179 sorption measurement Methods 0.000 claims description 2
- 230000006870 function Effects 0.000 abstract description 14
- 230000018109 developmental process Effects 0.000 description 55
- 238000010586 diagram Methods 0.000 description 15
- 238000013461 design Methods 0.000 description 11
- 238000005516 engineering process Methods 0.000 description 7
- 230000002452 interceptive effect Effects 0.000 description 3
- 238000012258 culturing Methods 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 230000005259 style development Effects 0.000 description 2
- 238000012549 training Methods 0.000 description 2
- 238000007792 addition Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000001680 brushing effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 238000013515 script Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09B—EDUCATIONAL OR DEMONSTRATION APPLIANCES; APPLIANCES FOR TEACHING, OR COMMUNICATING WITH, THE BLIND, DEAF OR MUTE; MODELS; PLANETARIA; GLOBES; MAPS; DIAGRAMS
- G09B5/00—Electrically-operated educational appliances
- G09B5/02—Electrically-operated educational appliances with visual presentation of the material to be studied, e.g. using film strip
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09B—EDUCATIONAL OR DEMONSTRATION APPLIANCES; APPLIANCES FOR TEACHING, OR COMMUNICATING WITH, THE BLIND, DEAF OR MUTE; MODELS; PLANETARIA; GLOBES; MAPS; DIAGRAMS
- G09B5/00—Electrically-operated educational appliances
- G09B5/08—Electrically-operated educational appliances providing for individual presentation of information to a plurality of student stations
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Business, Economics & Management (AREA)
- Educational Administration (AREA)
- Educational Technology (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a visual software development practice teaching system and method based on drag configuration, wherein the system comprises a unified portal and a development platform; the development platform comprises a visual designer, wherein the visual designer comprises an operation page and a source code generation bottom layer platform; the operation page comprises a quick operation module, a resource navigation module, a main canvas editing module and an attribute configuration module, and is used for carrying out graphic drag configuration operation, page and component configuration operation in each module and associated configuration operation thereof, and transmitting all configuration operation parameter information to a source code generation bottom layer platform; the source code generation bottom layer platform is used for receiving parameter information of configuration operation and analyzing and generating corresponding source codes according to the parameter information of the configuration operation. The invention builds and develops the software system through visual dragging quick configuration, generates all front and rear end source codes of all business functions of the developed software system, and assists teaching work.
Description
Technical Field
The invention relates to the technical field of software development practice teaching, in particular to a visual software development practice teaching system and method based on drag configuration.
Background
With the rapid development of computer technology, software development becomes a current hot trend, comprehensive programming capability of the trained personnel can be cultivated through software development course practice, the working capability is improved, meanwhile, good programming specifications of the trained personnel can be cultivated, programming skills can be accumulated, so that learning knowledge can be comprehensively understood, mastered and comprehensively utilized, the practice capability of the trained personnel is improved, team cooperation consciousness is enhanced, the life cycle of the software development is known, and a good foundation is laid for follow-up related work.
However, in the form of current software development practice courses, more courses are designed aiming at a single subject or a certain number of languages, and the ability of the trained personnel to be more comprehensive cannot be exercised by simple language teaching, so that the trained personnel cannot learn about the practical application of a certain technology deeply. Meanwhile, the comprehensive practice projects involve more technologies, and the comprehensive capability requirement on the trained personnel is higher, so that the implementation is more difficult.
Disclosure of Invention
Aiming at the defects of the prior art, the invention provides a visual software development practice teaching system and method based on dragging configuration, which constructs and develops a software system through visual dragging rapid configuration, generates all front and rear end source codes of all business functions of the developed software system, assists teaching work, and enables a person to be taught to know the actual application of multiple languages more comprehensively and deeply.
To achieve the above object, one or more embodiments of the present invention provide the following technical solutions:
the first aspect of the invention provides a visual software development practice teaching system based on drag configuration.
A visual software development practice teaching system based on drag configuration comprises a unified portal and a development platform; the development platform comprises a visual designer, wherein the visual designer comprises an operation page and a source code generation bottom layer platform;
the operation page is used for carrying out graphic drag configuration operation, page and component configuration operation in each module and associated configuration operation thereof, and transmitting all configuration operation parameter information to the source code generation bottom layer platform; the operation page comprises a quick operation module, a resource navigation module, a main canvas editing module and an attribute configuration module;
the source code generation bottom layer platform is used for receiving parameter information of configuration operation and analyzing and generating corresponding source codes according to the parameter information of the configuration operation.
According to a further technical scheme, the rapid operation module is used for overall layout setting of the project and the page;
the resource navigation module comprises a resource unit, a outline unit and a component unit, wherein the resource unit is used for creating pages, data models and processes, the outline unit is used for displaying component trees in the pages, the component unit comprises multiple types of components and is used for carrying out graphical dragging configuration operation of the components, selecting the components and dragging the selected components to the main canvas editing module;
the attribute configuration module comprises a style unit, an interaction unit and a data unit, wherein the style unit is used for performing component style configuration operation, the interaction unit is used for performing component, page, data model, flow and interaction action configuration operation among the components, page, data model, flow and the interaction action configuration operation among the flow, and the data unit is used for connecting data in the component and the data model.
The invention provides a visual software development practice teaching method based on a dragging configuration, which is realized by the visual software development practice teaching system based on the dragging configuration and comprises the following steps:
creating a folder and a plurality of pages for the software to be developed, and configuring project setting and page overall layout of the software to be developed;
selecting components required by a page in an operation page of a visual designer, and carrying out graphical drag configuration operation and attribute configuration operation of the components;
creating a data model and a flow model, and performing associated configuration operation based on the page, the component, the data model and the flow model, wherein the method comprises the following steps: carrying out interaction event configuration on the components; binding the component with the data model for displaying the data; binding the flow model with the page and the data model for realizing the data flow of the flow;
and storing and releasing all configuration operations, receiving parameter information of all configuration operations by a source code generation bottom layer platform, generating and displaying corresponding source codes according to the parameter information of the configuration operations, and running the generated source codes to finish development of software to be developed.
The one or more of the above technical solutions have the following beneficial effects:
1. the invention provides a visual software development practice teaching system and method, which are used for constructing and developing a software system through visual dragging quick configuration, generating all front and rear end source codes of all business functions of the developed software system, assisting teaching work, effectively exciting programming interests of the educated staff, and the development platform has the characteristics of flexibility, convenience, short business application implementation period and the like, has low skill level requirements on the educated staff, can give quick feedback, and effectively exciting design and coding enthusiasm of the educated staff;
2. the development platform provided by the invention supports generation of foreground and background source codes, covers a main technical framework of software development, facilitates learning and understanding of various technical languages, and is convenient for learning and understanding the overall process and realization thought of software development, so that the overall understanding of the software is improved, the skill level is rapidly improved, and a good foundation is laid for subsequent learning. In addition, the source code generated by the development platform is high in standardability and high in logic property, can be used as a code template for teaching display, and can be used for culturing good programming habits of the trained personnel and accumulating rich programming skills.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the invention.
FIG. 1 is a schematic diagram of page creation in an embodiment of the present invention;
FIG. 2 is a schematic diagram of a process creation in an embodiment of the invention;
FIG. 3 is a schematic diagram of an item setting page according to an embodiment of the present invention;
FIG. 4 is a schematic diagram of an auxiliary setup page according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of a resource unit in a resource navigation module according to an embodiment of the present invention;
FIG. 6 is a schematic diagram of outline units in a resource navigation module according to an embodiment of the present invention;
FIG. 7 is a schematic diagram of component units in a resource navigation module according to an embodiment of the present invention;
FIG. 8 is a schematic diagram of a style unit in an attribute configuration module according to an embodiment of the present invention
FIG. 9 is a schematic diagram of an interaction unit in an attribute configuration module according to an embodiment of the present invention
FIG. 10 is a schematic diagram of a data unit in an attribute configuration module according to an embodiment of the present invention
FIG. 11 is a schematic diagram of a component library according to an embodiment of the present invention;
fig. 12 is a schematic diagram of a visual software development practice teaching method based on drag configuration in an embodiment of the invention.
Detailed Description
It should be noted that the following detailed description is exemplary and is intended to provide further explanation of the invention. Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs.
It is noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of exemplary embodiments according to the present invention. As used herein, the singular is also intended to include the plural unless the context clearly indicates otherwise, and furthermore, it is to be understood that the terms "comprises" and/or "comprising" when used in this specification are taken to specify the presence of stated features, steps, operations, devices, components, and/or combinations thereof.
Example 1
The embodiment provides a visual software development practice teaching system based on drag configuration, which comprises a unified portal and a development platform, wherein the development platform comprises a visual designer, and the visual designer comprises an operation page and a source code generation bottom layer platform; the operation page is used for carrying out graphic drag configuration operation, page and component configuration operation in each module and associated configuration operation thereof, and transmitting all configuration operation parameter information to the source code generation bottom layer platform; the operation page comprises a quick operation module, a resource navigation module, a main canvas editing module and an attribute configuration module; the source code generation bottom layer platform is used for receiving parameter information of configuration operation and analyzing and generating corresponding source codes according to the parameter information of the configuration operation.
According to the embodiment, the software system is built and developed through visual dragging rapid configuration, all front and rear end source codes of all business functions of the developed software system are generated, teaching work is assisted, and the person under teaching can more comprehensively and deeply learn actual application of multiple languages. Specifically, the development platform provided by the embodiment is internally provided with a rich component library, supports page styles and interactive configuration, and can restore the UI design by 100%; secondly, the source code generated by the platform is based on the current mainstream frame technology, the front end adopts a Vue frame, meanwhile, the technology of an element UI component library is applied, the rear end adopts a SpringBoot as a core frame, the MyBatis plus persistent layer frame is integrated, the current industry requirements are accurately abutted, the generated source code has great advantages in the aspects of code specification, running performance and the like, and the integral architecture, functional logic and code realization of the software engineering in the practical application development can be intuitively shown for the taught personnel.
As another implementation mode, the visual designer further comprises a source code generation display module for displaying the generated source codes, and further, the source code generation display module has an editable function and is further used for carrying out secondary modification and development of the source codes, so that a trained person can truly carry out development of service application, experience a development mode of enterprise-level projects, practice capability is rapidly improved, and the final purpose of practical training is achieved.
In this embodiment, the visual software development practice teaching system based on drag configuration includes a unified portal and a development platform, where the unified portal is a presentation portal of an application effect, and the development platform is an operation portal of specific practice. The core module of the development platform is a visual designer, and the dragging and configuration of components in a page are realized in the visual designer, and the designer operation page is divided into four area modules, namely a quick operation module (namely a quick operation column), a resource navigation module (namely a resource navigation column on the left side), a main canvas editing module (namely a main canvas editing area) and an attribute configuration module (namely an attribute configuration column). The rapid operation module is used for setting the overall layout of the project and the page; the resource navigation module comprises a resource unit, a outline unit and a component unit, wherein the resource unit is used for creating folders, pages, data models and processes, the outline unit is used for displaying component trees in the pages, the component unit comprises multiple types of components and is used for carrying out graphical dragging configuration operation of the components, selecting the components and dragging the selected components to the main canvas editing module; the attribute configuration module comprises a style unit, an interaction unit and a data unit, wherein the style unit is used for performing component style configuration operation, the interaction unit is used for performing component, page, data model, flow and interaction action configuration operation between the components, page and data model, and the data unit is used for connecting data in the component and the data model.
Specifically, the quick operation bar provides the whole setting of the items and the pages, and comprises the functions of layout configuration, alignment operation, format brush, operation record and the like; the resource navigation bar is used for creating modules, data models, pages, flows and other contents required by software projects, wherein the outline tab is used for displaying a structural tree of components in a designated page, and 100 common components such as page elements of a text frame, a selection frame, a date frame, a button, a data table, a column diagram, a line diagram and the like are arranged in a component library area, so that the page elements can be directly dragged to the canvas area; the main canvas editing area is used for realizing the design and implementation of an application interface, opening a specified page file or a flow file, dragging corresponding components from the component library to specified positions of the canvas area, and completing the layout display design of the interface; the attribute configuration column is used for providing style configuration, interaction configuration and data binding configuration of the component and is used for completing the overall function realization of the page. After all the operations are completed, all the resources are saved as fragment files by clicking a save button, and source codes of all the functions are generated and displayed by clicking a release button platform bottom layer.
The development platform proposed by the present embodiment is described in more detail by the following.
As shown in fig. 1, the core function of the development platform is a visual design page, which is implemented by a visual designer, and the operation page of the visual designer includes a quick operation bar located above, a resource navigation bar located at the left side, a canvas editing area located in the middle, and an attribute configuration bar located at the right side.
In the present embodiment, the quick operation module includes an item setting unit, a page overall layout adjustment unit, a clear page unit, and an operation recording unit. The setting of the overall layout of the item is performed by rapidly operating the item setting button in the column, as shown in fig. 3, selecting a resolution terminal screen matched with the item, and selecting an appropriate overall layout setting of the page (including menu bar width, navigation bar height, tab bar height, etc. in the page) to adapt to terminal screens with different resolutions. Meanwhile, the overall layout adjustment unit of the page in the quick operation column also provides page alignment operation and supports left alignment, right alignment, horizontal centering, equal-size and format brushing of the assembly; the quick operation column is provided with a clear page button, and all components in the canvas can be cleared by one key by utilizing the clear page; the quick operation column is provided with an operation record button for recording each operation step and recovering any step according to the operation record.
As another implementation mode, an auxiliary setting unit is further arranged in the quick operation module, and the auxiliary setting unit is used for providing functions of adsorption distance setting, component interval setting and the like, and can intuitively adjust the alignment of components and the interval between the components, so that a user is assisted in quickly realizing page layout, as shown in fig. 4.
In this embodiment, the resource navigation bar includes three tabs of resources, a schema and components, the tabs of resources are used for creating folders, pages, data models and flows, the tabs of the schema are used for displaying component trees in the pages, the tabs of the components include multiple types of components, and the tabs of the components are used for performing graphical drag configuration operation of the components, selecting the components and dragging the selected components to the main canvas editing module.
As shown in fig. 5, in the resource tab of the left resource navigation bar, resources such as folders, pages, data models, and flow models may be created by clicking a right button or clicking a new button. The file comprises a plurality of pages, namely specific interfaces of the software application; the data model corresponds to a data table in the database, a data model is created in the resource tab, corresponding attributes are added, after the data model is completed, the data model (namely the data table) can be created by directly synchronizing the data model with the database by one key, and in addition, the creation process correspondingly generates a table-building SQL (structured query language) for the study reference of the trained personnel; further, when the data model is created and used for displaying data, the data model is bound with a selected component, and the data in the data model is displayed through the selected component; the flow model is a business approval flow chart, as shown in fig. 2, the development platform provided by the embodiment includes a visual design flow function, and can create a corresponding flow. After the new process is established, the drawing of the process diagram can be realized through direct dragging, and the process model, the data model and the page are bound and used for designating specific data of the process to be initiated and specific pages sent by the process, so that the data flow of the process is realized.
As shown in FIG. 6, the outline tab shows a component tree in a certain page, the component tree displayed in the outline tab of each page is automatically formed based on the canvas content after being dragged, a father-son node relationship exists between the components to form a group of components, and locking, hiding, deleting and the like of a certain group of components or a single component can be realized through the outline tab.
As shown in fig. 7, 100 kinds of components are built in the component tab, including various basic form components, data display components, layout components and the like, as shown in fig. 11 (a), including labels, single-line texts, drop-down boxes, buttons and the like, and also providing chart components, advanced components and the like, such as a bar chart, a line chart, a radar chart and the like, as shown in fig. 11 (b), support the realization of Web pages, mobile end pages and visual large screen pages, and can exercise the ability of the trained personnel in multiple directions.
In this embodiment, the main canvas editing area is used for drawing pages, data models, processes and the like, specifically, the required components are dragged from the component library of the component option card to the main canvas editing area, reasonable typesetting layout is performed to complete page design, and unsuitable components can be replaced by right click, so that 100% of the designed UI prototype can be restored in the area. The educated personnel can contrast with the source code through the operation of this module, learn the relevant content of HTML label and elementUI subassembly storehouse in depth.
In this embodiment, the attribute configuration bar includes three tabs of style, interaction and data, the style tab is used to perform component style configuration operation, the interaction tab is used to perform component, page, data model, flow and interaction configuration operation between them, and the data tab is used to connect the data in the component and data model.
As shown in FIG. 8, in the style tab, style configuration operations such as width and height, layout, font, filling, line segment, shading and the like can be performed on the components selected in the main canvas editing area, so that page designs of different styles are realized. The trained personnel can know more various types of attributes through various style settings and then combine the produced CSS codes, and accumulate rich style development experience.
As shown in FIG. 9, in the interaction tab, the selected components in the main canvas editing area may be interactively configured, including creating interaction events for the selected components, such as click events, double click events, value change events, get focus events, lose focus events, and the like. Additionally, the selected data model may be interactively configured, including adding cell single-click, row double-click events, and so forth.
Meanwhile, more than 60 business actions are provided in the platform, including page jumping, assignment, addition, modification, deletion and the like, and 80% of function realization of the system can be supported. Taking setting page skip as an example, the specific setting mode is as follows: setting component level page parameters and page parameters of the current page, wherein the component level page parameters and the page parameters refer to parameters required to be transmitted when the current page is jumped, such as page parameters of a second page, and when the current page is jumped to the second page from the first page, corresponding parameters (namely the page parameters set by the second page) are required to be transmitted, so that normal jump and display among the pages are ensured.
As shown in fig. 10, in the data tab, the designated component is bound with the data model, so that the display data of the data table, the dictionary data of the drop-down selection frame, the default display value of the text frame and the like can be bound, and the page component is associated with the bottom layer data, thereby completing the acquisition and display of the data.
In addition, in the data tab, processing configuration is performed on the data in the data table, such as configuring query conditions, configuring sorting conditions, and the like. Taking configuration ordering conditions as an example, ordering configuration is carried out on the score fields in the data model, and the data is displayed in an ordering manner from high score to low score.
The operations of the interactive setting, the data binding and the like can generate corresponding JavaScript and Java codes in the background, and the taught personnel can learn the current background interactive implementation process of the item more intuitively, master the code writing specification and improve the overall technical level.
The operation page of the visual designer is also provided with the save button and the release button, the software page and the setting thereof can be saved as the fragment file by clicking the save button, front and back end source codes can be generated and displayed according to all page designs and configurations thereof by clicking the release button, the front end adopts a Vue.js+elementUI technology, all codes of page labels, javaScript scripts and CSS styles can be visually seen, the back end adopts a SpringBoot+MyBatis plus technology, project layering is carried out according to the J2EE standard, the code logic is clear, the naming is reasonable, and the development specification is met.
Finally, in the resource navigation column, the right button is clicked to select a designated page, menu configuration is carried out, the final realization effect is checked in the unified portal after the menu configuration is completed, and the test function is realized.
The visual software development practice teaching system based on the dragging configuration provides rich interface components and configuration attributes, can rapidly complete the development of software projects, can generate all source codes of a foreground and a background, adopts a main stream technical framework, and can directly refer to learning or carry out practice learning and function expansion through secondary development; the system can be used for developing various types of applications, and can well meet the requirements of practical applications no matter being used for teaching, self-learning or project research and development.
Example two
The embodiment provides a drag configuration-based visual software development practice teaching method, which is implemented by the drag configuration-based visual software development practice teaching system in embodiment one, as shown in fig. 12, and includes the following steps:
step S1, creating a folder and a plurality of pages for the software to be developed, and configuring project setting and page overall layout of the software to be developed;
s2, selecting components required by the page in an operation page of the visual designer, and carrying out graphical drag configuration operation and attribute configuration operation of the components;
step S3, creating a data model and a flow model, and performing associated configuration operation based on the page, the component, the data model and the flow model, wherein the method comprises the following steps: carrying out interaction event configuration on the components; binding the component with the data model for displaying the data; binding the flow model with the page and the data model for realizing the data flow of the flow;
and S4, storing and releasing all configuration operations, wherein the source code generation bottom layer platform receives parameter information of all the configuration operations, generates and displays corresponding source codes according to the parameter information of the configuration operations, and operates the generated source codes to complete development of software to be developed.
In the step S1, for the software to be developed, a corresponding folder and a plurality of pages are created in the visual designer, and when the corresponding option is selected in the operation field of the visual designer, the project setting and the overall layout of the page of the software to be developed are configured, including selecting a resolution terminal screen matched with the project, selecting and adjusting the overall layout setting of the page, and the like. The overall layout setting of the page is selected and adjusted, wherein the overall layout setting of the page comprises layout configuration such as menu bar width, navigation height, label bar height and the like, an interface and component alignment mode, component interval in the interface and the like.
In the step S2, in the operation page of the visual designer, the components required by the page are selected, and the graphical drag configuration operation and the attribute configuration operation of the components are performed. Specifically, the components required by the page are selected orderly through outline units and component units in the resource navigation module, and in the operation page, the required components are dragged to the proper positions of the main canvas editing area through dragging configuration operation, so that layout adjustment is performed; further, the components are subjected to attribute configuration operation, the component styles and the like are beautified, namely the components to be configured are selected, the component styles are modified through style units in the attribute configuration module, the configuration operation such as width and height, layout, fonts, filling, line segments, shadows and the like is performed on the components, page designs of different styles are realized, students can know more types of attributes through various style settings and then combine generated CSS codes, and abundant style development experience is accumulated.
In the step S3, a data model, a flow model, and the like of the software to be developed are created through the resource units in the resource navigation module, and the associated configuration operation is performed based on the page, the component, the data model, and the flow model, including:
(1) Selecting the component, and performing interaction event configuration on the component through the interaction unit, wherein the interaction event configuration comprises performing interaction action configuration on the component, such as setting a click event, a double click event, a value change event, a focus acquisition event, a focus losing event and the like of the component.
Further, association among multiple pages is achieved through configuration of interaction events. Specifically, a new form event is bound for a certain button component in the page, and form pages required by the new form are set at the same time, and at the moment, the bound form pages can be associated by clicking the button component, so that the association between the pages is realized. As another implementation, configuration data table modifications, jump pages, etc. for components may be used to achieve associations between pages.
(2) Binding the component with the data model, wherein the component is associated with a data table in the data model, so that the data is displayed.
(3) Binding the flow model with the page and the data model for realizing the data flow of the flow.
In the step S4, all configuration operations are stored and issued, the source code generation bottom layer platform receives parameter information of all configuration operations, generates corresponding source codes according to the parameter information of the configuration operations, and operates the generated source codes to complete development of software to be developed.
As another implementation mode, the generated source code is subjected to secondary modification and development, and through the modification of the source code, the teaching staff can truly conduct development of business application, experience the development mode of enterprise-level projects, rapidly improve the practical capability and achieve the final purpose of practical training.
The method based on the visual software development practice teaching system provided by the embodiment can effectively excite the programming interest of the educated staff, and the development platform has the characteristics of flexibility, convenience, short service application implementation period and the like, and simultaneously has low skill level requirement on the educated staff, and can give quick feedback to effectively excite the design and coding enthusiasm of the educated staff; moreover, the development platform supports generation of foreground and background source codes, covers a main technical framework of software development, facilitates learning and understanding of various technical languages, and is convenient to learn the overall process and realization thought of software development, so that the overall understanding of the software is improved, the skill level is rapidly improved, and a good foundation is laid for subsequent learning. In addition, the source code generated by the development platform is high in standardability and high in logic property, can be used as a code template for teaching display, and can be used for culturing good programming habits of the trained personnel and accumulating rich programming skills.
The above description is only of the preferred embodiments of the present invention and is not intended to limit the present invention, but various modifications and variations can be made to the present invention by those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
While the foregoing description of the embodiments of the present invention has been presented in conjunction with the drawings, it should be understood that it is not intended to limit the scope of the invention, but rather, it is intended to cover all modifications or variations within the scope of the invention as defined by the claims of the present invention.
Claims (10)
1. A visual software development practice teaching system based on drag configuration is characterized by comprising a unified portal and a development platform; the development platform comprises a visual designer, wherein the visual designer comprises an operation page and a source code generation bottom layer platform;
the operation page is used for carrying out graphic drag configuration operation, page and component configuration operation in each module and associated configuration operation thereof, and transmitting all configuration operation parameter information to the source code generation bottom layer platform; the operation page comprises a quick operation module, a resource navigation module, a main canvas editing module and an attribute configuration module;
the source code generation bottom layer platform is used for receiving parameter information of configuration operation and analyzing and generating corresponding source codes according to the parameter information of the configuration operation.
2. The drag configuration-based visual software development practice teaching system according to claim 1, wherein the fast operation module is used for overall layout setting of projects and pages;
the resource navigation module comprises a resource unit, a outline unit and a component unit, wherein the resource unit is used for creating pages, data models and processes, the outline unit is used for displaying component trees in the pages, the component unit comprises multiple types of components and is used for carrying out graphical dragging configuration operation of the components, selecting the components and dragging the selected components to the main canvas editing module;
the attribute configuration module comprises a style unit, an interaction unit and a data unit, wherein the style unit is used for performing component style configuration operation, the interaction unit is used for performing component, page, data model, flow model and interaction action configuration operation among the components, the data model and the flow model, and the data unit is used for connecting data in the component and the data model.
3. The drag configuration-based visual software development practice teaching system according to claim 2, wherein the quick operation module comprises a project setting unit, a page overall layout adjustment unit, a clear page unit and an operation recording unit;
the project setting unit is used for setting the overall layout of the project and selecting a resolution terminal screen matched with the project; the page overall layout adjustment unit is used for selecting proper page overall layout settings to adapt to terminal screens with different resolutions, and the page overall layout adjustment unit comprises adjustment of menu bar width, navigation bar height and tag bar height in a page; the page overall layout adjustment unit is also used for providing page alignment operation; the clearing page unit is used for clearing all components in the canvas; the operation recording unit is used for recording each operation step and recovering to any step according to the operation record.
4. The visual software development practice teaching system based on the dragging configuration according to claim 3, wherein an auxiliary setting unit is further arranged in the quick operation module, and the auxiliary setting unit is used for providing adsorption distance setting, component interval setting, component alignment adjustment and component interval adjustment.
5. The drag configuration based visual software development practice teaching system of claim 2 wherein the component elements comprise a variety of underlying form components, data presentation components, layout components, chart components, high level components.
6. The drag configuration-based visual software development practice teaching system of claim 2, wherein the component style configuration includes a width-height, layout, font, fill, line segment, shadow configuration of a component; the interaction configuration includes a click event, a double click event, a value change event, an get focus event, a lose focus event configuration of the component.
7. The drag configuration-based visual software development practice teaching system according to claim 1, wherein the unified portal is a presentation portal of application effects, and the development platform is an operation portal of specific practices.
8. The drag configuration-based visual software development practice teaching system according to claim 1, wherein the visual designer further comprises a source code generation display module, the source code generation display module is used for displaying the generated source code and performing source code secondary modification and development.
9. The visualized software development practice teaching method based on the dragging configuration is characterized by comprising the following steps of:
creating a folder and a plurality of pages for the software to be developed, and configuring project setting and page overall layout of the software to be developed;
selecting components required by a page in an operation page of a visual designer, and carrying out graphical drag configuration operation and attribute configuration operation of the components;
creating a data model and a flow model, and performing associated configuration operation based on the page, the component, the data model and the flow model, wherein the method comprises the following steps: carrying out interaction event configuration on the components; binding the component with the data model for displaying the data; binding the flow model with the page and the data model for realizing the data flow of the flow;
and storing and releasing all configuration operations, receiving parameter information of all configuration operations by a source code generation bottom layer platform, generating and displaying corresponding source codes according to the parameter information of the configuration operations, and running the generated source codes to finish development of software to be developed.
10. The drag configuration based visual software development practice teaching method of claim 9, further comprising: and carrying out secondary modification and development of the source codes.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311394511.1A CN117523933A (en) | 2023-10-25 | 2023-10-25 | Visual software development practice teaching system and method based on dragging configuration |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311394511.1A CN117523933A (en) | 2023-10-25 | 2023-10-25 | Visual software development practice teaching system and method based on dragging configuration |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117523933A true CN117523933A (en) | 2024-02-06 |
Family
ID=89754019
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311394511.1A Pending CN117523933A (en) | 2023-10-25 | 2023-10-25 | Visual software development practice teaching system and method based on dragging configuration |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117523933A (en) |
-
2023
- 2023-10-25 CN CN202311394511.1A patent/CN117523933A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10984177B2 (en) | System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout | |
| Kurt Menke et al. | Mastering QGIS | |
| CN104317563A (en) | Online courseware cooperation development system | |
| CN105957409A (en) | Automatic teaching method and automatic teaching platform based on task allocation | |
| CN106648635B (en) | Cross-platform formula editing and rendering method and system | |
| CN109814858A (en) | The general UI Component Gallery of WEB front-end based on Vue framework | |
| CN103593414A (en) | Showing method and device of webpages in browser | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| CN112650966A (en) | Method, generator and medium for generating dynamic list page of online design | |
| Desolda et al. | End-user composition of interactive applications through actionable UI components | |
| US20130205275A1 (en) | Integrated development environment and method | |
| Kuan | Learning highcharts 4 | |
| US10809904B2 (en) | Interactive time range selector | |
| US9372844B2 (en) | Automatically generating a business process flow GUI using a symbolic annotation language | |
| CN117523933A (en) | Visual software development practice teaching system and method based on dragging configuration | |
| Hillebrand et al. | Mastering RStudio–develop, communicate, and collaborate with R | |
| CN112184082B (en) | Editing method of airport emergency treatment plan, electronic equipment and computer readable storage medium | |
| CN104020996A (en) | Instruction front-end system and corresponding instruction front-end interactive method | |
| Jermaniš | Development of MESOC Toolkit Web Application in React | |
| Stoeva | Interactive Multimedia tool for dynamic generation of web interfaces with HTML5/PHP/MySQL and JavaScript | |
| CN111968250B (en) | Rapid generation system and method for VR experiment resources based on Unity platform | |
| CHEN | Developing a corporate website for anlu aima electric bicycle shop | |
| Glinz et al. | A Vision of an Ultralightweight Requirements Modeling Language | |
| CN115564612A (en) | Simulation environment generation method and computing equipment | |
| Ronaldson | Working Diary of a Junior Software engineer |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |