CN111324390A - Device and method for realizing APP content configuration and real-time update - Google Patents

Device and method for realizing APP content configuration and real-time update Download PDF

Info

Publication number
CN111324390A
CN111324390A CN202010104487.3A CN202010104487A CN111324390A CN 111324390 A CN111324390 A CN 111324390A CN 202010104487 A CN202010104487 A CN 202010104487A CN 111324390 A CN111324390 A CN 111324390A
Authority
CN
China
Prior art keywords
page
app
configuration
data
module
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
Application number
CN202010104487.3A
Other languages
Chinese (zh)
Inventor
陈远波
杨成颖
孙迁
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suning Cloud Computing Co Ltd
Original Assignee
Suning Cloud Computing Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Suning Cloud Computing Co Ltd filed Critical Suning Cloud Computing Co Ltd
Priority to CN202010104487.3A priority Critical patent/CN111324390A/en
Publication of CN111324390A publication Critical patent/CN111324390A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44505Configuring for program initiating, e.g. using registry, configuration files
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a device and a method for realizing APP content configuration and real-time update. The scheme comprises the following steps: the page may be configured: based on actual business requirements, the page displayed by the APP is quickly customized, and the page displayed by the APP comprises a functional module, the collocation of page layout, dynamic configuration and the generation of a corresponding APP page. And (3) real-time viewing: the user can see the effect presented by the page in real time on the designer end when editing the page, and meanwhile, the APP end can view the modified content without recompiling, packaging and deploying. Functional decoupling: and in the modularized development mode, each functional module is an independent component, and the previous functions cannot be influenced if the modules are added.

Description

