CN117608572A

CN117608572A - Page development method, device and computer readable storage medium

Info

Publication number: CN117608572A
Application number: CN202311525137.4A
Authority: CN
Inventors: 陆志远; 刘海东; 苏南; 张宝浩; 程成林
Original assignee: China Merchants Finance Technology Co Ltd
Current assignee: China Merchants Finance Technology Co Ltd
Priority date: 2023-11-15
Filing date: 2023-11-15
Publication date: 2024-02-27

Abstract

The invention discloses a page development method, page development equipment and a computer readable storage medium, and belongs to the technical field of front-end development. The page development method comprises the following steps: based on the component insertion action received by the page development interface, displaying a front end terminal component selection interface; selecting a target component according to the selected action received by the front end component selection interface; acquiring component information corresponding to the target component, wherein the component information is used for determining loading information of the target component; and generating page elements of the page to be developed according to the component information. By the method, in the scene of repeated development of the front-end page business, the development efficiency is improved, the code quantity of the rear end is reduced, and the maintenance cost is reduced.

Description

Page development method, device and computer readable storage medium

Technical Field

The present invention relates to the field of front-end development, and in particular, to a page development method, apparatus, and computer-readable storage medium.

Background

In the front-end development process, a general front-end component is often used and applied to a UI page development business scene, so that development efficiency is improved. However, in a practical development scenario, such as the basic data field of a large system, there are many repeated service scenarios, which may result in excessive repeated components. And during the encoding process, the interfaces of the repeated components need to be manually called, which results in low development efficiency of the front-end page.

The foregoing is provided merely for the purpose of facilitating understanding of the technical solutions of the present invention and is not intended to represent an admission that the foregoing is prior art.

Disclosure of Invention

The invention mainly aims to provide a page development method, equipment and a computer readable storage medium, and aims to solve the technical problem that in a repeated front-end service development scene, interfaces of repeated components are required to be manually called, so that the development efficiency of a front-end page is low.

In order to achieve the above object, the present invention provides a page development method, including the steps of:

based on the component insertion action received by the page development interface, displaying a front end terminal component selection interface;

selecting a target component according to the selected action received by the front end component selection interface;

acquiring component information corresponding to the target component, wherein the component information is used for determining loading information of the target component;

and generating page elements of the page to be developed according to the component information.

Optionally, the step of generating the page element of the page to be developed according to the component information includes:

according to the component information and the target component, an application program interface request is sent to a back-end system;

and displaying the page elements of the page to be developed based on the response data fed back by the back-end system.

Optionally, the step of sending an application program interface request to the backend system according to the component information and the target component includes:

creating the application program interface request according to the component information;

setting request parameters of the application program interface request;

and sending the set application program interface request to the back-end system.

Optionally, the step of displaying the page element of the page to be developed based on the response data fed back by the backend system includes:

receiving the response data sent by the back-end system;

analyzing the response data and updating the state or attribute of the target component;

rendering the page to be developed based on the state or attribute of the target component to display the page element.

Optionally, before the step of selecting the target component according to the selected action received by the front end component selection interface, the method further includes:

acquiring a component construction requirement and a data interface;

determining corresponding data fields and data types based on the component construction requirements;

defining an interface specification for the data interface;

the target component is constructed based on the data field, the data type, and the interface specification.

Optionally, after the step of generating the page element of the page to be developed according to the component information, the method further includes:

when the page element is loaded in error, determining error information based on an error processing callback function;

triggering a corresponding error processing mechanism according to the error information;

and processing the errors of the page elements based on the error processing mechanism.

when a preset event of the page element is triggered, acquiring a trigger keyword of the preset event;

and adjusting the data corresponding to the page element based on the trigger keyword so as to respond to a preset event of the page element.

Optionally, the page development method further includes:

generating a common logic module based on components with common logic in the component library;

and when the development business requirement comprises a public logic requirement, calling the public logic module.

In addition, in order to achieve the above object, the present invention also provides a page developing apparatus including: a memory, a processor, and a page development program stored on the memory and executable on the processor, the page development program configured to implement the steps of the page development method as described above.

