Disclosure of Invention
In order to solve the above problems, the present application provides a method for designing an application framework, including: determining a protocol interface through a service layer, determining a data format transmitted by the protocol interface, and determining a communication channel according to the protocol interface and the data format; accessing a database through the service layer to access data, and transmitting the acquired data with an application management editing layer through the communication channel; docking with a mobile terminal through the application management editing layer to acquire an application of the mobile terminal, and editing application properties of the application according to application requirements; and accessing an application browsing layer through the mobile terminal, acquiring the data through the application browsing layer, determining a page of the application according to the data and the application attribute, and sending the page to the mobile terminal.
In one example, determining a data format transmitted by the protocol interface, determining a communication channel according to the protocol interface and the data format, specifically includes: determining the design style of the protocol interface, and determining a data format corresponding to the design style according to the design style; and providing the corresponding communication channels for the design style and the data format through an Application Programming Interface (API) of the service layer so as to access a database and a file storage system through the communication channels.
In one example, the method further comprises: acquiring the characteristics of the data in the database through the communication channel, and changing the data according to the characteristics so as to edit the application attribute, wherein the application attribute comprises the page and page elements corresponding to the page; and acquiring the stored application file from the file storage system through the communication channel, and storing the application file after editing the application attribute into the file storage system.
In one example, before editing the application properties of the application according to the application requirements, the method further comprises: determining a plurality of pages of the application, and determining page elements corresponding to each page to determine the application attribute; determining a hierarchy of the application according to the application attribute, and determining application hierarchy data according to the hierarchy, wherein the application hierarchy data at least comprises background music; and determining page level data according to the page elements, wherein the page level data at least comprises page types, logic widths, logic heights and background pictures.
In one example, the method further comprises: editing the page level data through the page element, wherein the page element comprises basic attributes and expansion attributes, and the basic attributes at least comprise width, height, X-axis coordinates, Y-axis coordinates and rotation angles; and dividing the page element into a text element, a picture element and other elements according to element types, and editing the text element and the picture element through the extension attribute.
In one example, the data is obtained through the application browsing layer, and the page of the application is determined according to the data and the application attribute, which specifically includes: acquiring the data in the database, and determining page elements according to the application attributes; determining an API of the application framework NUXT, and assembling the data and the page element through the API to obtain the page.
On the other hand, the application also provides a design system of the application framework, which comprises the following components: the service layer provides a protocol interface, determines a data format according to the protocol interface, and provides a communication channel according to the protocol interface and the data format; the application management layer is connected with the service layer through the communication channel, acquires the application of the mobile terminal, and edits the application attribute of the application according to the application requirement; and the application browsing layer is connected with the service layer through the communication channel, acquires data of a database, determines a page of the application according to the data and the application attribute, and sends the page to the mobile terminal.
In one example, the system further comprises: and the basic service layer comprises the database, and the service layer is connected with the database through the communication channel so as to access the data.
On the other hand, the application also provides design equipment of the application framework, which comprises the following components: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor to enable the design apparatus of the one application framework to perform: a method as in any one of the examples above.
In another aspect, the present application also provides a non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions are configured to: a method as in any one of the examples above.
According to the method and the system, the H5 mobile terminal page is directly generated through the mobile terminal application framework, and the designed element coordinate positioning function is utilized, so that one-to-one reduction of the UI effect diagram can be realized, and great flexibility can be provided for business personnel. And through the frame design, the problem of slow page loading caused by the conditions of oversized pictures, terminal rendering and the like is solved, and the page loading efficiency of the mobile terminal is improved.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be clearly and completely described below with reference to specific embodiments of the present application and corresponding drawings. It will be apparent that the described embodiments are only some, but not all, embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
The following describes in detail the technical solutions provided by the embodiments of the present application with reference to the accompanying drawings.
Currently, because of the popularity of agile development processes, each role of the development process is well defined, with higher decoupling among participants in the process. Some H5 mobile terminal application development frameworks also appear in the industry, but the current framework simply lists page elements, so that an implementation person cannot directly and well reproduce an effect page designed by a designer, and the use effect of an item implementation person is poor. Furthermore, these frameworks do not take into account the superposition of various external factors, such as network conditions, mobile device capabilities, etc., in a truly complex use environment, which may result in poor user experience in part.
The technology has at least the following problems: due to mobile application framework limitations, the implementers cannot reproduce the effect figures in percentage, and the expected effect is difficult to achieve. In a real use scene, a mobile terminal user loads page contents for too long or fails to load, so that the user generates anxiety.
As shown in fig. 1, in order to solve the above-mentioned problem, the method for designing an application framework according to the embodiment of the present application is applied to a system for designing an application framework, where the system for designing an application framework includes a service layer, an application management editing layer, and an application browsing layer. The method comprises the following steps:
s101: and determining a protocol interface through a service layer, determining a data format transmitted by the protocol interface, and determining a communication channel according to the protocol interface and the data format.
As shown in fig. 2, the design system of the application framework is further attached with a basic service layer, through which a hardware environment is provided for the service layer as a basic support, wherein the basic service layer includes a mongo db database based on distributed file storage, and a file storage system, namely an object storage service (Object Storage Service, OSS). An HTTP protocol interface is provided through an application program interface (Application Programming Interface, API) of the service layer, a data format transmitted by the HTTP protocol interface is determined, a communication channel is established according to the protocol interface and the data format, and data in the MongoDB database is transmitted through the communication channel.
S102: and accessing a database through the service layer to access the data, and transmitting the acquired data with an application management editing layer through the communication channel.
And a communication channel is provided for the application browsing layer and the application management editing layer upwards through the service layer, and the MongoDB database is connected downwards so as to provide the application browsing layer and the application management editing layer with the capability of accessing the database.
In one embodiment, a design style of the HTTP protocol interface, such as a RESTful style, is determined, and a data format corresponding to the style is determined according to the RESTful style, for example: the RESTful-style HTTP protocol interface is provided through the service layer, and the data format is a standard JSON format. Corresponding communication channels are provided for RESTful styles and JSON formats through the APIs of the service layer to access the database and the OSS system through the communication channels.
In one embodiment, the characteristics of JSON format data can be directly accessed through the MongoDB database, according to the characteristics, modification operations such as adding, deleting, modifying and inquiring can be conveniently performed on application attributes, a unified access method can be provided for application files such as pictures and audios, the application files are stored in an OSS system, and distributed system cloud storage services provided by the OSS system are provided, so that bandwidth and flow pressure brought by large files to a service layer server are reduced. For example: and switching and storing the a.png file from the self server to an OSS system, wherein after the front-end page is modified, the a.png file in the cloud storage can be directly accessed when the terminal accesses the a.png file, and the a.png file is not downloaded from the self server, so that the bandwidth and the flow pressure of the self server are reduced.
S103: and docking with the mobile terminal through the application management editing layer to acquire the application of the mobile terminal, and editing the application attribute of the application according to the application requirement.
As shown in fig. 4, the mobile terminal may be divided into a mobile device terminal and an application editing terminal according to functions. When editing the application attribute, the application editing terminal is connected with the management editing layer through the Nginx server, load balancing of the front-end page is carried out through the Nginx server, and an editing request is sent to the server of the application management editing layer. The server of the application management editing layer accesses file service to the OSS system to acquire static elements; accessing to the server of the API service layer, obtaining data, editing the data and the elements to finish editing the application attribute, and storing the edited application attribute to the MongoDB database.
In one embodiment, the application management editing layer subsystem provides management of mobile end applications, as shown in FIG. 3, each application corresponds to one or more pages, each page corresponds to a plurality of page elements, including text elements, picture elements, and the like. Multiple pages and page elements compose application attributes, with corresponding attributes at different physical levels from application to page. In the hierarchy of the application, application hierarchy data is set, taking application 1 as an example, the attribute on the application hierarchy of the entire application 1 is described as application hierarchy data of the application 1. By modifying the application level data, modifications may be made to the application page, such as: the relevant information of the background music is changed by modifying the application level data. In the hierarchy of pages, page hierarchy data is set. The page level data contains basic attribute descriptions of pages, for example: page type, logical width, logical height, background map, etc.
In one embodiment, a page hierarchy contains a plurality of page element definitions, each page element consisting of a base attribute and an extended attribute, the base attribute including width, height, X-axis coordinates, Y-axis coordinates, rotation angle, and the like. The page elements are divided into text elements, picture elements and other elements according to element types, and the expansion attribute is the characteristic attribute of each page element, such as the text color of the text elements, the picture address of the picture elements and the like. Each page element implements free drag editing in the page through vuedraggable components.
S104: and accessing an application browsing layer through the mobile terminal, acquiring the data through the application browsing layer, determining a page of the application according to the data and the application attribute, and sending the page to the mobile terminal.
As shown in fig. 4, when accessing an application page, the mobile device terminal connects to the management editing layer through the nminix server, and performs load balancing of the front-end preload page through the nminix server, and sends an access request to the server of the application browsing layer. The server of the application browsing layer accesses file service to the OSS system to acquire static elements; accessing to a server of the API service layer, acquiring data, editing the data and elements, reading the application page from the MongoDB database, and sending the read application page to the mobile equipment terminal.
The application browsing layer provides the function of independently analyzing the H5 mobile terminal application. Traditional Vue applications require data rendering at the client, which has long latency for the mobile terminal to render, resulting in increased power consumption of the mobile terminal. According to the method, a function of carrying out server rendering is utilized NUXT, an application browsing layer is accessed through a mobile terminal, data is obtained through the application browsing layer, pages of the application are determined according to the data and application attributes, and the pages are sent to the mobile terminal.
In one embodiment, data in a database is obtained and page elements are determined based on application attributes. The application framework NUXT calls the service layer API, after obtaining the data, assembles the data and the page elements, combines the data and the page elements into a complete html page, and then directly returns the html page to the mobile terminal browser for the user to browse. Therefore, the rendering pressure of the client can be reduced, the waiting time of the user is reduced, and the user experience is improved. The application browsing layer can directly use the OSS file address for large files such as picture files, and reduces the pressure of an application server and an API service layer server.
In one embodiment, each tier of servers may be load balanced separately. Through the load balancing of the database server and the API service, the request can be rapidly processed, and the waiting of data and interfaces is reduced. The load balancing of the OSS file server can enable the large files in different regions to be quickly downloaded and browsed when the applications are edited or the large files in the applications are browsed. By applying the load balance of the browser layer server side rendering, a browser can reduce rendering pressure and quickly analyze page display.
As shown in fig. 2, the design system of the application framework provided in the embodiment of the present application further includes:
The service layer comprises an API and a log system, provides a protocol interface, determines a data format according to the protocol interface, and provides a communication channel according to the protocol interface and the data format.
And the application management layer is in a multi-level structure construction form, and supports component expansion and is provided with vuedraggable components to realize free dragging in the page. The application management layer is connected with the service layer through a communication channel, acquires the application of the mobile terminal, and edits the application attribute of the application according to the application requirement.
The application browsing layer is in a multi-level structure construction form and is provided with NUXT functions for rendering the server side. The application browsing layer is connected with the service layer through a communication channel, acquires data of the database, determines pages of the application according to the data and the application attribute, and sends the pages to the mobile terminal.
The design system of the application framework is additionally provided with a basic service layer, and comprises a MongoDB database, a cloud server and an OSS system, wherein the service layer is connected with the database through a communication channel so as to access data. And carrying out file storage service through an OSS system.
As shown in fig. 5, an embodiment of the present application further provides a design apparatus for an application framework, including:
At least one processor; and
A memory communicatively coupled to the at least one processor; wherein,
The memory stores instructions executable by the at least one processor to enable the design apparatus of the one application framework to perform the method according to any one of the embodiments described above.
The embodiment of the application also provides a nonvolatile computer storage medium, which stores computer executable instructions, wherein the computer executable instructions are configured to: a method as in any above embodiment.
The embodiments of the present application are described in a progressive manner, and the same and similar parts of the embodiments are all referred to each other, and each embodiment is mainly described in the differences from the other embodiments. In particular, for the apparatus and medium embodiments, the description is relatively simple, as it is substantially similar to the method embodiments, with reference to the section of the method embodiments being relevant.
The devices and media provided in the embodiments of the present application are in one-to-one correspondence with the methods, so that the devices and media also have similar beneficial technical effects as the corresponding methods, and since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media are not repeated here.
It will be appreciated by those skilled in the art that embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In one typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include volatile memory in a computer-readable medium, random Access Memory (RAM) and/or nonvolatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media.
Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. Computer-readable media, as defined herein, does not include transitory computer-readable media (transmission media), such as modulated data signals and carrier waves.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article or apparatus that comprises the element.
The foregoing is merely exemplary of the present application and is not intended to limit the present application. Various modifications and variations of the present application will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. which come within the spirit and principles of the application are to be included in the scope of the claims of the present application.