Device and method for realizing APP content configuration and real-time update
Technical Field
The invention belongs to the field of APP technology development, and particularly relates to a device and a method for dynamic configuration and real-time rendering in an APP loading process.
Background
At present, the APP is specialized customized development, and is realized through code customization according to interfaces and functions required by a demand side, and the interfaces and the layout are generally unchangeable.
If the change is made, the code needs to be modified again, and the user needs to download the APP again to view the effect after a series of processes such as package publishing and the like. If the APP is IOS APP or Android APP, the two processes of modification, packaging and release are needed.
Particularly, the APP for checking and analyzing the report forms comprises a large number of report forms with various scenes, each report form is provided with a large number of charts, area charts, ring charts, tables, label charts and the like, each chart comprises a plurality of self configurations, such as self-defined configurations of display legends, display descriptions and the like, in addition, components such as query panels, text components, Tab components and the like can be configured to meet the business requirements, the report forms often need to be changed, and different report forms are configured according to the requirements of users. If the common mode of native APP is adopted, it is often not flexible enough and it is very cumbersome to modify the layout and type.
Disclosure of Invention
The invention aims to provide a device and a method for realizing APP content configuration and real-time update.
The technical solution for realizing the purpose of the invention is as follows: an apparatus for implementing APP content configuration and real-time update, comprising:
the designer is used for configuring a page of the APP terminal, and the page comprises a displayed functional module and a page layout;
the interface docking module is used for appointing an interface for inquiring data, an interface for storing and reading APP configuration, a login interface and an interface for acquiring user information with the rear end of the server;
the role checking module is used for checking roles after the APP logs in;
the APP terminal configuration information processing module is used for sorting and outputting the APP page configuration information after the APP page configuration information is obtained;
the APP data rendering module is used for rendering the data in respective page layouts for display;
and the page editing module is used for adjusting the layout and editing the function at the designer end.
Further, the page of the configuration APP terminal is developed by adopting a front-end framework, and a configurable visual interface is generated and comprises a configuration area, a preview area and an editing area.
Further, the configuration area is used for combining the functional modules of the APP page.
Furthermore, the preview area simulates APP to display pages, and independently requests configuration and a data interface during display.
Furthermore, the editing area is used for editing the functional module and modifying the attribute and the function in the module; meanwhile, the editing area communicates with the preview area, and data is inquired again after the message of the configuration area is received, so that real-time updating is realized.
Further, the role checking module performs permission checking according to roles, and sets different permissions of each role in a role management background or a code.
Further, the APP side configuration information processing module obtains APP page configuration information and then arranges the APP page configuration information, converts result information into a parameter transmission format required by a data request interface, and requests a chart data interface to obtain data.
A method for realizing APP content configuration and real-time update comprises the following steps:
1) the designer develops needed components and manages and edits the page in advance according to the requirements, and is used for designing the layout and the functions of the page;
2) logging in a designer end to check the authority, and configuring a page according to the existing functions and modules of the designer end;
3) logging in an APP to perform role verification; if the role has the authority, executing the step 4); if the role has no authority, prompting no authority, not inquiring data, and displaying a blank page;
4) the APP calls a configuration interface, the configuration information in the step 2) is acquired and then analyzed, the configuration information comprises page layout information and configuration information of each functional module on the page, and the page layout is set according to the modules contained in the configuration and the content of the functions configured by the modules;
5) calling an interface for inquiring data to inquire the data of each module; rendering the layout of each module in the query process, displaying an empty layout for page occupation before returning data, and independently calling respective interfaces by each module to query data;
6) the APP terminal renders data, and displays the data returned by the interface on a rendered page;
7) and adjusting the layout and editing the function at the designer end, and storing after editing.
Further, the step (2) is configured to: the page is formed by combining a plurality of functional modules, each module comprises a plurality of functional options, the functional options of each module are selected and configured, after configuration is completed, the update button is clicked to call the query interface to query data, page effects are previewed in real time, and the save button is clicked to save the configuration.
Further, in the step (6): if the data is inquired, rendering the data to a corresponding module; if not, displaying a default option or an empty layout display; and if the query data is in error, giving an error prompt.
Compared with the prior art, the invention has the following remarkable advantages: (1) easy to use. Even if the developers who are not professional can also carry out the configuration modification of the APP, the high cost brought by the maintenance of the APP content is reduced, and the modification at each time is simple and efficient. (2) Can be configured. The layout and the content of the APP page can be configured and modified, and the convenience of operation and maintenance is improved. (3) And (4) adaptability. Configuration modification of the designer side can be carried out on the IOS side and the Android side at the same time, and multi-terminal adaptation is not needed. (4) And (4) universality. Applicable to most types of APPs, can be developed and modified in this manner. (5) And (4) real-time performance. The layout and the content of the APP page are only needed to be modified at the configuration end, and the APP can see the changed content by being re-opened or refreshed without being re-downloaded.
Drawings
FIG. 1 is a flow chart of a method for implementing APP content configuration and real-time update according to the present invention.
FIG. 2 is a diagram of the multiple terminal operation of the present invention.
FIG. 3 is a diagram of the effect of the APP terminal of the present invention.
Fig. 4 is a functional configuration diagram of the designer side of the present invention.
Detailed Description
The invention is further described with reference to the drawings and examples in the following description.
The core point of the invention is to provide a function of rapid modification for the configuration and maintenance of the APP pages, realize what you see is what you get, one-end configuration and multi-end application, and provide highly customized capability for the display of more APP pages.
The page may be configured: based on actual business requirements, the page displayed by the APP is quickly customized, and the page displayed by the APP comprises a functional module, the collocation of page layout, dynamic configuration and the generation of a corresponding APP page.
And (3) real-time viewing: the user can see the effect presented by the page in real time on the designer end when editing the page, and meanwhile, the APP end can view the modified content without recompiling, packaging and deploying.
Functional decoupling: and in the modularized development mode, each functional module is an independent component, and the previous functions cannot be influenced if the modules are added.
The invention discloses a device for realizing APP content configuration and real-time update, which comprises:
the designer is used for configuring a page of the APP terminal, and the page comprises a displayed functional module and a page layout;
the interface docking module is used for appointing an interface for inquiring data, an interface for storing and reading APP configuration, a login interface or/and an interface for acquiring user information with the rear end of the server;
the role checking module is used for checking roles after the APP logs in;
the APP terminal configuration information processing module is used for sorting and outputting the APP page configuration information after the APP page configuration information is obtained;
the APP data rendering module is used for rendering the data in respective page layouts for display;
and the page editing module is used for adjusting the layout and editing the function at the designer end.
Furthermore, the page of the configuration APP terminal is developed by adopting a front-end framework, and a configurable visual interface is generated, wherein the interface comprises a configuration area, a preview area and an editing area.
Further, the configuration area is used for combining the functional modules of the APP page. Several functional modules commonly used by pages are provided in the configuration area, such as a query panel, a Tab sliding switching module, a chart module (including tables, area diagrams, label cards and the like), a text component, a button and the like, and a user can speak the modules to be configured and combined into one page at will.
Furthermore, the preview area simulates APP to display pages, and independently requests configuration and a data interface during display.
Furthermore, the editing area is used for editing the functional module and modifying the attribute and the function in the module; meanwhile, the editing area communicates with the preview area, and data is inquired again after the message of the configuration area is received, so that real-time updating is realized.
Further, the role checking module performs permission checking according to roles, and sets different permissions of each role in a role management background or a code.
Further, the APP side configuration information processing module obtains APP page configuration information and then arranges the APP page configuration information, converts result information into a parameter transmission format required by a data request interface, and requests a chart data interface to obtain data.
With reference to fig. 1 and 2, the working flow of the scheme for configuring APP according to the present invention is as follows:
1. designer preparation: before configuration, a designer end, namely a page of an APP end needs to be prepared, the page comprises functions and modules which can be displayed by the page of the APP end, real-time viewing of configuration effects is supported, and a user can configure the APP end even if the user does not understand codes. The specific page layout and function of the designer end can be customized and developed according to specific requirements and actual conditions, the Web page is a common Web page, the development can be completed by matching traditional HTML with Jquery, and the development can also be performed by means of a front end frame, the invention adopts a Vue frame, a front end route Vue-Router is added to control the jumping among a plurality of pages, an Ant-Design is adopted by a UI frame, and finally, the Web page is developed into a complete page according to the requirements.
2. Interface butt joint: an interface for inquiring data, an interface for storing and reading APP configuration, a login interface or/and an interface for acquiring user information are required to be defined with the back end; .
3. Role verification: can agree with the role, the designer end need carry out the role check, and the role that only accords with the permission requirement can be configured, and whether the role on the APP can be set for and can look over corresponding configuration content simultaneously.
APP terminal data presentation process:
a) firstly, a user is required to log in, and role verification and authority verification are carried out during login.
b) And after login is successful, inquiring a data configuration interface according to the login role, if the authority verification is passed, returning the configuration to the APP, and otherwise, prompting no authority.
c) The APP calls the configuration interface to take the configuration information and then analyzes the configuration information, and sets page layout according to the module contained in the configuration and the content of the function configured by the module; and carrying out page layout design.
d) And after the configuration and the analysis are finished, the parameters are arranged to call an interface for inquiring data, and if the data are found, the data are rendered into different modules according to types for display.
e) If the data is not checked, a default option or an empty layout display is displayed, and if the data is inquired in an error, an error prompt is given.
And 5, the APP terminal renders the data, renders the data in respective page layouts for display, wherein the data may be table data, various graphs, TAB TABs, various buttons and the like.
6. Page editing: and adjusting the layout and editing the function at the designer end, and storing the layout and the function after editing so as to check the effect at the APP end and the designer end in real time.
In one of the examples, the first and second electrodes are,
a designer end: the designer is a web page capable of configuring APP content, the page can be developed by adopting a front-end frame, for example, an Vue frame is matched with a UI frame of an AntDesign version to generate a configurable visual interface for a user to use, and simultaneously, the page has a preview function, after the configuration is completed and the storage is completed, a preview effect can be seen in a preview area, the preview area can draw a mobile phone area to simulate the APP for page display, the two are mutually independent, an iframe is nested in the whole web page, the configuration and the data interface are independently requested during display, the effect can be timely seen in the preview area when some configurations are changed, a postMessage is adopted for communication between an editing area and the preview area, data is timely inquired again after the message of the configuration area is received, a real-time updating effect is achieved, and a chart in the preview area can be conveniently used by adopting a harts chart library. See fig. 3 and 4.
APP end: the APP end adopts hybrid APP development, namely native development and Reactnative are used simultaneously, part of pages are realized by the native, the configurable part of pages are developed and realized by the Reactnative, and the modes of the Reactnative can be packaged into IOS and Android applications, are embedded in the APP, replace some native modules and functions, and are convenient for frequent maintenance and editing.
The invention can realize the dynamic configuration of the content of the APP, the user can configure according to the provided components and functions at the designer end, the layout and the content can be modified, and the APP is opened again after the modification and the storage, so that new pages and content can be checked in real time. By the method, the cost for modifying the page is reduced, and the page maintenance efficiency is improved. The multi-scene configurable mode is adopted, the method is generally applicable to most of APPs, the page maintenance cost of the APPs is greatly reduced through configurable customized pages, and the efficiency of modifying the page layout of the APPs is improved.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.

