Calendar content display method and device based on vue item and medium

Abstract

The invention discloses a calendar content display method and device based on a vue item and a medium. The method comprises the following steps: creating a vue project, installing a calendar component in the vue project, and adding the calendar component into project dependence; adding a plurality of different paths and page data for routing and creating different calendar dates in the vue project; importing a calendar click component into the vue item, and creating a back-end API (Application Program Interface) for interaction between a front end and a back end; and triggering a calendar click component, and obtaining the target calendar date path through the back-end API for skipping to obtain page data associated with the target calendar date.

Description

Technical Field

[0001] The present invention relates to the technical field of calendar content display, and more specifically, to a method, device, and medium for calendar content display based on a vue project. Background Art

[0002] Currently, when displaying event content, it is directly added to the calendar through simple JavaScript, which has the technical problem of weak interaction functions, such as cumbersome interactions like clicking to enter the details page or directly giving a like. Summary of the Invention

[0003] Aiming at the deficiencies of the prior art, the present invention provides a method, device, and medium for calendar content display based on a vue project.

[0004] According to one aspect of the present invention, there is provided a method for calendar content display based on a vue project, including:

[0005] Create a vue project, and install a calendar component in the vue project and add it to the project dependencies;

[0006] Add routes in the vue project to create multiple different paths and page data for different calendar dates;

[0007] Import a calendar click component in the vue project, and create a backend API for front-end and back-end interaction;

[0008] Trigger the calendar click component and jump through the backend API to obtain the target calendar date path, and obtain the page data associated with the target calendar date.

[0009] Optionally, it further includes:

[0010] Import a calendar component in the vue project and define data to be passed to the calendar component for dynamic setting of page data.

[0011] Optionally, after obtaining the page data associated with the target calendar date, it further includes:

[0012] Match the page data with the target calendar date, and display the matched page data below the corresponding target calendar date.

[0013] According to another aspect of the present invention, there is provided a device for calendar content display based on a vue project, including:

[0014] A first creation module for creating a vue project, and installing a calendar component in the vue project and adding it to the project dependencies;

[0015] A second creation module for adding routes in the vue project to create multiple different paths and page data for different calendar dates;

[0016] A third creation module, configured to import a calendar click component in a vue project and create a backend API for front-end and backend interaction;

[0017] A retrieval module, configured to trigger the calendar click component and retrieve a target calendar date path for redirection through the backend API, and retrieve page data associated with the target calendar date.

[0018] According to another aspect of the present invention, there is provided a computer-readable storage medium storing a computer program for executing the method according to any one of the above aspects of the present invention.

[0019] According to another aspect of the present invention, there is provided an electronic device including: a processor; a memory for storing executable instructions of the processor; the processor for reading the executable instructions from the memory and executing the instructions to implement the method according to any one of the above aspects of the present invention.

[0020] Thus, this application uses the Vue front-end framework to display the text content of other pages on the home page calendar page and can be redirected to specific detail pages. By improving and optimizing the front-end effect display through the Vue framework, it can be directly redirected to the detail pages, optimizing the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] By referring to the following drawings, the exemplary embodiments of the present invention can be more fully understood:

[0022] Figure 1 is a flowchart of a method for displaying calendar content based on a vue project provided by an exemplary embodiment of the present invention;

[0023] Figure 2 is a schematic structural diagram of a device for displaying calendar content based on a vue project provided by an exemplary embodiment of the present invention;

[0024] Figure 3 is the structure of an electronic device provided by an exemplary embodiment of the present invention. DETAILED DESCRIPTION

[0025] Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the drawings. Apparently, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments of the present invention. It should be understood that the present invention is not limited by the exemplary embodiments described herein.

[0026] It should be noted that: unless otherwise specifically stated, the relative arrangements, numerical expressions and values of the components and steps set forth in these embodiments do not limit the scope of the present invention.

[0027] Those skilled in the art can understand that terms such as "first" and "second" in the embodiments of the present invention are only used to distinguish different steps, devices or modules, etc., and neither represent any specific technical meaning nor indicate an inevitable logical order between them.