In addition, in order to achieve the above object, the present invention also provides a computer-readable storage medium having stored thereon a page development program which, when executed by a processor, implements the steps of the page development method as described above.

The embodiment of the invention provides a page development method, which is based on a component insertion action received by a page development interface, displays a front end terminal component selection interface, selects a target component according to the selected action received by the front end terminal component selection interface, and acquires component information corresponding to the current target component, wherein the component information is used for determining loading information of the target component, and generates page elements of a page to be developed according to the component information. By the method, in the scene of repeated development of the front-end page business, the development efficiency is improved, the code quantity of the rear end is reduced, and the maintenance cost is reduced.

Drawings

FIG. 1 is a schematic flow chart of a first embodiment of a page development method of the present invention;

FIG. 2 is a flow chart of a second embodiment of the page development method of the present invention;

FIG. 3 is a flowchart of a third embodiment of a page development method according to the present invention;

FIG. 4 is a flowchart of a fourth embodiment of the page development method of the present invention;

FIG. 5 is a first interface reference diagram of a third embodiment of the present invention;

FIG. 6 is a second interface reference diagram of a third embodiment of the present invention;

fig. 7 is a schematic diagram of a terminal structure of a hardware operating environment according to an embodiment of the present invention.

The achievement of the objects, functional features and advantages of the present invention will be further described with reference to the accompanying drawings, in conjunction with the embodiments.

Detailed Description

It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.

The embodiment of the invention provides a page development method, referring to fig. 1, fig. 1 is a schematic flow chart of a first embodiment of the page development method of the invention.

In this embodiment, the page development method includes:

and step S10, displaying a front end terminal component selection interface based on the component insertion action received by the page development interface.

In this embodiment, the page development interface is an interface applied by a developer in a service development process, and the developer can select a corresponding component and insert the corresponding component according to a development requirement in the interface, and when receiving a component insertion action, the page development interface can display a front end component selection interface. The interface displays a plurality of other basic data components, and the components are all developed in advance and can be selected by a developer according to development requirements. Alternatively, as one possible implementation, a front end component selection interface may be created using HTML, CSS, and JavaScript. The interface may include elements of component lists, search boxes, filtering options, etc. to assist the user in selecting from among the available base components. In the development interface of the page, a listener is added to monitor the triggering of the component insertion action. May be implemented using an event listening mechanism in JavaScript. When a component insertion action is received, the next operation is triggered. In the listener, the front end component selection interface is caused to be displayed by appropriate logic control. This may be accomplished by adding, deleting, or modifying styles or properties of corresponding DOM elements. Ensuring that the component selection interface can be properly layered over the development interface and does not conflict with other elements. After the component selection interface is displayed, the developer can browse the list of components, screen using the search box, and select the base components they desire. JavaScript may be used here to monitor the user's selection and process accordingly after the developer selects a component. After the developer selects the basic data component, corresponding component insertion actions are executed according to the selected component information.

It should be noted that, in order to ensure that the inserted component can be correctly displayed in the development interface and interact with other components or elements. The specific implementation uses a front end framework, technology stack, and business requirements that vary. In the actual development process, the method can be properly adjusted and expanded according to the self situation.

In this embodiment, through the component insertion action of the page development interface, the developer can call the required component according to the development requirement, so that the efficiency of the developer for the development of the service scene is improved.

And step S20, selecting a target component according to the selected action received by the front end component selection interface.

In this embodiment, the target component may be selected based on the selected action received by the front end component selection interface. Specifically, a front end component selection interface is created in advance, including elements such as component list, search box, screening options, etc., so that the user can select the target component from them. A monitor is added in the front-end base component selection interface, so that the selected action of a user can be monitored. After the selected action is triggered, the relevant information of the target component selected by the user is acquired through proper logic control. This may involve reading an identifier, attribute, or other identifying information of the selected component. The acquired target components are marked or set for subsequent processing and use. The target component may be marked here by adding a specific class name, attribute or data structure for its identification by subsequent operations. And carrying out corresponding follow-up operation according to the selected target component. For example, code for the selected component may be inserted into the development interface, related data structures updated, other actions triggered, and so forth. Different operations will also vary according to different business requirements.

