Ip input assembly and system based on vue

Abstract

The invention discloses a vue-based ip input component, which is characterized in that the ip input component is embedded in an MVVM webpage, and the ip input component comprises a first input area used for inputting a first section field of an ip; the second input area is used for inputting a second section field of the ip; the third input area is used for inputting a third section field of the ip; the fourth input area is used for inputting a fourth section field of the ip; the first separator is located between the first input area and the second input area; the second separator is located between the second input area and the third input area; and a third separator located between the third input area and the fourth input area. According to the method, the user can be correctly guided at some places, where i p needs to be input, of the user side, the trial and error cost of the user is reduced, input content is more standard and reasonable, operation is more convenient, and interaction experience is better.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and specifically relates to a Vue-based IP input component. Background Art

[0002] In the field of user interaction, there are many technologies that can realize user interaction graphical interfaces. For example, the software of Android mobile phones is realized by Java technology, and the software of computers with Windows operating system is mostly realized based on C++ or C#. C++, C# and Java technologies all have powerful graphical user interface libraries, which can easily create complex user interfaces, but they cannot be used in web pages.

[0003] In the MVC model era, web page technology was generally developed using HTML, JavaScript, and CSS technologies. There were also a small number of IP input box components that had been implemented, but they were no longer suitable for the MVVM model.

[0004] Application Contents

[0005] In order to overcome the shortcomings of the prior art, this application provides a Vue-based IP input component, which is implemented based on Vue technology. It is a powerful, easy-to-use, and interactive input box component, and is intended to improve the shortcomings of Vue technology in the IP input box component.

[0006] In order to achieve the above objectives, this application adopts the following technical solutions:

[0007] A vue-based ip input component, the ip input component is embedded in an MVVM web page, and the ip input component includes:

[0008] The first input area is used to input the first section field of the IP;

[0009] The second input area is used to input the second section field of the IP;

[0010] The third input area is used to input the third section field of the IP;

[0011] The fourth input area is used to input the fourth field of the IP address;

[0012] A first separator, located between the first input area and the second input area;

[0013] a second separator, located between the second input area and the third input area; and

[0014] The third separator is located between the third input area and the fourth input area.

[0015] Furthermore, after the second section field is deleted forward in the second input area, the cursor of the MVVM webpage moves to the first input area according to the forward deletion instruction.

[0016] Furthermore, after deleting the second section field backward in the second input area, the cursor of the MVVM webpage moves to the third input area according to a backward deletion instruction.

[0017] Furthermore, the cursor of the MVVM webpage moves from the first input area to the second input area according to the separator input instruction.

[0018] Further, the cursor of the MVVM webpage moves from the second input area to the first input area according to a left displacement instruction; or, the cursor of the MVVM webpage moves from the first input area to the second input area according to a right displacement instruction.

[0019] Further, the cursor of the MVVM web page moves from the first section field of the first input area to the head of the first input area according to a start instruction; or, the cursor of the MVVM web page moves from the first section field of the first input area to the tail of the first input area according to an end instruction.

[0020] Furthermore, the cursor of the MVVM webpage moves from the first input area to the head of the second input area according to the switching instruction.

[0021] In addition, the present application also provides a method for obtaining the Vue-based IP input component as described above, including:

[0022] Get the code of the ip input component;

[0023] Write the code of the IP input component into the component directory of the Vue project and name it input Ip.vue;

[0024] Set a form for filling in network configuration on the MVVM web page to form App.vue;

[0025] Introduce the inputI p.vue into App.vue for use; and

[0026] Bind input I p.vue in the HTML of the MVVM page through the ref attribute of vue to form the ip input component.

[0027] Furthermore, the code of the IP input component is written into the component directory of the Vue project, including:

[0028] Write the code of the IP input component into the components folder under the src directory of the Vue project; the assets static file directory, components folder, App.vue main view page file and main.js main entry file are placed in the src directory.

[0029] Furthermore, the step of binding input Ip.vue in the HTML of the MVVM page through the ref attribute of vue includes:

[0030] In the methods function on the MVVM web page, call inputI p.vue, and then complete the binding through the html tag.

[0031] Compared with the prior art, this application has the following advantages:

[0032] Through the application of this application, in some places where the IP needs to be input on the user side (generally referring to all user machines and software that can use Vue technology to generate interactive views, the same hereafter), users can be correctly guided to reduce the user's trial and error costs, making the input content more standardized and reasonable, the operation more convenient, and the interactive experience better. In development, in order to realize the functions of this application, unlike other IP input components on the market that are based on the input tag package, the present invention is implemented with the textarea tag as the core, which is simple to use. The componentization of the present invention saves development costs and improves development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application but do not constitute an improper limitation on the present application. In the drawings:

[0034] Figure 1 The appearance style of the ip input component of this application;

[0035] Figure 2 A flow chart of the method of this application;

[0036] Figure 3 Specific implementation operations for the IP input component code import project for this application;

[0037] Figure 4 The overall flow chart used by the IP input component of this application;

[0038] Figure 5 The ip input component code for this application is placed in the components folder under the src directory of the vue-i nput-i p project for specific implementation operations;

[0039] Figure 6 The specific implementation operation 1 of the network function configuration of this application;

[0040] Figure 7 The specific implementation operation 2 of the network function configuration of this application;

[0041] Figure 8 This is a display example diagram of the IP input component of this application. DETAILED DESCRIPTION

[0042] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application.

[0043] In the description of the present application, it should be understood that the orientation or positional relationship indicated by the terms and the like is based on the orientation or positional relationship shown in the accompanying drawings, which is only for the convenience of describing the present application and simplifying the description, rather than indicating or implying that the device, element, module, system, platform or device referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as a limitation on the present application. The following description of the present application is only understood as a description of individual embodiments of the technical solution of the present application. Other embodiments are not reflected in the following description, but it does not mean that the present application excludes these other embodiments, and the technical solution of the present application is not limited to the specific implementation methods described below, and the protection scope of the present application is not limited to only the specific implementation methods described below. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work should fall within the scope of protection of the present application.

[0044] It should be noted that if the terms "first", "second", etc. appear in the specification and claims of the present application and the above-mentioned drawings, the description is only used to distinguish similar objects, and is not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0045] In some embodiments, Figure 1 As shown, the present application provides a vue-based ip input component, which is embedded in an MVVM web page and includes:

[0046] The first input area is used to input the first section field of the IP;

[0047] The second input area is used to input the second section field of the IP;

[0048] The third input area is used to input the third section field of the IP;

[0049] The fourth input area is used to input the fourth field of the IP address;

[0050] A first separator, located between the first input area and the second input area;

[0051] a second separator, located between the second input area and the third input area; and

[0052] The third separator is located between the third input area and the fourth input area.

[0053] In some embodiments, the cursor of the MVVM web page moves to the first input area according to a forward delete instruction after the second section field is forward deleted in the second input area.

[0054] In some embodiments, the cursor of the MVVM web page moves to the third input area according to a backward deletion instruction after the second section field is deleted backward in the second input area.

[0055] In some embodiments, the cursor of the MVVM web page moves from the first input area to the second input area according to a separator input instruction.

[0056] In some embodiments, the cursor of the MVVM webpage moves from the second input area to the first input area according to a left shift instruction; or, the cursor of the MVVM webpage moves from the first input area to the second input area according to a right shift instruction.

[0057] In some embodiments, the cursor of the MVVM web page moves from the first section field of the first input area to the head of the first input area according to a start instruction; or, the cursor of the MVVM web page moves from the first section field of the first input area to the tail of the first input area according to an end instruction.

[0058] In some embodiments, the cursor of the MVVM web page moves from the first input area to the head of the second input area according to the switching instruction.

[0059] In some embodiments, specifically, the present application implements an input box component that only allows users to enter IP addresses, which requires starting from the appearance style and functional logic.

[0060] In terms of design, the appearance of the component should indicate that the component is used to input IP content. The difference between IP and other text formats is that IP (for example: 127.0.0.1) is composed of four groups of numbers and dots (".") between every two groups of numbers. The three dots in IP are the most obvious feature. Therefore, the composition of the IP input box is four input areas for inputting numbers and dots between two input areas. The appearance style is as follows: Figure 1 .

[0061] Functionally, the input area restricts users to only input integers in the range of 0 to 255 (inclusive), and cannot input negative numbers or anything other than numbers. Because the four input areas in the IP input box are separated by three dots, the four input areas need to be connected as a whole to make the operation smooth. Therefore, after clicking the backspace key on the keyboard to delete the content to the left of the cursor in one of the input areas, clicking the backspace key again should be able to move the cursor to the end of the previous input area. The same operation includes clicking the delete key after the user has entered numbers. After deleting the content to the right of the cursor in one of the input areas, the cursor can be moved to the head of the next input area; clicking the "." on the keyboard can move the cursor from the previous input area to the next input area; clicking the left and right shift keys (← and →) can move the cursor between two adjacent input areas; after entering numbers in an input area, clicking the start key and end key (home key and end key) can move the cursor to the head and tail of the input area; clicking the tab key switches the cursor to the head of the next input area, instead of switching the cursor to the next control (the default behavior of the browser).