[0028] It should also be understood that in the embodiments of the present invention, "a plurality of" may refer to two or more, and "at least one" may refer to one, two or more.

[0029] It should also be understood that for any component, data or structure mentioned in the embodiments of the present invention, without clear definition or contrary indication in the context, it is generally understood as one or more.

[0030] In addition, the term "and / or" in the present invention is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent three situations: A exists alone, A and B exist simultaneously, and B exists alone. In addition, the character " / " in the present invention generally represents an "or" relationship between the associated objects before and after.

[0031] It should also be understood that the present invention emphasizes the differences between the various embodiments. Their similarities or similarities can be referred to each other. For the sake of brevity, they will not be elaborated one by one.

[0032] At the same time, it should be understood that for the convenience of description, the dimensions of the various parts shown in the drawings are not drawn in actual proportional relationship.

[0033] The following description of at least one exemplary embodiment is actually only illustrative and in no way limits the present invention and its application or use.

[0034] Technologies, methods and devices known to those of ordinary skill in the relevant art may not be discussed in detail, but where appropriate, the technologies, methods and devices should be regarded as part of the specification.

[0035] It should be noted that like reference numerals and letters denote like items in the following figures, and thus, once an item is defined in one figure, it need not be further discussed in subsequent figures.

[0036] Embodiments of the present invention can be applied to electronic devices such as terminal devices, computer systems, servers, etc., which can operate together with many other general or special computing system environments or configurations. Examples of well-known terminal devices, computing systems, environments, and / or configurations suitable for use with electronic devices such as terminal devices, computer systems, servers, etc. include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, small computer systems, large computer systems, and distributed cloud computing technology environments including any of the above systems, and so on.

[0037] Terminal devices, computer systems, servers and other electronic devices can be described in the general context of computer system executable instructions (such as program modules) executed by a computer system. Generally, program modules can include routines, programs, target programs, components, logics, data structures, etc., which perform specific tasks or implement specific abstract data types. The computer system / server can be implemented in a distributed cloud computing environment where tasks are executed by remote processing devices linked through a communication network. In a distributed cloud computing environment, program modules can be located on local or remote computing system storage media including storage devices.

[0038] Exemplary method

[0039] Figure 1 It is a flowchart of a method for displaying calendar content based on a vue project provided by an exemplary embodiment of the present invention. This embodiment can be applied to an electronic device, such as Figure 1 As shown, the method 100 for displaying calendar content based on a vue project includes the following steps:

[0040] Step 101, create a vue project, and install a calendar component in the vue project and add it to the project dependencies;

[0041] Step 102, add routes in the vue project to create multiple different paths and page data for different calendar dates;

[0042] Step 103, import a calendar click component in the vue project, and create a backend API for front-end and back-end interaction;

[0043] Step 104, trigger the calendar click component and jump through the backend API to obtain the target calendar date path, and obtain the page data associated with the target calendar date.

[0044] Specifically, this application uses the Vue front-end framework to display the text content (existing date display) of other pages on the home page calendar page and can jump to the specific detail page. The specific implementation steps are as follows:

[0045] 1. Install the Vue.js project: Create a new Vue project using Vue CLI.

[0046] 2. Install the calendar component: Use the "npm install vue - calendar" command to install the vue - calendar calendar component and add it to the project dependencies.

[0047] 3. Install the router: Then, add router to the project. Router allows creating multiple different paths and pages.

[0048] 4. Create the home page calendar page: Import a calendar component through Vue. Specifically, use the vue - calendar component in Calendar.vue. Then define data in the data of the Calendar.vue component to pass to the calendar component for dynamically setting the calendar content. At the same time, introduce and use the Calendar component in the main page. Adjust the specific content in the component to change the front - end display style.

[0049] 5. Create the calendar component: Import a calendar component through Vue. Whenever a specific date is clicked, use router - link to navigate to the corresponding page. Some calendar - related libraries will be used to simplify this operation: vue - simple - calendar.

[0050] 6. Create the backend API: The dates and text content for other pages that need to be jumped to can be stored in the database. Create a front - end API interaction script, and the background interacts with the front - end through the API script.