Claims (10)

1. An apparatus for implementing APP content configuration and real-time update, comprising:
the designer is used for configuring a page of the APP terminal, and the page comprises a displayed functional module and a page layout;
the interface docking module is used for appointing an interface for inquiring data, an interface for storing and reading APP configuration, a login interface and an interface for acquiring user information with the rear end of the server;
the role checking module is used for checking roles after the APP terminal logs in;
the APP terminal configuration information processing module is used for sorting and outputting the APP page configuration information after the APP page configuration information is obtained;
the APP data rendering module is used for rendering the data in respective page layouts for display;
and the page editing module is used for adjusting the layout and editing the function at the designer end.
2. The apparatus of claim 1, wherein: the page of the APP configuration end of the designer is developed by adopting a front-end framework, and a configurable visual interface is generated and comprises a configuration area, a preview area and an editing area.
3. The apparatus of claim 2, wherein: the configuration area is used for combining the functional modules of the APP page.
4. The apparatus of claim 2, wherein: and the preview area simulates APP to display pages.
5. The apparatus of claim 2, wherein: the editing area is used for editing the functional module and modifying the attribute and the function in the functional module; meanwhile, the editing area communicates with the preview area, and the preview area inquires data again after receiving the message of the configuration area, so that real-time updating is realized.
6. The apparatus of claim 1, wherein: and the role checking module carries out permission checking according to roles and sets different permissions of each role in a role management background or a code.
7. The apparatus of claim 1, wherein: the APP side configuration information processing module obtains APP page configuration information and then arranges the APP page configuration information, converts the arranged information into a parameter transmission format required by a data request interface, and requests a chart data interface to obtain data.
8. A method for realizing APP content configuration and real-time update is characterized by comprising the following steps:
1) a designer for developing a Web page;
2) logging in a designer end to check the authority, and configuring a page according to the existing functions and modules of the designer end;
3) logging in an APP to perform role verification; if the role has the authority, executing the step 4); if the role has no authority, prompting no authority, not inquiring data, and displaying a blank page;
4) the APP calls a configuration interface, the configuration information in the step 2) is acquired and then analyzed, the configuration information comprises page layout information and configuration information of each functional module on the page, and the page layout is set according to the modules contained in the configuration and the content of the functions configured by the modules;
5) calling an interface for inquiring data to inquire the data of each module; rendering the layout of each module in the query process, displaying an empty layout for page occupation before returning data, and independently calling respective interfaces by each module to query data;
6) the APP terminal renders data, and displays the data returned by the interface on a rendered page;
7) and adjusting the layout and editing the function at the designer end, and storing after editing.
9. The method of claim 8, wherein the configuration of step (2) is to: the page is formed by combining a plurality of functional modules, each module comprises a plurality of functional options, the functional options of each module are selected and configured, after configuration is completed, the update button is clicked to call the query interface to query data, page effects are previewed in real time, and the save button is clicked to save the configuration.
10. The method of claim 8, wherein in step (6): if the data is inquired, rendering the data to a corresponding module; if not, displaying a default option or an empty layout display; and if the query data is in error, giving an error prompt.
CN202010104487.3A 2020-02-20 2020-02-20 Device and method for realizing APP content configuration and real-time update Pending CN111324390A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010104487.3A CN111324390A (en) 2020-02-20 2020-02-20 Device and method for realizing APP content configuration and real-time update

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010104487.3A CN111324390A (en) 2020-02-20 2020-02-20 Device and method for realizing APP content configuration and real-time update