In this embodiment, through the selected action received by the front end component selection interface, the developer can call the required target component according to the development requirement, so that the efficiency of the developer for developing the service scenario is improved.

Step S30, acquiring component information corresponding to the target component, wherein the component information is used for determining loading information of the target component.

In this embodiment, in the front-end base component selection interface, when the user selects the target component, a specific mark may be added to the selected target component. This may be accomplished by adding a class name, custom attribute, or other tagging means to the DOM element of the selected component. In a subsequent process, the DOM element of the target component containing the specific mark is retrieved by using a DOM operation or a JavaScript query method. The target component may be found and identified herein using class names, tag names, custom attributes, and the like. Once the DOM element of the target component is found, the information for that component can be obtained by traversing the attributes, child nodes, and other relevant information of the element. This involves retrieving data about the name, properties, style, etc. of the component. When the information of the target component is successfully acquired, the subsequent processing can be performed according to the own requirements. This may include exposing component information, interacting with other components, generating code fragments from the information, and so forth.

It should be noted that, for the specific implementation manner of obtaining the component information, the determination may be determined according to the front end framework, the technology stack and the component library used. In the actual application process, a proper method is required to be selected according to the requirements and conditions of the user to acquire the information of the target component.

In this embodiment, by acquiring the component information of the target component, rendering of the page to be developed according to the component information can be facilitated, and the page element is generated and added.

And S40, generating page elements of the page to be developed according to the component information.

In this embodiment, according to the component information, page elements of the page to be developed may be further generated.

The component information includes related data such as component names, attributes, styles and the like. According to the component information, page elements are dynamically created by using a method provided by a front-end framework or native JavaScript. And setting corresponding HTML labels, attribute values and style rules according to the types, attributes and styles of the components, so as to generate specific page elements. The generated page elements are organized according to the required layout and structure, such as nesting, arrangement, layering and the like, so as to obtain the desired page layout. In addition, if the component needs to add the interactive function, an event processing function can be added for the generated page element according to the component information. The generated page element is inserted into the appropriate position in the target page, which can select the target container element by using DOM operation method, and add the generated page element as its child node. If the component needs to update its state according to user interaction or other factors, the attribute, style or content of the generated page element can be updated according to the component information and business logic.

Alternatively, in one possible implementation, a developer may introduce the required components through an import statement, e.g., using import { Table, chart } from 'base-components' to introduce Table and Chart components. The introduced component can be used in code by directly calling the component label in the template, or can be dynamically created and configured in JavaScript code. For example, < Tabledata = { Tabledata }/>, is used in the template to render one table component and pass the corresponding data. By introducing the target component, a developer can quickly construct and combine various UI interfaces for basic data display, reduce repeated development work and improve maintainability and reusability of codes. At the same time, the underlying data component typically also provides some customizable options and APIs to meet the needs of different projects. Specifically, after a fixed underlying data interface is provisioned with the back-end, the front-end component may request data from the back-end by sending an HTTP request (e.g., GET, POST, etc.). These requests may include obtaining page initialization data, obtaining detailed information for a particular entity, submitting form data, and so forth. The front end sends a request according to the agreed interface format and parameter requirements and waits for the back end to return corresponding data. Once the front end receives the data returned by the back end, the front end can process and analyze the data as required, then transmit the data to the corresponding components for rendering, and add page elements. The rendering process may involve operations of binding the data into templates, displaying different UI states according to the data, dynamically generating page elements, etc., and finally presenting the data.

In this embodiment, by generating the page element of the page to be developed according to the component information, in the whole process, the target component may send a request to obtain data based on the component information, so that the front end may perform data interaction and collaboration with the back end, and the front end component may dynamically display the content according to the data provided by the back end, so as to implement data sharing and real-time updating of the front end and the back end. In the scene of repeated development of the service, the front-end application with more flexibility and stronger interactivity can be realized, and the development efficiency of developers is improved.

Further, referring to fig. 2, in a second embodiment of the page development method of the present invention, the step S40 includes:

and step S41, according to the component information and the target component, an application program interface request is sent to a back-end system.

And step S42, displaying the page elements of the page to be developed based on the response data fed back by the back-end system.