[0051] 7. Match the data and display it in the calendar component: In the created() of the calendar component, call the API to obtain the data. Then, display this data in the calendar component. When displaying, the dates and data need to be matched, and then the corresponding detailed text content is matched below each date in the calendar.

[0052] 8. Display the content details: In this way, when any day in the calendar is clicked, the path to the detailed page can be obtained through the API and the jump is performed simultaneously.

[0053] Thus, this application uses the Vue front - end framework to display the text content of other pages on the home page calendar page and can jump to the specific detailed page. By improving and optimizing the front - end effect display through the Vue framework, it can directly jump to the detailed page and optimize the user experience.

[0054] Exemplary device

[0055] Figure 2 It is a schematic structural diagram of a calendar content display device based on a vue project provided by an exemplary embodiment of the present invention. As Figure 2 shown, the device 200 includes:

[0056] A first creation module 210, configured to create a vue project, and install a calendar component in the vue project and add it to the project dependencies;

[0057] A second creation module 220, configured to add routes in the vue project to create multiple different paths and page data for different calendar dates;

[0058] A third creation module 230, configured to import a calendar click component in the vue project and create a backend API for front-end and back-end interaction;

[0059] An acquisition module 240, configured to trigger the calendar click component and jump to the target calendar date path through the backend API, and acquire the page data associated with the target calendar date.

[0060] Optionally, the device 200 further includes:

[0061] A setting module, configured to import a calendar component in the vue project and define data to be passed to the calendar component for dynamic setting of page data.

[0062] Optionally, after acquiring the page data associated with the target calendar date, the device 200 further includes:

[0063] A display module, configured to match the page data with the target calendar date, and display the matched page data below the corresponding target calendar date.

[0064] Exemplary electronic device

[0065] Figure 3 It is the structure of an electronic device provided by an exemplary embodiment of the present invention. As Figure 3 shown, the electronic device 30 includes one or more processors 31 and a memory 32.

[0066] The processor 31 may be a central processing unit (CPU) or other forms of processing units with data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.

[0067] The memory 32 may include one or more computer program products, and the computer program products may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory, etc. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage media, and the processor 31 may run the program instructions to implement the methods of the software programs of the various embodiments of the present invention described above and / or other desired functions. In one example, the electronic device may further include: an input device 33 and an output device 34, and these components are interconnected through a bus system and / or other forms of connection mechanisms (not shown).

[0068] In addition, the input device 33 may further include, for example, a keyboard, a mouse, and the like.

[0069] The output device 34 may output various information to the outside. The output device 34 may include, for example, a display, a speaker, a printer, and a communication network and its connected remote output devices, and the like.

[0070] Of course, for simplicity, Figure 3 only some of the components related to the present invention in the electronic device are shown, and components such as a bus, an input / output interface, and the like are omitted. In addition, according to specific application situations, the electronic device may further include any other appropriate components.

[0071] Exemplary computer program product and computer-readable storage medium

[0072] In addition to the above methods and devices, embodiments of the present invention may also be computer program products, which include computer program instructions that, when run by a processor, cause the processor to execute the steps in the methods according to various embodiments of the present invention described in the "Exemplary Methods" section above of this specification.

[0073] The computer program products may be written in any combination of one or more programming languages for programming code to perform the operations of the embodiments of the present invention. The programming languages include object-oriented programming languages, such as Java, C++, etc., and also include conventional procedural programming languages, such as the "C" language or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, executed as an independent software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0074] In addition, an embodiment of the present invention may also be a computer-readable storage medium storing computer program instructions, which, when run by a processor, cause the processor to execute the steps in the method of information mining on historical change records according to various embodiments of the present invention described in the above "Exemplary Method" section of this specification.