Publications (1)

Publication Number Publication Date
CN111324390A true CN111324390A (en) 2020-06-23

Family

ID=71172764

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010104487.3A Pending CN111324390A (en) 2020-02-20 2020-02-20 Device and method for realizing APP content configuration and real-time update

Country Status (1)

Country Link
CN (1) CN111324390A (en)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112035104A (en) * 2020-08-28 2020-12-04 重庆长安汽车股份有限公司 Modeling method for dynamically changing function configuration of mobile application
CN112685009A (en) * 2020-12-09 2021-04-20 广东各有所爱信息科技有限公司 Method for managing and displaying custom module
CN113435669A (en) * 2021-07-30 2021-09-24 多点生活(成都)科技有限公司 Method and device for optimizing access workflow, electronic equipment and readable storage medium
CN113535269A (en) * 2021-07-21 2021-10-22 重庆富民银行股份有限公司 Visual dynamic page configuration method
CN117311709A (en) * 2023-09-18 2023-12-29 深圳市联医科技有限公司 Page design system and electronic equipment applied to Internet nursing software

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016177250A1 (en) * 2015-05-05 2016-11-10 阿里巴巴集团控股有限公司 Client page rendering method and apparatus
CN110221848A (en) * 2019-04-23 2019-09-10 五八有限公司 APP method for updating pages, device, electronic equipment and storage medium
CN110442336A (en) * 2019-08-05 2019-11-12 上海钧正网络科技有限公司 A kind of web development methods and device, storage medium and electronic equipment

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2016177250A1 (en) * 2015-05-05 2016-11-10 阿里巴巴集团控股有限公司 Client page rendering method and apparatus
CN110221848A (en) * 2019-04-23 2019-09-10 五八有限公司 APP method for updating pages, device, electronic equipment and storage medium
CN110442336A (en) * 2019-08-05 2019-11-12 上海钧正网络科技有限公司 A kind of web development methods and device, storage medium and electronic equipment

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112035104A (en) * 2020-08-28 2020-12-04 重庆长安汽车股份有限公司 Modeling method for dynamically changing function configuration of mobile application
CN112035104B (en) * 2020-08-28 2024-03-22 重庆长安汽车股份有限公司 Modeling method for dynamically changing functional configuration of mobile application
CN112685009A (en) * 2020-12-09 2021-04-20 广东各有所爱信息科技有限公司 Method for managing and displaying custom module
CN113535269A (en) * 2021-07-21 2021-10-22 重庆富民银行股份有限公司 Visual dynamic page configuration method
CN113435669A (en) * 2021-07-30 2021-09-24 多点生活(成都)科技有限公司 Method and device for optimizing access workflow, electronic equipment and readable storage medium
CN113435669B (en) * 2021-07-30 2022-10-28 多点生活(成都)科技有限公司 Method and device for optimizing access workflow, electronic equipment and readable storage medium
CN117311709A (en) * 2023-09-18 2023-12-29 深圳市联医科技有限公司 Page design system and electronic equipment applied to Internet nursing software