In this embodiment, the target component can automatically send an API request to obtain the data to be exposed. The target component is generally internally provided with a function of performing data interaction with the back end, and the function can automatically send an API request according to preset configuration or default behavior when the component is initialized or a specific event occurs, for example, after the component is mounted on a page, a user interaction triggers a certain event, and the like. And the target component sends the request to the API interface of the back end, and waits for the back end to return corresponding data. Alternatively, the target component may be implemented by an asynchronous request (e.g., AJAX, fetch, etc.). When the target component receives the response data returned by the back end, the target component analyzes the data and updates the state or attribute of the component, then re-renders the view, and adds page elements to display the latest data.

Specifically, as a possible implementation, when the front-end component sends an API request to the back-end system, it is first necessary to create an HTTP request object (such as an XMLHttpRequest or Fetch API) or use an existing HTTP client library. The request object contains information such as request URL, request method (GET, POST, etc.), request header, and request body. The request header, which may contain authentication information, content type, etc., is set according to actual needs, request parameters, a request body, etc., which are data attached in the URL (for GET request) or as part of the request body (for POST request). The requestor is typically used to pass complex data structures such as JSON or form data, etc. Further, a transmission method (such as send () or fetch ()) of the request object is called to transmit the request. After sending the request, the request will be sent asynchronously to the backend system. When response data of the backend system is received, the response may be processed by registering an event handler or using Promise or the like. The response typically includes information such as a status code, a response header, and a response body. Depending on the content type of the response data, the response body may be parsed and converted into a data format that may be used by the front-end component, such as JSON objects. Finally, the interface of the front-end component is updated or other operations are performed according to the data or response results obtained from the back-end system. The security and legitimacy should be considered when sending the API request. For requests involving sensitive information or requiring authentication, appropriate security measures must be taken, such as using HTTPS protocols, encrypting the request, etc. In addition, the input should be validated and filtered to prevent cross site scripting attacks (XSS) and other security vulnerabilities.

Alternatively, a developer or user may perform a corresponding operation based on the page element. Referring to fig. 5 and 6, when a preset event of a page element is triggered, a trigger keyword of the current preset event may be acquired, and based on the trigger keyword, data corresponding to the page element is adjusted to respond to the preset event of the page element. Wherein certain preset events may also trigger filtering and ordering operations on the underlying data. For example, when a user enters keywords in a search box, the underlying data component may filter the data based on the entered keywords, only displaying eligible data. Similarly, when the user clicks on the sort button, the underlying data component may sort the data by the specified fields.

In this embodiment, the API request is automatically sent by the base data component, and the front-end developer can conveniently obtain the data from the back-end and expose it in the component. Therefore, the manual writing of the request code can be avoided, the development workload is reduced, and the simplicity and maintainability of the code are improved.

Further, referring to fig. 3, in a third embodiment of the page development method of the present invention, after the step S40, the method further includes:

and step S50, when the page element is loaded in error, determining error information based on an error processing callback function.

Step S60, triggering a corresponding error processing mechanism according to the error information.

Step S70, processing the errors of the page elements based on the error processing mechanism.

In this embodiment, in order to improve the fault tolerance of the response of the page, an error response mechanism is also set for the loading process of the page element. Alternatively, in one possible implementation, the load error may be captured by an error handling callback function upon an asynchronous request. In the error handling callback, appropriate operations may be performed, such as logging the error, presenting the error information, and performing error handling, such as restoring default data, displaying alternate content, or notifying related personnel. In a further possible embodiment of the present invention,

and corresponding error prompt information can be displayed on the component interface according to specific conditions, so that the user is informed of the reason and possible solutions of the data loading failure. For example, an error hint line or cell may be displayed in the form component or an error hint icon may be displayed in the chart component. In addition, in some scenarios, a retry mechanism, i.e., a function that provides for reloading data, such as adding a button or link, may also be utilized to allow the user to manually trigger the reloading of data. When the user clicks on this button, the data request is reinitiated, attempting to fix the loading error. Meanwhile, the state in loading can be displayed, so that a user can know that data loading operation is being performed. And when the component is loaded with errors, the spare data can be used for replacing the errors, so that the normal display of the page is ensured. The spare data may be default values, locally stored cache data, or static data. Therefore, even if the back-end data loading fails, the normal operation of the component can be ensured. When the loading overtime condition is faced, a reasonable overtime time can be set, and if the data cannot be loaded successfully within a specified time, the loading is considered to be failed, and a corresponding error processing mechanism is triggered. A timeout indication may be displayed or a reload may be triggered automatically.

