CN109814858A - The general UI Component Gallery of WEB front-end based on Vue framework - Google Patents
The general UI Component Gallery of WEB front-end based on Vue framework Download PDFInfo
- Publication number
- CN109814858A CN109814858A CN201811591773.6A CN201811591773A CN109814858A CN 109814858 A CN109814858 A CN 109814858A CN 201811591773 A CN201811591773 A CN 201811591773A CN 109814858 A CN109814858 A CN 109814858A
- Authority
- CN
- China
- Prior art keywords
- component
- web
- general
- gallery
- website
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses the general UI Component Galleries of WEB front-end based on Vue framework, comprising: component configuration module provides interface service, for being responsible for the corresponding component of instantiation；General purpose module, for directly being interacted with user；Wherein general purpose module includes: basic layout component, window body component, data package, message components and navigation arrangement；The configuration information of each component is read from backstage configuration file in the general purpose module, and component configuration module provides unified interface service for each component and front-end WEB website, is realized according to the configuration information of component and is connect between each component with the interface of front-end WEB website.The present invention passes through the research to various components configurability, the attribute of component, pattern are configured in the form of configuration file, can delete, are inserted into and modify at any time, greatly strengthens the ease for maintenance of the website WEB, the portability of front end assemblies is strong, improves the working efficiency of Website development personnel.
Description
Technical field
The present invention relates to field of computer technology, and in particular to the general UI Component Gallery of WEB front-end based on Vue framework.
Background technique
World Wide Web (abbreviation WEB) is the universal use with Internet and a special kind of skill to grow up,
Its invention greatly facilitates tissue and access of the people to resource on Internet.
Web front end development technique includes three elements: HTML (HyperText Markup Language, hypertext markup
Language), CSS (Cascading Style Sheet, cascading style list) and JavaScript (literal translation formula scripting language).With
Internet technology it is universal, webpage no longer only carries single text and picture, various rich-medias by webpage content
More lively, the interactive form of software implementation provides better usage experience for user on webpage, these are all based on
JavaScript is that the front-end technology of mark is realized.
However, traditional front end based on JavaScript has been developed increasingly with the surprising growth of website demand
Exploitation needs are not able to satisfy, although JavaScript is able to achieve the demand of various webpages with its flexibility, its size of code is but
The readability of substantial increase therewith, code sharply deteriorates with maintainability.In addition, WEB front-end is opened using JavaScript language
Hair, the development language of rear end is varied, this also considerably increases the communication difficulty of front and back end developer.
Summary of the invention
Vue framework is based in view of the above-mentioned deficiencies in the prior art, the technical problem to be solved by the present invention is that providing
The general UI Component Gallery of WEB front-end.
The technical solution adopted by the present invention to solve the technical problems is:
The general UI Component Gallery of WEB front-end based on Vue framework, comprising:
Component configuration module provides interface service, for being responsible for the corresponding component of instantiation；
General purpose module, for directly being interacted with user；
Wherein general purpose module includes: basic layout component, window body component, data package, message components and navigation arrangement；
The configuration information of each component is read from backstage configuration file in the general purpose module, and component configuration module is each group
Part and front-end WEB website provide unified interface service, according to the configuration information of component realize between each component with front-end WEB net
The interface connection stood.
As further technical solution of the present invention are as follows: the configuration information includes component property information, component html aobvious
Show information, component CSS style information.
As further technical solution of the present invention are as follows: it is described basis layout component include: layout component, color component,
Font component, icon component and button assembly；The layout of Page Template for Web site.
As further technical solution of the present invention are as follows: the window body component include: radio box component, multiselect frame component,
Input frame component, selector assembly, cascade selector assembly, selection of time device assembly, date picker component and form component；
The realization of the individual feature page for Web site.
As further technical solution of the present invention are as follows: the data package includes: form component, label assembly, progress
Bar assembly, tree control component, paging component；For showing for data information.
As further technical solution of the present invention are as follows: the data package is applied in combination with the window body component, can be with
Server database data are screened, are showed by form.
As further technical solution of the present invention are as follows: the message components include: warning component, charging assembly, message
It prompts component and plays frame component；Interacted for Web site and user, feedback Web site server-side processing progress with disappear
Breath.
As further technical solution of the present invention are as follows: the navigation arrangement includes: navigation menu component, Shipping Options Page group
Part, crumbs component, step bar assembly；Feature operation guidance after logging in Web site for user.
As further technical solution of the present invention are as follows: the backstage configuration file is compiled using javascript scripting language
It writes.
Beneficial effects of the present invention:
The present invention is sorted out by the survey, research and analysis to the website WEB conventional func, and that designs lower coupling meets WEB
The various components of conventional func demand, and by the research to various components configurability, to component in the form of configuration file
Attribute, pattern configured, the overall structure of the website WEB can be made to be more clear, it can be readily appreciated that front end assemblies and WEB simultaneously
By interface between website, it can delete, be inserted into and modify at any time, greatly strengthen the ease for maintenance of the website WEB.Front end
The portability of component is strong, the weak coupling between front end assemblies library all facilitate the flexible and changeable development scheme in the website WEB and
The working efficiency of Website development personnel can be improved in upgrading mode.
Detailed description of the invention
Fig. 1 is the general UI Component Gallery structure chart of the WEB front-end proposed by the present invention based on Vue framework.
Specific embodiment
Below with reference to specific drawings and examples, the invention will be further described.To the technical side in the embodiment of the present invention
Case is clearly and completely described, it is clear that and described embodiments are only a part of the embodiments of the present invention, rather than all
Embodiment.Based on the embodiments of the present invention, those of ordinary skill in the art without making creative work, are obtained
The every other embodiment obtained, belongs to the scope of the present invention.
It is the general UI Component Gallery structure chart of the WEB front-end proposed by the present invention based on Vue framework referring to Fig. 1.
As shown in Figure 1, a kind of WEB front-end UI Component Gallery 1 based on Vue framework, comprising: component configuration module 11 and multiple
General purpose module class；When website coder needs to call backstage UI Component Gallery from front end, invocation component configuration module 11 is needed,
Component configuration module 11 is responsible for the corresponding component of instantiation；The configuration information of each component is read from backstage configuration file, configuration
Information includes the attribute information of component, html display information, CSS3 style information.Backstage configuration file uses js for extension name
File is to use javascript scripting language, in the present embodiment as the reference format of configuration file.Of the invention
General purpose module class includes: basic layout component 12, window body component 13, data package 14, message components 15 and navigation arrangement 16.It is logical
It is read with the configuration information of component each in component from backstage configuration file, component configuration module 11 is each component and front-end WEB
Website 2 provides unified interface service, is realized according to the configuration information of component and is connected between each component with the interface of front-end WEB website
It connects.
User can quickly be configured component property by configuration file, realize the insertion to component, screen out and repair
Change operation, the attribute of component, pattern are configured in the form of configuration file, considerably increases the flexibility of component, so that
Component can be transplanted in all kinds of different websites WEB.
Vue.js is the gradual frame to be grown up in recent years based on JavaScript language for constructing user interface.
Unlike other large-scale frames, Vue is designed to bottom-up layer-by-layer application.The core library of Vue only focuses on view
Layer, is not only easy to hand, is also convenient for and third party library or existing Item increasing.On the other hand, when with the tools chain of modernization with
And various support class libraries, when being used in combination, Vue is also fully able to provide driving for complicated single page application.
In the embodiment of the present invention, information, which uses HTML5 standard criterion, front end generation, to be shown for the html in configuration information
Code can be rendered and be shown by whole major browsers instantly, use the compatibility of the web desktop application of HTML5 standard criterion
Property is more preferable.
Backstage configuration file is with javascript scripting language, since JavaScript is browsed in most mainstreams
It can be run under a variety of operations under the support of device, it is high using the flexible more property of JavaScript, it can be by JavaScript generation
Code is directly embedded in HTML code, naturally it is also possible to be write as individual JavaScript file and is conducive to page structure and the page
The separation of middle concrete behavior facilitates the investigation and the maintenance in later period of mistake.
Basic layout component 12 includes: layout (Layout) component, color (Color) component, font (Typography)
Component, icon (Icon) component and button (Button) component；User can quickly carry out component property by configuration file
Setting, the layout of the Page Template for Web site.
Wherein user is configured basic layout component attribute by configuration file, the Page Template for Web site
Layout, specifically: basic layout component is directly interacted with user, and basic layout component is for Web site base page template
It realizes, website coder is configured page layout component property by configuration file；It include: the interior of setting layout component
Hold: the interval of each subfield of webpage is how many, combines to form more complicated mixing cloth by the 1/24 subfield arbitrary extension on basis
Office；The content of color component is set: including website mass-tone, complementary colors and muted color；Set font the content of component: including website
The global font of display；The content of icon component is set: providing a set of common icon set including default.
Window body component 13 includes: radio box (Radio) component, multiselect frame (Checkbox) component, input frame (Input) group
Part, selector (Select) component, cascade selector (Cascader) component, time gate (Time Picker) component, day
Phase selector (Date Picker) component and list (Form) component；User can be quickly to component property by configuration file
It is configured, the realization of the individual feature page for Web site.
Window body component is directly interacted with user, and realization of the window body component for the individual feature page of Web site, website is compiled
Code personnel are configured window body component attribute by configuration file, comprising: the setting content of radio box component, disabled status and
Button pattern, is configured by CSS style；The limitation of the content, disabled status, optional project quantity of multiselect frame component is set
With button pattern, configured by CSS style；Be arranged the content of input frame component, disabled status, the input frame with icon,
Textview field, wherein textview field adjusting, for input multiline text information, size and with input suggest；Selector is set
The content of component, disabled status and grouping information；Content, disabled status and the default value of cascade selection component are set；When setting
Between selector assembly content, time range, which can be divided into set time range and any time range；Setting
The content of date picker component, date unit, date range；Content, alignment thereof, the form validation rule of form component are set
Then, verification rule.
Data package 14 includes: form component (Table), label (Tag) component, progress bar (Progress) component, tree
Type control (Tree) component, paging (Pagination) component；User can quickly carry out component property by configuration file
Setting, for showing for data information.
Data package is directly interacted with user, and data package shows for data information, and website coder is to data
Component property is configured by configuration file.Include: the content that form component is set, show form and fixed gauge outfit；Wherein
The form that shows of form component includes basic table, band zebra-stripe, band frame and carrier state；The content of label assembly is set；If
It sets the content of progress bar assembly and shows form, wherein the form that shows of progress bar assembly includes: to show in percentage, outside percentage
Aobvious and annular progress bar；The content of tree control is set；The content and additional function of paging component are set, and wherein additional function has
It shows sum, every page of item number and goes directly to component.
In embodiments of the present invention, data package can be applied in combination with window body component, to server database data into
Row screening, can be showed by form.
Message components 15 include: warning (Alert) component, load (Loading) component, message notifying (Message) group
Part and bullet frame (Message Box) component；User can quickly be configured component property by configuration file, be used for Web
Website is interacted with user, the progress and message of feedback Web site server-side processing.
Message components class is directly interacted with user, is broadly divided into two kinds of prompting-type information and confirmation type information.Prompting-type letter
Breath mainly plays prompt and warning function to user；Confirmation type information is mainly the effect played with user's interaction, allows user couple
Itself behavior is confirmed.Website coder configures component property and CSS style by configuration file.It include: to set
It sets the content of warning component and shows form, the form that shows of the warning component has with complementary character introduction and customized closing
Button；The content of charging assembly is set；Setting message notifying component content and attribute (state and whether can close)；Setting plays frame
The content of component.
Navigation arrangement 16 includes: navigation menu (NavMenu) component, Shipping Options Page (Tabs) component, crumbs
(Breadcrumb) component, step item (Steps) component；User can quickly set component property by configuration file
It sets, the feature operation guidance after Web site is logged in for user.
Navigation arrangement is directly interacted with user, is mainly used for user and is logged in the feature operation guidance after Web site, website is compiled
Code personnel configure component property and CSS style by configuration file.It include: the content that navigation menu component is set, exhibition
Existing form (top column form and sidebar form)；The content of Shipping Options Page component is set, shows form (base model and tabs sample
Formula)；The content of crumbs component is set；The content of setting steps bar assembly, whether band icon and is described information.
Sorted out by the survey, research and analysis to the website WEB conventional func, that designs lower coupling meets WEB routine function
Can demand various components, and by the research to various components configurability, in the form of configuration file to the attribute of component,
Pattern is configured, and the flexibility of component is considerably increased, and component is transplanted in all kinds of different websites WEB.
The present invention can be such that the overall structure of the website WEB is more clear, it can be readily appreciated that simultaneously front end assemblies and the website WEB it
Between by interface, can delete, be inserted into and modify at any time, greatly strengthen the ease for maintenance of the website WEB.Front end assemblies
Portable strong, the weak coupling between front end assemblies library all facilitates the flexible and changeable development scheme in the website WEB and upgrading side
The working efficiency of Website development personnel can be improved in formula.
Technical solution provided by the present invention is described in detail above.Each embodiment is using progressive in specification
Mode describe, each embodiment focuses on the differences from other embodiments, identical between each embodiment
Similar portion may refer to each other.For the device disclosed in the embodiment, since it is corresponded to the methods disclosed in the examples,
So being described relatively simple, reference may be made to the description of the method.It should be pointed out that for the common of the art
, without departing from the principle of the present invention, can be with several improvements and modifications are made to the present invention for technical staff, these
Improvement and modification are also fallen within the protection scope of the claims of the present invention.
It should also be noted that, in the present specification, relational terms such as first and second and the like be used merely to by
One entity or operation are distinguished with another entity or operation, without necessarily requiring or implying these entities or operation
Between there are any actual relationship or orders.Moreover, the terms "include", "comprise" or its any other variant meaning
Covering non-exclusive inclusion, so that the process, method, article or equipment for including a series of elements not only includes that
A little elements, but also including other elements that are not explicitly listed, or further include for this process, method, article or
The intrinsic element of equipment.In the absence of more restrictions, the element limited by sentence "including a ...", is not arranged
Except there is also other identical elements in the process, method, article or apparatus that includes the element.
Claims (9)
1. the general UI Component Gallery of WEB front-end based on Vue framework characterized by comprising
Component configuration module provides interface service, for being responsible for the corresponding component of instantiation；
General purpose module, for directly being interacted with user；
Wherein general purpose module includes: basic layout component, window body component, data package, message components and navigation arrangement；
The configuration information of each component is read from background in the general purpose module, and component configuration module is each component and front end
The website WEB provides unified interface service, realizes the interface between each component with front-end WEB website according to the configuration information of component
Connection.
2. the general UI Component Gallery of the WEB front-end according to claim 1 based on Vue framework, which is characterized in that the configuration
Information includes component property information, component html display information, component CSS style information.
3. the general UI Component Gallery of the WEB front-end according to claim 1 based on Vue framework, which is characterized in that the basis
Layout component includes: layout component, color component, font component, icon component and button assembly；The page for Web site
The layout of template.
4. the general UI Component Gallery of the WEB front-end according to claim 1 based on Vue framework, which is characterized in that the forms
Component includes: radio box component, multiselect frame component, input frame component, selector assembly, cascade selector assembly, selection of time
Device assembly, date picker component and form component；The realization of the individual feature page for Web site.
5. the general UI Component Gallery of the WEB front-end according to claim 1 based on Vue framework, which is characterized in that the data
Component includes: form component, label assembly, progress bar assembly, tree control component, paging component；Exhibition for data information
It is existing.
6. the general UI Component Gallery of the WEB front-end according to claim 5 based on Vue framework, which is characterized in that the data
Component is applied in combination with window body component, can screen to server database data, be showed by form.
7. the general UI Component Gallery of the WEB front-end according to claim 1 based on Vue framework, which is characterized in that the message
Component includes: warning component, charging assembly, message notifying component and plays frame component；It is interacted for Web site and user,
Feed back the progress and message of the processing of Web site server-side.
8. the general UI Component Gallery of the WEB front-end according to claim 1 based on Vue framework, which is characterized in that the navigation
Component includes: navigation menu component, Shipping Options Page component, crumbs component, step bar assembly；After logging in Web site for user
Feature operation guidance.
9. the general UI Component Gallery of the WEB front-end according to claim 1 based on Vue framework, which is characterized in that the backstage
Configuration file uses javascript scripting language.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811591773.6A CN109814858A (en) | 2018-12-20 | 2018-12-20 | The general UI Component Gallery of WEB front-end based on Vue framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811591773.6A CN109814858A (en) | 2018-12-20 | 2018-12-20 | The general UI Component Gallery of WEB front-end based on Vue framework |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109814858A true CN109814858A (en) | 2019-05-28 |
Family
ID=66601704
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811591773.6A Pending CN109814858A (en) | 2018-12-20 | 2018-12-20 | The general UI Component Gallery of WEB front-end based on Vue framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109814858A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110569079A (en) * | 2019-07-23 | 2019-12-13 | 镇江慧铄科技有限公司 | Method and device for driving front end based on configuration |
| CN110688115A (en) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | Method and device for generating interface |
| CN111291283A (en) * | 2020-01-17 | 2020-06-16 | 深圳震有科技股份有限公司 | Vue-based navigation bar display method, storage medium and terminal equipment |
| CN112433724A (en) * | 2020-11-09 | 2021-03-02 | 北京达佳互联信息技术有限公司 | Target component style generation method and device, electronic equipment and storage medium |
| CN113010156A (en) * | 2021-03-03 | 2021-06-22 | 西安建筑科技大学 | General UI storehouse based on React |
| CN113485775A (en) * | 2021-07-28 | 2021-10-08 | 中国银行股份有限公司 | Step bar assembly implementation method and device |
| CN113553121A (en) * | 2021-07-07 | 2021-10-26 | 北京智慧星光信息技术有限公司 | Screening configuration method and system based on elementui list, electronic device and storage medium |
| CN113553042A (en) * | 2021-07-23 | 2021-10-26 | 济南浪潮智投智能科技有限公司 | Vue-based multi-component modularization adding and deleting method and system |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20150010050A (en) * | 2013-07-17 | 2015-01-28 | 주식회사 시옷 | Product purchase user interface providing system and providing method thereof |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN105786522A (en) * | 2016-03-17 | 2016-07-20 | 无锡威泰迅电力科技有限公司 | WEB (World Wide Web) front-end universal component unit based on Node. js platform |
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
-
2018
- 2018-12-20 CN CN201811591773.6A patent/CN109814858A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20150010050A (en) * | 2013-07-17 | 2015-01-28 | 주식회사 시옷 | Product purchase user interface providing system and providing method thereof |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN105786522A (en) * | 2016-03-17 | 2016-07-20 | 无锡威泰迅电力科技有限公司 | WEB (World Wide Web) front-end universal component unit based on Node. js platform |
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110569079A (en) * | 2019-07-23 | 2019-12-13 | 镇江慧铄科技有限公司 | Method and device for driving front end based on configuration |
| CN110688115A (en) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | Method and device for generating interface |
| CN111291283A (en) * | 2020-01-17 | 2020-06-16 | 深圳震有科技股份有限公司 | Vue-based navigation bar display method, storage medium and terminal equipment |
| CN112433724A (en) * | 2020-11-09 | 2021-03-02 | 北京达佳互联信息技术有限公司 | Target component style generation method and device, electronic equipment and storage medium |
| CN113010156A (en) * | 2021-03-03 | 2021-06-22 | 西安建筑科技大学 | General UI storehouse based on React |
| CN113553121A (en) * | 2021-07-07 | 2021-10-26 | 北京智慧星光信息技术有限公司 | Screening configuration method and system based on elementui list, electronic device and storage medium |
| CN113553121B (en) * | 2021-07-07 | 2023-12-19 | 北京智慧星光信息技术有限公司 | Screening configuration method, system, electronic equipment and storage medium based on elementui list |
| CN113553042A (en) * | 2021-07-23 | 2021-10-26 | 济南浪潮智投智能科技有限公司 | Vue-based multi-component modularization adding and deleting method and system |
| CN113485775A (en) * | 2021-07-28 | 2021-10-08 | 中国银行股份有限公司 | Step bar assembly implementation method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109814858A (en) | The general UI Component Gallery of WEB front-end based on Vue framework | |
| Hermes | Xamarin mobile application development: Cross-platform c# and xamarin. forms fundamentals | |
| Vanderdonckt et al. | Flexible reverse engineering of web pages with vaquista | |
| CN110442816A (en) | Web form configuration method, device and computer readable storage medium | |
| US9524273B2 (en) | Method and system for generating a web page layout using nested drop zone widgets having different software functionalities | |
| Kennard et al. | Towards a general purpose architecture for UI generation | |
| CN109325203A (en) | The device of Web system visualization multiplexing is realized in a kind of automation | |
| CN103631597B (en) | WEB list engine apparatus based on XML and method | |
| US20100070886A1 (en) | Web widget component for a rapid application development tool | |
| Beeley | Web application development with R using Shiny | |
| CN102495735A (en) | Web end UI (user interface) component application frame system | |
| WO2007134265A2 (en) | Workflow data binding | |
| CN103258015A (en) | Method for dynamically generating questionnaire based on XML | |
| CN102254049A (en) | Web page design system and method for building same | |
| WO2004077263A2 (en) | Method and system for creating and managing a website | |
| Whiting et al. | Creating an iPhone application for collecting continuous ABC data | |
| CN105786522A (en) | WEB (World Wide Web) front-end universal component unit based on Node. js platform | |
| Craig et al. | Learn android studio: build android apps quickly and effectively | |
| CN103810292A (en) | Method and device for configuring graphical interface | |
| Holzner | Visual Basic 6 Black Book | |
| Loudon | Developing Large Web Applications: Producing Code That Can Grow and Thrive | |
| Pescador et al. | DSL-maps: from requirements to design of domain-specific languages | |
| Johnson | Programming in HTML5 with JavaScript and CSS3 | |
| CN106547529A (en) | Page makeup method and device | |
| Homrighausen et al. | Round-trip prototyping based on integrated functional and user interface requirements specifications |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190528 |
|
| RJ01 | Rejection of invention patent application after publication |