Similar Documents

Publication Publication Date Title
CN111324390A (en) Device and method for realizing APP content configuration and real-time update
US8930824B2 (en) Facilitating propagation of user interface patterns or themes
CN111079047B (en) Web-oriented page construction system
CN109725901A (en) Development approach, device, equipment and the computer storage medium of front-end code
CN115712413B (en) Low code development method, device, equipment and storage medium
CN104636139A (en) Visualized cross-platform mobile application development and generation system
CN110851134A (en) Low-code page design device and page design method
CN102495735A (en) Web end UI (user interface) component application frame system
CN106293743A (en) A kind of mobile modeling and build Mobile solution the method realizing cross-platform issue
US11349902B2 (en) System and method to standardize and improve implementation efficiency of user interface content
CN111625226A (en) Prototype-based human-computer interaction design implementation method and system
CN102253986A (en) Method and device for improving webpage displaying effect in multiple terminals
CN115510347A (en) Presentation file conversion method and device, electronic equipment and storage medium
CN112214202B (en) Mobile phone program development system without writing codes
CN105094768A (en) Application interface generation method and application interface generation device
WO2017143498A1 (en) Double-render-engine browser, and pc end web page application page conversion method and apparatus
CN109190078A (en) Webpage construction method, device and storage medium
CN111736831A (en) Custom menu component development method based on HTML page of mobile terminal
Delessio et al. Sams teach yourself Android application development in 24 hours
CN113110829B (en) Multi-UI component library data processing method and device
US20220004700A1 (en) System and method for producing transferable, modular web pages
CN114489619A (en) Interface view display method, terminal equipment and computer readable storage medium
CA2539047A1 (en) System and method for generating component based applications
CN112486378A (en) Graph generation method, device, terminal and storage medium
KR100346983B1 (en) Web editor for wireless internet and operating method therefor

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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20200623