CN110602539A - Vue framework implementation based on TV - Google Patents
Vue framework implementation based on TV Download PDFInfo
- Publication number
- CN110602539A CN110602539A CN201910790145.9A CN201910790145A CN110602539A CN 110602539 A CN110602539 A CN 110602539A CN 201910790145 A CN201910790145 A CN 201910790145A CN 110602539 A CN110602539 A CN 110602539A
- Authority
- CN
- China
- Prior art keywords
- vue
- management module
- key event
- remote controller
- state management
- 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.)
- Withdrawn
Links
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/41—Structure of client; Structure of client peripherals
- H04N21/422—Input-only peripherals, i.e. input devices connected to specially adapted client devices, e.g. global positioning system [GPS]
- H04N21/42204—User interfaces specially adapted for controlling a client device through a remote control device; Remote control devices therefor
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Selective Calling Equipment (AREA)
Abstract
The invention discloses a TV-based Vue framework implementation, which comprises the steps of constructing a Vue framework at a TV end; a routing management module and a state management module are arranged in an Vue framework; finally, creating a remote controller key event response to transmit the focus among the components; can realize through the Vue frame that the TV end has the function of Vue, use Vue-Router route management module to carry out the route jump, use Vuex state management module to carry out the state management of all subassemblies, and can use the remote controller to realize the button event of subassembly, realize that remote controller control interface focus moves, can provide efficient development mode through the Vue frame, simultaneously in TV client development and later maintenance, can avoid data manipulation, the Dom operation, only need develop logical operation, TV end development and later maintenance efficiency have been promoted greatly, the simple operation nature and travelling comfort are high, therefore, the clothes hanger is strong in practicability.
Description
Technical Field
The invention relates to an Vue framework building suitable for application and development of a television, and belongs to the technical field of internet.
Background
Today, technology is evolving in the wake of the rapid growth of the internet, and while Vue is clearly superior in the frontend field, unlike traditional web development, Vue integrates efficient development modalities, providing superior post-maintenance capabilities. We do not care about rendering of the interface, generation of elements, and operation of Dom, and we can help us to do the next job by only putting the code on the logical process with care Vue.
In addition, the TV client application is changed frequently in the later period, and is delivered to different developers, codes and logic need to be combed up actually, and the change can be carried out only, so that the TV client application is slow in response and low in efficiency, and the TV client application becomes a pronoun of the applications. The application written by the Vue framework can not only realize the function quickly, but also facilitate the later maintenance. The modular programming idea and the low-coupling code implementation can help people to develop and maintain better.
Disclosure of Invention
The technical problem to be solved by the present invention is to provide a TV-based Vue framework implementation, which can overcome the shortcomings of the prior art.
In order to solve the technical problems, the invention is realized by the following technical scheme: a TV-based Vue framework implementation, comprising:
constructing Vue framework at TV end;
a routing management module and a state management module are arranged in an Vue framework;
finally, creating a remote controller key event response to transmit the focus among the components;
the Vue framework is used for constructing Vue functions of a TV end; the route management module is used for realizing skip management between the module and the route; the state management module is used for storing and managing states of all components of the TV application in a centralized mode and realizing data sharing among different components; and the remote controller key event is used for realizing the key event of the component by using the remote controller and controlling the realization of all operation focuses of the TV end.
The construction Vue framework on the TV side is realized by creating projects through Vue create xxx.
Vue-router is installed and integrated into the Vue framework, creating a vue-router route management module.
Vuex is installed and integrated into the Vue framework, creating a Vuex state management module.
A global key event of a remote controller key event is created, and an activation method of a corresponding remote controller key event is created.
Creating a key event of a remote controller key event, and enabling different components in the vuex state management module to correspond to different response modes, wherein the key event comprises the following steps:
the vuex state management module is referred and registered in main;
recording the component state to be recorded or stored in a vuex state management module, setting initialized focus as false, and marking the component as default and not to be focused;
and monitoring whether focus of a current assembly of the vuex state management module changes, if the current assembly obtains the focus, compiling the focus implementation of the current assembly, and registering a key event.
Compared with the prior art, the invention discloses an Vue framework implementation based on a TV, which constructs a Vue framework on the basis of the existing development framework at the TV end; setting a route management module and a state management module in an Vue framework; and creating a remote controller key event response to perform focus transfer between components. The TV end can have the function of Vue through an Vue framework, a Vue-Router routing management module is used for carrying out routing skip, a Vuex state management module is used for carrying out state management on all components, a remote controller can be used for realizing key events of the components, the focus movement of a control interface of the remote controller is realized, an efficient development mode can be provided through a Vue framework, the development efficiency of developers is greatly improved, and meanwhile, in the development and later maintenance of the TV client, data operation and Dom operation can be avoided, and only logic operation needs to be developed. The problems that data operation, Dom operation and logic operation are required to be considered in a traditional development mode of a TV client, complexity and low efficiency are caused, meanwhile, later-stage change is frequent, change response is slow, and efficiency is low are solved.
Compared with the prior art, the method provided by the invention has the following beneficial effects:
(1) the TV end integrates an efficient development mode through an Vue framework, and development experience of the TV end consistent with Internet development can be realized;
(2) the development amount of codes can be reduced, developers concentrate on logic implementation, and the development efficiency of a TV end is greatly improved; meanwhile, the high-quality later maintenance capability can be provided, the maintenance operation response is fast, the maintenance convenience is high, the time and the labor are saved, and the efficiency is high.
(3) Can compatible remote controller's key event, realize the focus transmission between the subassembly, the simple operation nature and travelling comfort are high, and the practicality is strong.
Drawings
Fig. 1 is a schematic view of the structural framework of the present invention.
Detailed Description
The technical solution in the embodiment of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiment of the present invention:
as shown in fig. 1, a TV-based Vue framework implementation includes building Vue framework at TV end, and setting routing management module and state management module in Vue framework; finally, creating a remote controller key event response to transmit the focus among the components; the Vue framework is used for constructing Vue functions of a TV end; the route management module is used for realizing skip management between the module and the route; the state management module is used for storing and managing states of all components of the TV application in a centralized mode and realizing data sharing among different components; the remote controller key event is used for realizing the key event of the component by using the remote controller, and different components correspond to different response modes.
The method comprises the following specific steps:
step s1, creating a project through Vue create xxx, and realizing the construction of a Vue framework at the TV end;
an Vue framework is constructed at the TV end, so that the TV end completely integrates Vue functions; the construction steps are as follows:
s101, downloading node.js, and installing the node.js at a TV end;
s102, opening a cmd window, and inputting npm install-g @ vue/cli to install a vue scaffold tool;
s103, after the installation is completed, inputting Vue create xxx in the cmd window to create a xxx item, and selecting default (babel, eslin).
Preferably, the node.js is the node.js 10.16.3 version.
Step s2, creating vue-router route management module, namely installing vue-router and integrating into xxx project, and using vue-router to perform route management;
and after the project creation is completed through the methods of the steps S101 to S103, inputting npm install-S vue-router installation vue-router into the xxx project in the window, and realizing the creation of the route management module.
Step s3, creating a Vuex state management module, namely installing Vuex, integrating the Vuex into a xxx project, and performing state management by using the Vuex;
and inputting npm instance-S vuex in the cmd window, and installing vuex to xxx projects to realize the creation of the state management module.
Step s4, creating a global key event and an activation method of a remote controller key event; different components in the vuex state management module are set to correspond to different response modes;
s401, creating a key assignment of a remote controller key event, which is implemented as follows:
s402, creating an activation method of a corresponding remote controller key event; in particular, the introduction of the registered keyEvent is registered in main.js,
introducing: import keyEvent from '/keyEvent'
Registering: prototype $ keyDown ═ keyEvent
s403, defining corresponding key event methods for different components in the vuex state management module;
specifically, the vuex state management module is referred to and registered in main (refer to step s401), and then the component is registered in the vuex state management module, in the following manner:
s4031, recording the component state to be recorded or saved in the vuex state management module, setting the initialized focus as false, and identifying the default component not to be focused;
s4032, creating a calculation attribute hook function of the component, monitoring whether focus of a current component of the vuex state management module changes, if the current component obtains the focus, writing the focus implementation of the current component, and registering a key event, wherein the implementation method comprises the following steps:
vue functions are integrated completely at the TV end, a vue-router route management module is used for realizing route skip, all component states are managed and configured in a centralized mode through a vuex state management module, remote controller key response is added on the basis, focus transmission among the components is realized, realization of all operation focuses based on TV control is completed, and the TV end interface display can be well adapted to the TV end interface display.
Claims (6)
1. A TV-based Vue framework implementation, comprising:
constructing Vue framework at TV end;
a routing management module and a state management module are arranged in an Vue framework;
finally, creating a remote controller key event response to transmit the focus among the components;
the Vue framework is used for constructing Vue functions of a TV end; the route management module is used for realizing skip management between the module and the route; the state management module is used for storing and managing states of all components of the TV application in a centralized mode and realizing data sharing among different components; and the remote controller key event is used for realizing the key event of the component by using the remote controller and controlling the realization of all operation focuses of the TV end.
2. A TV-based Vue framework implementation according to claim 1, wherein the Vue framework is built on the TV side by creating projects via Vue create xxx.
3. A TV-based Vue framework implementation according to claim 1, wherein: the vue-router is installed and integrated into the Vue framework, creating a vue-router route management module.
4. A TV-based Vue framework implementation according to claim 1, wherein: vuex is installed and integrated into the Vue framework, creating a Vuex state management module.
5. A TV-based Vue framework implementation according to claim 1, wherein: a global key event of a remote controller key event is created, and an activation method of a corresponding remote controller key event is created.
6. A TV-based Vue framework implementation according to claim 5, wherein: creating a key event of a remote controller key event, and enabling different components in the vuex state management module to correspond to different response modes, wherein the key event comprises the following steps:
the vuex state management module is referred and registered in main;
recording the component state to be recorded or stored in a vuex state management module, setting initialized focus as false, and marking the component as default and not to be focused;
and monitoring whether focus of a current assembly of the vuex state management module changes, if the current assembly obtains the focus, compiling the focus implementation of the current assembly, and registering a key event.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910790145.9A CN110602539A (en) | 2019-08-26 | 2019-08-26 | Vue framework implementation based on TV |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910790145.9A CN110602539A (en) | 2019-08-26 | 2019-08-26 | Vue framework implementation based on TV |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110602539A true CN110602539A (en) | 2019-12-20 |
Family
ID=68855679
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910790145.9A Withdrawn CN110602539A (en) | 2019-08-26 | 2019-08-26 | Vue framework implementation based on TV |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110602539A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113242471A (en) * | 2021-05-25 | 2021-08-10 | 四川虹魔方网络科技有限公司 | Vue-based method for realizing preview component of television Launcher system web end |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101814031A (en) * | 2010-04-22 | 2010-08-25 | 四川长虹电器股份有限公司 | Method for realizing customization of focus rectangle style of user interface elements |
| EP2541521A2 (en) * | 2011-06-30 | 2013-01-02 | France Telecom | Electronic device in slave mode acting as an interface |
| CN104902298A (en) * | 2015-05-26 | 2015-09-09 | 江苏省公用信息有限公司 | Universal method for implementing adaptation of web page to remote control keys on android intelligent set-top box |
| WO2018052461A1 (en) * | 2016-10-19 | 2018-03-22 | Intel Corporation | Vehicle broadcasting resources and transmission |
| CN107991905A (en) * | 2017-12-25 | 2018-05-04 | 南京邮电大学 | A kind of analogue system of the multiple no-manned plane mission planning based on Web |
| US20190141377A1 (en) * | 2016-12-31 | 2019-05-09 | Turner Broadcasting Systems, Inc. | Publishing a plurality of disparate live media output stream manifests using live input streams and pre-encoded media assets |
| CN110109659A (en) * | 2019-04-28 | 2019-08-09 | 广东三维家信息科技有限公司 | A kind of system that realizing front end applications scaffold and server |
-
2019
- 2019-08-26 CN CN201910790145.9A patent/CN110602539A/en not_active Withdrawn
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101814031A (en) * | 2010-04-22 | 2010-08-25 | 四川长虹电器股份有限公司 | Method for realizing customization of focus rectangle style of user interface elements |
| EP2541521A2 (en) * | 2011-06-30 | 2013-01-02 | France Telecom | Electronic device in slave mode acting as an interface |
| CN104902298A (en) * | 2015-05-26 | 2015-09-09 | 江苏省公用信息有限公司 | Universal method for implementing adaptation of web page to remote control keys on android intelligent set-top box |
| WO2018052461A1 (en) * | 2016-10-19 | 2018-03-22 | Intel Corporation | Vehicle broadcasting resources and transmission |
| US20190141377A1 (en) * | 2016-12-31 | 2019-05-09 | Turner Broadcasting Systems, Inc. | Publishing a plurality of disparate live media output stream manifests using live input streams and pre-encoded media assets |
| CN107991905A (en) * | 2017-12-25 | 2018-05-04 | 南京邮电大学 | A kind of analogue system of the multiple no-manned plane mission planning based on Web |
| CN110109659A (en) * | 2019-04-28 | 2019-08-09 | 广东三维家信息科技有限公司 | A kind of system that realizing front end applications scaffold and server |
Non-Patent Citations (2)
| Title |
|---|
| 毛炎: "基于Vue.js框架的Web方言地图的设计与开发", 《中国优秀硕士学位论文全文数据库（电子期刊）基础科学辑》 * |
| 贾丛丛: "基于MVVM的Web前端响应式框架的研究与集成", 《中国优秀硕士学位论文全文数据库（电子期刊）信息科技辑》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113242471A (en) * | 2021-05-25 | 2021-08-10 | 四川虹魔方网络科技有限公司 | Vue-based method for realizing preview component of television Launcher system web end |
| CN113242471B (en) * | 2021-05-25 | 2022-07-12 | 四川虹魔方网络科技有限公司 | Vue-based method for realizing preview component of television Launcher system web end |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108809972B (en) | Internet of things comprehensive experiment and application development platform based on open source ecosystem | |
| Pietzuch et al. | A framework for event composition in distributed systems | |
| CN102693104B (en) | Print system and image processing system | |
| CN103970526A (en) | Android based single-activity view switching technology | |
| CN102236709B (en) | Flex-based monitoring page display method and system | |
| CN100465882C (en) | Method and system of establishing culture sensitive control element for global application | |
| Rubio et al. | Programming approaches and challenges for wireless sensor networks | |
| CN102541549A (en) | Method and device for integrating television application modules | |
| Medvidovic et al. | Software architecture and mobility: A roadmap | |
| Radhika et al. | Middleware approaches for wireless sensor networks: An overview | |
| CN110602539A (en) | Vue framework implementation based on TV | |
| CN107222575B (en) | The method that OPC is communicated between realization industrial control equipment | |
| CN103677825A (en) | Multithreading universal data processing frame and establish method thereof based on Java | |
| Sacco et al. | Supporting the design of AAL through a SW integration framework: the D4All project | |
| CN102542365A (en) | Volunteer information management system | |
| Jha et al. | Design and implementation of network performance aware applications using SAGA and Cactus | |
| CN102611752A (en) | Realization method of supervision server (iTracker) through participating in peer-to-peer computing technology by telecom operator | |
| CN101324846B (en) | Method for creating data model according to ASN.1 information dynamic state | |
| Das et al. | Towards commercialization of utility-based resource allocation | |
| Avouac et al. | Service-oriented autonomic multimodal interaction in a pervasive environment | |
| Janciak et al. | Workflow enactment engine for WSRF-compliant services orchestration | |
| KR100929235B1 (en) | Dynamic Reconfiguration Method of Wireless Sensor Network and Its System | |
| Wizenty et al. | Design and implementation of a remote care application based on microservice architecture | |
| Geddes | The national grid service of the uk | |
| Mizuta et al. | Automation of Grid service code generation with AndroMDA for GT3 |
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 | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20191220 |
|
| WW01 | Invention patent application withdrawn after publication |