Method for generating random data based on Vue Mockjs custom, electronic equipment, server and storage medium

Abstract

The invention provides a method for generating random data based on Vue Mockjs custom, electronic equipment, a server and a storage medium, and the method comprises the following steps: taking Vue. Js as a front-end basic framework, taking quasar2 as a UI component library, and generating random data through custom configuration; dragging to manually adjust the sequence of the configuration items; reversely generating a mock rule configuration; and a mockjs expression is obtained. The method has the beneficial effects that Vue.js is used as a front-end basic framework, quasar2 is used as a UI component library, and random data is generated through mockjs. A user can realize self-definition of random data through simple configuration operation, and copy and reverse extension of a result and generation of a mockjs rule expression are supported.

Description

Technical Field

[0001] The present invention belongs to the technical field of front-end development, and in particular relates to a method, electronic device, server and storage medium for customizing random data generation based on Vue Mockjs. Background Art

[0002] With the development of Web applications, especially the separation of front-end and back-end applications, in the previous front-end development process, it is necessary to wait for the interface definition to be completed, or even the interface to be adjusted, before the front-end development can conveniently debug the front-end display and interaction logic. This leads to extremely low efficiency of front-end development, and does not realize the development concept of parallel development to achieve the purpose of collaborative debugging. Therefore, there is an urgent need for a convenient way to customize the generation of random data according to the interface agreement to achieve parallel development and improve the efficiency and quality of front-end development. Summary of the invention

[0003] In view of this, the present invention aims to propose a method, electronic device, server and storage medium for customizing random data generation based on Vue Mockjs to solve at least one problem existing in the above-mentioned prior art.

[0004] To achieve the above object, the technical solution of the present invention is achieved as follows:

[0005] A method for customizing the generation of random data based on Vue Mockjs, comprising the following steps:

[0006] S1. Use Vue.js as the front-end basic framework and quasar2 as the UI component library to generate random data through custom configuration;

[0007] S2. Drag and drop to manually adjust the order of configuration items;

[0008] S3, reverse generate mock rule configuration;

[0009] S4. Get the mockjs expression.

[0010] Furthermore, in step S1, Vue.js is used as the front-end basic framework, quasar2 is used as the UI component library, and random data is generated through custom configuration, including:

[0011] S11. Create Vue.js and Quasar projects. Make sure you have installed Vue CLI and Quasar CLI.

[0012] S12. Install the data generation library. Install Faker.js in the project.

[0013] S13. Create a new file in the src directory for the function of creating random data generation;

[0014] S14. Use random data in components Use the generated random data in a Vue component.

[0015] S15. Run the project Finally, run the Quasar project.

[0016] Furthermore, in step S2, manually adjusting the order of the configuration items by dragging includes:

[0017] S21. Install vue-draggable-next;

[0018] S22. Create a draggable component. Create a component in the project to display the draggable configuration items:

[0019] S23. Use components to introduce and use the DraggableList component in the page that needs to use the drag sorting function:

[0020] S24. Run the project After starting your Quasar project, you can find a list of configuration items that can be dragged and dropped, and you can manually adjust the order.

[0021] Furthermore, in step S3, the mock rule configuration is reversely generated, including:

[0022] S31. Install Mock.js First, make sure Mock.js has been added to the project;

[0023] S32. Create a Mock generation tool and create a tool function for reverse generation of mock rule configuration;

[0024] S33. Use Mock rules in the project. Import the Mock generation tool into the project, convert the data into Mock configuration, and start the Mock service.

[0025] S34. Run the project Finally, run the project.

[0026] An electronic device comprises a processor and a memory which is communicatively connected with the processor and is used to store executable instructions of the processor, wherein the processor is used to execute the method for customizing random data generation based on Vue Mockjs.

[0027] A server includes at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes the method for customizing random data generation based on Vue Mockjs.

[0028] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method for customizing the generation of random data based on Vue Mockjs is implemented.

[0029] Compared with the prior art, the method, electronic device, server and storage medium for customizing random data generation based on Vue Mockjs described in the present invention have the following advantages:

[0030] The invention discloses a method, electronic device, server and storage medium for generating random data based on Vue Mockjs. The invention uses Vue.js as the front-end basic framework, quasar2 as the UI component library, and uses mockjs to generate random data. Users can customize random data through simple configuration operations, and support copying of results, reverse expansion, and generation of mockjs regular expressions. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] The accompanying drawings constituting a part of the present invention are used to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the accompanying drawings:

[0032] Figure 1 The present invention is a flowchart of the method described in the embodiment of the present invention. DETAILED DESCRIPTION

[0033] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments may be combined with each other.