In this embodiment, for errors in data loading and loading states, the base data component generally provides corresponding processing mechanisms, such as displaying the in-loading states, error cues, and the like, so as to enhance user experience. By the processing mechanism, the stability and the user experience of the component can be enhanced, data loading errors can be responded and processed in time, the influence on the user is reduced, and the method and the device are favorable for finding and solving potential problems in time.

Further, referring to fig. 4, in a fourth embodiment of the page development method of the present invention, before the step S20, the method further includes:

step S80, obtaining component construction requirements and a data interface.

Step S90, corresponding data fields and data types are determined based on the component construction requirements.

Step S100, defining an interface specification of the data interface.

Step S110, constructing the target component based on the data field, the data type and the interface specification.

In this embodiment, in order to avoid repeated construction of service components in the front-end service development process, a plurality of basic data components can be constructed and packaged in advance according to development requirements, and the basic data components are used as target components when selected in the service development process. When formulating the components, the front-end data components need to be customized and the back-end agreed data interfaces are needed to ensure that the data formats and transmission modes of the front-end and the back-end are consistent. Further, the requirements of the front-end components and the data structures to be presented are specified. It is determined which data fields are required by each component, as well as the type thereof, e.g., a table component may require field names, field types, field values, etc. At the same time, there is a need to clarify the specific needs and functions of the underlying data components. For example, the component needs to expose which basic data, whether data filtering, sorting, editing or deleting operations are supported, and these requirements have an important impact on subsequent component design and development. Then, define the specification of the data interface, including interface URL, request method, request parameters (if any), response data format, error handling, etc., to ensure that the front and back ends understand the interface consistently, avoiding communication errors. In addition, the format of the request and response data needs to be negotiated and determined, for example, the JSON format is used for data exchange, and naming specifications, types, possible value ranges and the like of the appointed fields are adopted. When the data fields, the data types and the interface specifications of the components are defined, corresponding basic data components can be written and constructed according to the functional logic to be realized by the components.

It should be noted that, based on development requirements, interfaces and events of the underlying data components need to be defined. The interface includes acquisition data, update data, trigger events, and the like. These interfaces will act as portals for the components to interact with other components or systems. The built base data component can realize the data acquisition function of the base data component, which comprises sending request acquisition data to the back end and caching according to the requirement to improve the performance. Optionally, an asynchronous request, such as an AJAX or Fetch API, may be optionally used to ensure that data can be loaded and exposed in time. The presentation mode of the basic data of the component and related interaction functions can use HTML, CSS and JavaScript to create interface elements such as forms, lists, drop-down menus and the like, and interaction is realized through event monitoring and processing. If the data filtering and ordering functions are included in the requirements, then the corresponding logic needs to be implemented. For example, a search box is provided for the user, his input is listened to, and the data is filtered according to the input content. A sort button may also be provided for the user to sort the data according to the specified fields after clicking. If the basic data needs to be edited or deleted at the front end, a corresponding interface needs to be implemented to update and synchronize the data. When the user submits the editing or deleting request, the corresponding request can be sent to the back end, and the consistency of the data is ensured. Various exception conditions and error handling mechanisms are still considered in the development process. Such as network request failure, data format errors, user permission restrictions, etc., which may be handled by appropriate alerting or rollback operations. After the development of the basic data component is completed, the basic data component is ensured to be comprehensively tested, whether all functions work according to expectations is verified, and possible problems are repaired. On this basis, performance optimization can also be performed, such as reducing the number of requests, improving rendering efficiency, etc.