[0062] In addition, if Figure 2 As shown, the present application also provides a method for obtaining the Vue-based IP input component as described above, including:

[0063] S1: Get the code of the ip input component;

[0064] S2: Write the code of the IP input component into the component directory of the Vue project and name it input Ip.vue;

[0065] S3: Set a form for filling in network configuration on the MVVM webpage to form App.vue;

[0066] S4: Introduce the input I p.vue into App.vue for use; and

[0067] S5: Bind input I p.vue in the HTML of the MVVM page through the ref attribute of vue to form the ip input component.

[0068] In some embodiments, writing the code of the IP input component into the component directory of the Vue project includes:

[0069] Write the code of the IP input component into the components folder under the src directory of the Vue project; the assets static file directory, components folder, App.vue main view page file and main.js main entry file are placed in the src directory.

[0070] In some embodiments, the binding of inputI p.vue in the html of the MVVM page through the ref attribute of vue includes:

[0071] In the methods function on the MVVM web page, call inputI p.vue, and then complete the binding through the html tag.

[0072] In some embodiments, after obtaining the component code, import it into the Vue project, introduce the component in the corresponding Vue page, register the component in the components, and then use the component in the HTML where the IP input box needs to be displayed, and fill in the component properties according to the Vue specification and the component specification. Figure 3 shown.

[0073] This application is accessed through a computer browser, using a front-end and back-end separation architecture, with the front-end using the Vue framework. The main business involves servers, network security, etc. There are many business scenarios that require inputting IP addresses. The overall flow chart of this case is as follows Figure 4 The developer puts the present invention into the vue project and deploys the project for users to use.

[0074] 1) Using the sub-process of the present invention in the vue project:

[0075] The code of the present invention is written into the component directory of the vue project and named as inputI p.vue. The present invention is thus imported as a component of the vue project. Figure 5 At this time, the present invention is placed in the components folder under the src directory of the vue-i nput-i p project, and the content in the input I p.vue file is the code of the present invention.

[0076] The vue-i nput-i p project is a vue project, in which the src directory contains the assets static file directory, the components component file directory, the App.vue main view page file, and the main.js main entry file. When users visit the web page, the content in the App.vue file will be displayed.

[0077] The inputI p.vue file is a component that can be imported and used in other files. In this case, the App.vue page is a form for filling in network configuration. According to the specific implementation method described above, the inputI p component is imported into App.vue for use.

[0078] In addition to the global HTML attributes and methods, the configurable functions of the Input IP component also include the custom width attribute (width) and the validation method (validation). The width attribute can be used directly on the tag, while the validation method needs to be bound to the Input IP component instance in the HTML of the page through the ref attribute of Vue according to the Vue development specification, called in the methods function of the page, and then coordinated with other HTML tags to complete the development of the configuration network function. The specific code is as follows: Figure 6 , Figure 7 , the displayed view is as follows Figure 8 .

[0079] In addition, the following is an explanation of some technical terms in this application.

[0080] a) HTML: A type of network technology, namely Hypertext Markup Language, is a markup language.

[0081] b) JavaScript: It is a lightweight, interpreted or just-in-time compiled programming language with function priority. It is famous as a scripting language for developing web pages.

[0082] c) CSS: Cascading Style Sheets (Full English Name: Cascading Style Sheets) is a computer language used to express the style of HTML files. It can accurately control the layout of element positions in web pages at the pixel level, supports almost all font sizes, and has the ability to edit web page objects and model styles.

[0083] d) Vue: It is a JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a declarative, component-based programming model to help developers develop user interfaces efficiently.

[0084] e) IP: refers to the IP address, a unique communication address specified for each computer and other device on the Internet. It is a 32-bit binary number, usually divided into four "8-bit binary numbers" (that is, 4 bytes). IP addresses are usually expressed in "dot decimal" in the form of (abcd), where a, b, c, and d are all decimal integers between 0 and 255. For example: the dotted decimal IP address (4.0.0.1) is actually a 32-bit binary number (00000100.00000000.00000000.00000001).

[0085] f) MVC architecture pattern: The full name is Model-View-Controller. It is a software architecture pattern and a manifestation of software design patterns. It is used to organize code and separate concerns. It is widely used in the development of user interfaces. This pattern divides the relevant program logic into three interrelated components: model, view, and controller. The MVC pattern was originally used for desktop graphical user interfaces (GUI), but later became popular for designing web applications. Many popular programming languages ​​have MVC frameworks that facilitate the implementation of the MVC pattern.