[0034] In the description of the present invention, it should be understood that the terms "center", "longitudinal", "lateral", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside" and the like indicate positions or positional relationships based on the positions or positional relationships shown in the accompanying drawings, and are only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as limiting the present invention. In addition, the terms "first", "second", and the like are only used for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, features defined as "first", "second", and the like may explicitly or implicitly include one or more of the features. In the description of the present invention, unless otherwise specified, "multiple" means two or more.

[0035] In the description of the present invention, it should be noted that, unless otherwise clearly specified and limited, the terms "installed", "connected", and "connected" should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection, or it can be indirectly connected through an intermediate medium, or it can be the internal communication of two components. For ordinary technicians in this field, the specific meanings of the above terms in the present invention can be understood by specific circumstances.

[0036] The present invention will be described in detail below with reference to the accompanying drawings and in conjunction with embodiments.

[0037] like Figure 1 As shown in the figure, a method for customizing the generation of random data based on Vue Mockjs includes the following steps:

[0038] S1. Use Vue.js as the front-end basic framework and quasar2 as the UI component library to generate random data through custom configuration;

[0039] S2. Drag and drop to manually adjust the order of configuration items;

[0040] S3, reverse generation of mock rule configuration (to facilitate the generation of more random data based on the existing data structure);

[0041] S4. Get mockjs expression (for sharing with other tools).

[0042] This method uses Vue.js as the front-end framework, quasar2 as the UI component library, and uses mockjs to generate random data. Users can customize random data through simple configuration operations, and support result replication, reverse expansion, and generation of mockjs rule expressions.

[0043] In step S1, Vue.js is used as the front-end basic framework, quasar2 is used as the UI component library, and random data is generated through custom configuration, including:

[0044] S11. Create Vue.js and Quasar projects. Make sure you have installed Vue CLI and Quasar CLI:

[0045] bashnpm install-g@vue / clinpm install-g@quasar / cli

[0046] Then create a new Quasar project:

[0047] bashquasar create my-projectcd my-project

[0048] S12. Install the data generation library Install Faker.js in the project (Mock.js can be used, but for the sake of simplicity, Faker.js is used):

[0049] bashnpm install@faker-js / faker

[0050] S13. Create a new file in the src directory for the function of creating random data generation;

[0051] S14. Use random data in components Use the generated random data in a Vue component.

[0052] S15. Run the project Finally, run the Quasar project:

[0053] bashquasar dev

[0054] This method is suitable for quickly generating test data during the development process to help users better experience the interface design. The structure and quantity of random data can be customized as needed.

[0055] In step S2, the order of the configuration items is manually adjusted by dragging, including:

[0056] In Vue.js and Quasar projects, you can use libraries such as v-dragula or vue-draggable to manually adjust the order of configuration items by dragging. Here, vue-draggable-next is used as an example, which is a drag library that supports Vue3.

[0057] S21. Install vue-draggable-next;

[0058] First you need to install the vue-draggable-next library:

[0059] bashnpm install vue-draggable-next

[0060] S22. Create a draggable component. Create a component in the project to display the draggable configuration items:

[0061] S23. Use components to introduce and use the DraggableList component in the page that needs to use the drag sorting function:

[0062] S24. Run the project After starting your Quasar project, you can find a list of configuration items that can be dragged and dropped, and you can manually adjust the order.

[0063] You can implement draggable configuration item sorting in Vue.js and Quasar projects. vue-draggable-next provides a simple and easy-to-use API that can flexibly handle drag events and list reordering logic. You can further expand the functionality according to the specific needs of the project, such as saving order or interacting with the backend.

[0064] In step S3, the mock rule configuration is reversely generated, including:

[0065] In Vue.js and Quasar projects, reverse generation of mock rule configuration usually involves generating Mock.js rules from existing data structures or specific interfaces.

[0066] S31. Install Mock.js First, make sure Mock.js has been added to the project:

[0067] bashnpminstall mockjs

[0068] S32. Create a Mock generation tool to create a tool function for reverse generation of mock rule configuration.

[0069] S33. Use Mock rules in the project. Import the Mock generation tool into the project, convert the data into Mock configuration, and start the Mock service.

[0070] S34. Run the project Finally, run the project:

[0071] bashquasar dev.

[0072] The function of reverse generation of Mock rule configuration can be implemented in Vue.js and Quasar projects. Mock configuration can be automatically generated from existing data, which is convenient for interface simulation and front-end development. In actual use, the mapping of data types and the complexity of simulation can be further optimized according to specific needs.

[0073] Example 1

[0074] A method for customizing the generation of random data based on Vue Mockjs, comprising the following steps:

[0075] S1. Use Vue.js as the front-end basic framework and quasar2 as the UI component library to generate random data through custom configuration;

[0076] S2. Drag and drop to manually adjust the order of configuration items;