To facilitate developer use, detailed data interface documents may also be written, including interface specifications, request examples, response examples, field specifications, and the like. Ensuring that front-end and back-end developers are both aware of the usage and data format of the interface. And developing a basic data component according to the interface document and the development requirement, and binding and displaying data. And constructing correct request parameters according to the interface specification, and processing data returned by the interface. In the actual use process, user feedback is collected in time, and the front-end assembly and the data interface are continuously optimized and improved. And according to feedback and demand change, negotiating and adjusting with the back end in time.

Alternatively, in another possible implementation, logic common to multiple components may be abstracted to form an independent common logic module. This avoids having to repeatedly write the same logic code in each component. For example, if multiple components all need form verification, the logic of form verification may be abstracted to form a common form verification module and introduced and used as needed.

In this embodiment, the design and development of the components can be gradually completed according to the steps described above, so as to meet project requirements and provide a good user experience. This may improve development efficiency and provide a good user experience.

Referring to fig. 7, fig. 7 is a schematic structural diagram of a page development device of a hardware running environment according to an embodiment of the present invention.

As shown in fig. 7, the page developing apparatus may include: a processor 1001, such as a central processing unit (Central Processing Unit, CPU), a communication bus 1002, a user interface 1003, a network interface 1004, a memory 1005. Wherein the communication bus 1002 is used to enable connected communication between these components. The user interface 1003 may include a Display, an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may further include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a WIreless interface (e.g., a WIreless-FIdelity (WI-FI) interface). The Memory 1005 may be a high-speed random access Memory (Random Access Memory, RAM) Memory or a stable nonvolatile Memory (NVM), such as a disk Memory. The memory 1005 may also optionally be a storage device separate from the processor 1001 described above.

Those skilled in the art will appreciate that the architecture shown in fig. 7 is not limiting of the page development device, and may include more or fewer components than shown, or may combine certain components, or a different arrangement of components.

As shown in fig. 7, an operating system, a data storage module, a network communication module, a user interface module, and a page development program may be included in the memory 1005 as one type of storage medium.

In the page development device shown in fig. 7, the network interface 1004 is mainly used for data communication with other devices; the user interface 1003 is mainly used for data interaction with a user; the processor 1001, the memory 1005 in the page development device of the present invention may be provided in a page development device that calls a page development program stored in the memory 1005 through the processor 1001 and performs the steps of:

Further, the page development device calls a page development program stored in the memory 1005 through the processor 1001, and performs the following steps:

setting request parameters of the application program interface request;

receiving the response data sent by the back-end system;

acquiring a component construction requirement and a data interface;

defining an interface specification for the data interface;

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system 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 system. 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 system that comprises the element.

The foregoing embodiment numbers of the present invention are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.

From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) as described above, comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, or a network device, etc.) to perform the method according to the embodiments of the present invention.

The foregoing description is only of the preferred embodiments of the present invention, and is not intended to limit the scope of the invention, but rather is intended to cover any equivalents of the structures or equivalent processes disclosed herein or in the alternative, which may be employed directly or indirectly in other related arts.

Claims

1. The page development method is characterized by comprising the following steps of:

2. The page development method as claimed in claim 1, wherein the step of generating the page element of the page to be developed based on the component information comprises:

3. The page development method of claim 2, wherein the step of transmitting an application program interface request to a back-end system according to the component information and the target component comprises:

setting request parameters of the application program interface request;

4. The page development method of claim 2, wherein the step of displaying the page element of the page to be developed based on the response data fed back by the back-end system comprises:

receiving the response data sent by the back-end system;

5. The page development method of claim 1, wherein prior to the step of selecting the target component based on the selected action received by the front end component selection interface, further comprising:

acquiring a component construction requirement and a data interface;

defining an interface specification for the data interface;

6. The page development method as claimed in claim 1, wherein after the step of generating the page element of the page to be developed based on the component information, further comprising:

7. The page development method as claimed in claim 1, wherein after the step of generating the page element of the page to be developed based on the component information, further comprising:

8. The page development method of claim 1, wherein the page development method further comprises:

9. A page development device, characterized in that the page development device comprises: a memory, a processor and a page development program stored on the memory and executable on the processor, the page development program configured to implement the steps of the page development method of any one of claims 1 to 8.

10. A computer-readable storage medium, on which a page development program is stored, which when executed by a processor implements the steps of the page development method according to any one of claims 1 to 8.