[0075] The computer-readable storage medium may adopt any combination of one or more readable media. The readable media may be a readable signal medium or a readable storage medium. The readable storage medium may, for example, include but is not limited to an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0076] The basic principles of the present invention have been described above in conjunction with specific embodiments. However, it should be noted that the advantages, benefits, effects, etc. mentioned in the present invention are only examples and not limitations, and it cannot be considered that these advantages, benefits, effects, etc. are essential for each embodiment of the present invention. In addition, the above-disclosed specific details are only for the purpose of illustration and facilitating understanding, rather than limitations. These details do not limit the present invention to necessarily adopt the above specific details for implementation.

[0077] Each embodiment in this specification is described in a progressive manner. The key point of each embodiment is to illustrate the differences from other embodiments. The same or similar parts among the embodiments can be referred to each other. For system embodiments, since they basically correspond to method embodiments, they are described relatively simply, and the relevant parts can be referred to the description of the method embodiments.

[0078] The block diagrams of the devices, systems, equipment, and systems involved in the present invention are only illustrative examples and do not intend to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, systems, equipment, and systems can be connected, arranged, and configured in any way. Words such as "including", "comprising", "having", etc. are open-ended words, meaning "including but not limited to", and can be used interchangeably with each other. The word "or" and "and" used herein refer to the word "and / or", and can be used interchangeably with each other, unless the context clearly indicates otherwise. The word "such as" used herein refers to the phrase "such as but not limited to", and can be used interchangeably with each other.

[0079] The methods and systems of the present invention can be implemented in many ways. For example, the methods and systems of the present invention can be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above order of the steps for the methods is for illustrative purposes only, and the steps of the methods of the present invention are not limited to the specific order described above, unless otherwise specifically stated. In addition, in some embodiments, the present invention can also be implemented as a program recorded in a recording medium, and these programs include machine-readable instructions for implementing the methods according to the present invention. Thus, the present invention also covers a recording medium storing a program for executing the methods according to the present invention.

[0080] It should also be noted that in the systems, devices, and methods of the present invention, each component or each step can be decomposed and / or recombined. These decompositions and / or recombinations should be regarded as equivalent solutions of the present invention. The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present invention. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of the present invention. Therefore, the present invention is not intended to be limited to the aspects shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0081] The above description has been presented for purposes of illustration and description. In addition, this description is not intended to limit the embodiments of the present invention to the form disclosed herein. Although several example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, alterations, additions, and subcombinations thereof.

Claims

1. A calendar content display method based on the Vue project, characterized in that: include: Create a vue project, and install the calendar component in the vue project and add it to the project dependencies; Add routing in the vue project to create multiple different paths and page data for different calendar dates; Import the calendar click component into the vue project and create a backend API for front-end and back-end interaction; The calendar click component is triggered and the target calendar date path is obtained through the backend API for jumping, and the page data associated with the target calendar date is obtained.

2. The method according to claim 1, characterized in that Also includes: Import the calendar component into the Vue project and define data to pass to the calendar component to dynamically set the page data.

3. The method according to claim 1, characterized in that After obtaining the page data associated with the target calendar date, the method further includes: The page data is matched with the target calendar date, and the matched page data is displayed below the corresponding target calendar date.

4. A calendar content display device based on the vue project, characterized in that: include: The first creation module is used to create a Vue project, and install the calendar component in the Vue project and add it to the project dependencies; The second creation module is used to add routing in the vue project to create multiple different paths and page data for different calendar dates; The third creation module is used to import the calendar click component in the vue project and create a backend API for front-end and back-end interaction; The acquisition module is used to trigger the calendar click component and obtain the target calendar date path through the backend API to jump, and obtain the page data associated with the target calendar date.

5. The device according to claim 4, characterized in that Also includes: A setting module is used to import the calendar component in the Vue project and define data to be passed to the calendar component to perform dynamic setting of the page data.

6. The device according to claim 4, characterized in that After obtaining the page data associated with the target calendar date, the method further includes: A display module is used to match the page data with the target calendar date and display the matched page data below the corresponding target calendar date.

7. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and the computer program is used to execute the method according to any one of claims 1 to 3.

8. An electronic device, characterized in that: The electronic device comprises: processor; a memory for storing instructions executable by the processor; The processor is used to read the executable instructions from the memory and execute the instructions to implement the method described in any one of claims 1 to 3.

Images