[0077] S3, reverse generation of mock rule configuration (to facilitate the generation of more random data based on the existing data structure);

[0078] S4. Get mockjs expression (for sharing with other tools).

[0079] In step S1, you can view the mockjs expression rule description and then generate random data. The example of generating random data is as follows:

[0080]

[0081] "age":58,

[0082] "selfDesc":"People don't see the big cloth or the old electricity, which causes everyone.",

[0083] "tags":["cold", "positive"],

[0084] "address":{

[0085] "province":"Ningxia Hui Autonomous Region",

[0086] "city":"Shiyan City",

[0087] "street":"Northern more determined fine residence true except color nine"

[0088] }

[0089] }

[0090] {

[0091] "id":"511922200809097869",

[0092] "name":"Tian Yong",

[0093] "ip":"182.208.88.31",

[0094] "age":34,

[0095] "selfDesc":"Teach him how to put the moon and the moon in political terms.",

[0096] "tags":["warm and generous","cold","cold","positive","extrovert"],

[0097] "address":{

[0098] "province":"Jilin Province",

[0099] "city":"Qingyang City",

[0100] "street":"The transport line is also but you have to know how many points you need to flow and stay"

[0101] }

[0102]

[0103]

[0104] In step S4, the mock rule configuration is generated in reverse order, as shown in the following example:

[0105]

[0106] The present invention also proposes an electronic device, comprising a processor and a memory connected to the processor for storing executable instructions of the processor, characterized in that the processor is used to execute the method for customizing random data generation based on Vue Mockjs.

[0107] The present invention also proposes a server, comprising at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes the method for customizing random data generation based on Vue Mockjs.

[0108] The present invention also proposes a computer-readable storage medium storing a computer program, wherein when the computer program is executed by a processor, the method for customizing the generation of random data based on Vue Mockjs is implemented.

[0109] Example 2

[0110] The present invention is implemented by relying on the quasar component library and better-mock.

[0111] 1. Install dependencies using npm, yarn or pnpm first;

[0112] better-mock:https: / / lavyun.github.io / better-mock;

[0113] 2. Define the configuration of smart prompt mock expression;

[0114] You can set the random data root node type, number, true or false type, and character type.

[0115] 3. Introduce components, configurations and related tools and methods;

[0116] 4. Adaptive layout and tool button design of the overall page;

[0117] The overall page includes root node mock configuration, mock configuration and dragging, tool button list, and result display area.

[0118] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for customizing random data generation based on Vue Mockjs, characterized in that: The following steps are involved: S1. Use Vue.js as the front-end framework and quasar2 as the UI component library to generate random data through custom configuration; S2. Drag and drop to manually adjust the order of configuration items; S3, reverse generate mock rule configuration; S4. Get the mockjs expression.

2. According to a method for customizing random data generation based on Vue Mockjs according to claim 1, it is characterized in that: In step S1, Vue.js is used as the front-end basic framework, quasar2 is used as the UI component library, and random data is generated through custom configuration, including: S11. Create Vue.js and Quasar projects. Make sure you have installed Vue CLI and Quasar CLI. S12. Install the data generation library. Install Faker.js in the project. S13. Create a new file in the src directory for the function of creating random data generation; S14. Use random data in components Use generated random data in a Vue component; S15. Run the project Finally, run the Quasar project.

3. According to a method for customizing random data generation based on Vue Mockjs according to claim 1, it is characterized in that: In step S2, the order of the configuration items is manually adjusted by dragging, including: S21. Install vue-draggable-next; S22. Create a draggable component. Create a component in the project to display the draggable configuration items: S23. Use components to introduce and use the DraggableList component in the page that needs to use the drag sorting function: S24. Run the project After starting your Quasar project, you can find a list of configuration items that can be dragged and dropped, and you can manually adjust the order.

4. According to a method for customizing random data generation based on Vue Mockjs according to claim 1, it is characterized in that: In step S3, the mock rule configuration is reversely generated, including: S31. Install Mock.js First, make sure Mock.js has been added to the project; S32. Create a Mock generation tool and create a tool function for reverse generation of mock rule configuration; S33. Use Mock rules in the project. Import the Mock generation tool into the project, convert the data into Mock configuration, and start the Mock service. S34. Run the project Finally, run the project.

5. An electronic device, comprising a processor and a memory connected to the processor for storing instructions executable by the processor, characterized in that: The processor is used to execute the method for customizing random data generation based on VueMockjs as described in any one of claims 1 to 4 above.

6. A server, characterized in that: It includes at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes the method for customizing random data generation based on Vue Mockjs as described in any one of claims 1 to 4.

7. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method for customizing random data generation based on Vue Mockjs according to any one of claims 1 to 4 is implemented.

Images