[0086] g) MVVM architecture pattern: The full name is Mode l-View-View Mode l, which is an improved version of the MVC pattern. It aims to take advantage of data binding functions and better promote the separation of view layer development from the rest of the pattern by removing almost all GUI code (code hiding) from the view layer. Maintaining a clear separation between application logic and UI helps solve many development problems and makes applications easier to test, maintain, and evolve. It can also significantly increase code reuse opportunities and allow developers and UI designers to collaborate more easily when developing their respective parts of the application.

[0087] h) Android: Formerly known as Android, it is a free and open source mobile operating system. It is mainly used in mobile devices such as smartphones and tablets, and is led and developed by Google and the Open Handset Alliance in the United States.

[0088] i) Java: It is an object-oriented programming language. It not only absorbs the advantages of C++, but also abandons the difficult-to-understand concepts of multiple inheritance and pointers in C++. Therefore, Java has two characteristics: powerful functions and simple and easy to use. As a representative of static object-oriented programming languages, Java language has excellently implemented object-oriented theory, allowing programmers to perform complex programming with an elegant way of thinking.

[0089] j) Windows operating system: It is an operating system developed by Microsoft Corporation of the United States based on the graphical user interface. It is mainly used in computers, smart phones and other devices. It is one of the most widely used operating systems in the world.

[0090] k) C++: The full name is cpl us pl us, which is a high-level computer programming language. It is an extension and upgrade of the C language. It was first developed by Benjani Stroustrup at AT&T Bell Studio in 1979. While being good at object-oriented programming, it can also perform process-based programming. C++ can create almost any type of program: games, device drivers, HPC, cloud, desktop, embedded and mobile applications, etc. Even libraries and compilers for other programming languages ​​are written in C++.

[0091] l) C#: It is a safe, stable, simple and elegant object-oriented programming language derived from C and C++. It inherits the powerful functions of C and C++ while removing some of their complex features (such as no macros and no multiple inheritance), and combines simple visual operations with the high operating efficiency of C++.

[0092] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0093] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A vue-based ip input component, characterized in that: The ip input component is embedded in the MVVM web page, and the ip input component includes: The first input area is used to input the first section field of the IP; The second input area is used to input the second section field of the IP; The third input area is used to input the third section field of the IP; The fourth input area is used to input the fourth field of the IP address; A first separator, located between the first input area and the second input area; a second separator, located between the second input area and the third input area; and The third separator is located between the third input area and the fourth input area.

2. According to claim 1, the vue-based ip input component is characterized in that: After the second section field is deleted forward in the second input area, the cursor of the MVVM web page moves to the first input area according to the forward deletion instruction.

3. The vue-based ip input component according to claim 2 is characterized in that: After deleting the second section field backward in the second input area, the cursor of the MVVM web page moves to the third input area according to the backward deletion instruction.

4. According to claim 3, the vue-based ip input component is characterized in that, Also includes: The cursor of the MVVM web page moves from the first input area to the second input area according to the separator input instruction.

5. According to claim 4, the vue-based ip input component is characterized in that, Also includes: The cursor of the MVVM webpage moves from the second input area to the first input area according to the left shift instruction; Alternatively, the cursor of the MVVM webpage moves from the first input area to the second input area according to a right shift instruction.

6. The Vue-based IP input component according to claim 5 is characterized in that: Also includes: The cursor of the MVVM webpage moves from the first section field of the first input area to the head of the first input area according to a start instruction; or, the cursor of the MVVM webpage moves from the first section field of the first input area to the tail of the first input area according to an end instruction.

7. The Vue-based IP input component according to claim 6 is characterized in that: Also includes: The cursor of the MVVM webpage moves from the first input area to the head of the second input area according to the switching instruction.

8. A method for obtaining a Vue-based IP input component as described in any one of claims 1 to 7, characterized in that: include: Get the code of the ip input component; Write the code of the IP input component into the component directory of the Vue project and name it inputIp.vue; Set a form for filling in network configuration on the MVVM web page to form App.vue; Introduce the inputIp.vue into App.vue for use; and InputIp.vue is bound in the html of the MVVM page through the ref attribute of vue to form the ip input component.

9. The method according to claim 8, characterized in that The code of the IP input component is written into the component directory of the Vue project, including: Write the code of the IP input component into the components folder under the src directory of the Vue project; the assets static file directory, components folder, App.vue main view page file and main.js main entry file are placed in the src directory.

10. The method according to claim 9, characterized in that The binding of inputIp.vue in the html of the MVVM page through the ref attribute of vue includes: Call inputIp.vue in the methods function on the MVVM web page, and then complete the binding through the html tag.

Images