Abstract
With the development and iteration of front-end technology, front-end development engineers have introduced front-end MVC, MVP, MVVM and other architectural models based on the Java MVC framework. Using the current mainstream front-end development technologies, such as React, AngularJS, etc., we can It is very easy to build a WebApp that can be displayed without server-side rendering. At the same time, these frameworks also provide front-end routing functions. The background can no longer control the routing jumps, and throw all the business logic that originally belonged to the background to The front-end achieves the separation of front-end and back-end architectures, which is also the most popular and used development method in recent years.
The official release of Vue2.0 in 2016 caused an uproar among front-end development engineers. Vue's quick response mechanism, data binding mechanism, component development, etc., are particularly prominent in terms of function and efficiency. This article uses the latest The advanced front-end model architecture combines JavaScript, Vue-Router, DOM, axios, vuex, Muse-UI (a material design style UI framework based on Vue2.x) and other front-end core development technologies on the basis of the MVVM model. Front-end development of a mobile music player.
The music player in this paper adopts the development mode of WebApp, and uses the new features provided by the HTML5 language and the new technology of Vue to write the player. At the same time, it gives a detailed system design process, part of the interface diagram and the flow chart of the main function operation. This paper also discusses the problems encountered in the development process and the solutions in detail. Technology to realize music playback, pause, stop, previous song, next song and lyrics display, playback progress bar and other functions in one, with good performance. One of the most important advantages of WebApp developed in HTML5 mode is that it can run independently in various systems, unlike Android and iOS, which can only run on their own platforms, achieving true cross-platform development. Realized one-time development and multi-platform use.
关键词：音乐播放器，HTML5，Vue，MVVM，webpack
Abstract
With the development of the front-end technology and iterative development engineer in MVC based on the framework of Java, launched in front of MVC, MVP, MVVM architecture, using the current mainstream technology development, such as React, AngularJS and so on, we can easily construct a server-side rendering can display WebApp, the framework also provides front-end routing function, the background can be no longer to control the routing of the jump, the business logic originally belonging to the background all thrown to the front, do before and after the end of the architecture is separated, which is the most popular in recent years and the use of development tools.
In 2016, Vue2.0 officially released, it caused a great disturbance between the front-end development engineer, rapid response mechanism of Vue, data binding mechanism, component development, the function and efficiency of the front-end architecture is particularly prominent, through the most advanced mode of combination of JavaScript, Vue-Router, DOM, Axios, vuex, Muse-UI (a based on the material design style UI framework Vue2.x) core technology for the development of the front end, on the basis of MVVM, to complete the front-end development of a mobile music player.
The music player using the WebApp development model, new technology and new characteristic of Vue and using HTML5 language to provide for the player to write. It also gives the flow chart of the system design process with the change and part of the interface diagram and main function, this paper also encountered in the process of development problems and Solutions were discussed in detail, the music player play, pause, stop, on the one, the next song, lyrics display and other functions, good performance of.WebApp as well as its most important advantage is that in various systems it can run independently, unlike Android and iOS as platform to run only in their the achieved true cross platform development, to achieve a multi platform development.
Key words: music player, HTML5, Vue, MVVM, webpack
1 Preface
1.1 Background of topic selection
With the continuous development of computer technology, mobile Internet is more and more widely used in life, especially multimedia technology is applied in our life To more, which makes our spare time more and more rich.
As a mobile music player, there are many types in the market, such as: Kugou, QQ Music, Baidu Music, etc. These are some very good players. For the mainstream mobile devices in the market, they are mainly divided into two types. One is the iOS system based on Apple's equipment, and the other is the Linux-based free and open source operating system Android developed by Google. Therefore, in the development process, it is necessary to develop two apps that match these two devices, which undoubtedly increases the workload of development and consumes more development time.
This music player designed with Vue uses the development technology of HTML5, which achieves a truly thorough cross-platform development, realizes the development of multi-platform applications at one time, greatly shortens the development process and improves work efficiency.
1.2 The development status and trend of HTML5
The fundamental reason why HTML5 can cause such a wide range of effects is that it is not just a markup language. It provides a new framework and platform for the next generation of the Internet, including providing plug-in-free audio and video, Image animation, ontology storage, and more cool and important features, and standardize and open these applications, so that the Internet can easily achieve a desktop-like application experience.
The most significant advantage of HTML5 is cross-platform. It can be easily transplanted to various open platforms and application platforms, breaking the fragmented situation. This strong compatibility can significantly reduce development and operation costs, and enable enterprises, especially entrepreneurs, to obtain more development opportunities.
In addition, the local storage feature of HTML5 also brings more convenience to users. The light application developed based on H5 has shorter startup time and faster networking speed than the local APP, and does not need to download and occupy storage space, which is especially suitable for mobile media such as mobile phones. H5 allows developers to create advanced graphics, layouts, animations, and transition effects without relying on third-party browser plug-ins, which also allows users to enjoy cool visual and auditory effects with less traffic.
In China, Internet companies such as Tencent, Alibaba, Baidu, and Sina have also begun to convert their products to HTML5, and as Apple's iOS system no longer supports flash, it has made H5 technology a big hit. In 2014 On October 29, the specification of HTML5 was completed. Up to now, the popularity of HTML5 has been widely accepted by people. About 90% of the websites are using HTML technology, and on the mobile side, basically all of them are HTML5. world.
1.3 Purpose and Significance
The purpose of this graduation project is to combine the advanced ideas provided by HTML5 and the various media control methods, combined with the idea of separation of front-end and back-end architectures, and use Vue.js, a new front-end technology, to develop a According to the player's habits and requirements for media players, we designed a music player that meets the user experience, has a clear interface, is easy to operate, can load multiple multimedia files in the playlist, and can achieve continuous playback. The significance of this software development is that with the continuous expansion of javascript syntax, the responsibility of the front-end designer is not only to do some simple page implementation, but also to handle various complex business logic more efficiently. Transition to engineer. Let the various technologies of front-end development be continuously applied to the development of various mobile Internet.
2 Introduction to related technologies
2.1 Introduction to Vue.js
Vue.js is a progressive framework for building data-driven web interfaces. The goal of Vue.js is to enable responsive data binding and composed view components with the simplest API possible. Different from other frameworks, Vue.js adopts the design of bottom-up incremental development. Its core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. On the other hand, Vue.js is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue.js ecosystem.
2.1.1 Simple and lightweight Vue.js
Vue.js is a very lightweight library, the source code of its production version is only 72.9KB. According to the official website, the gzip-compressed source code is only 25.11KB, half that of AngularJS's 144KB, and the use of Vue.js does not depend on other basic libraries. And Xiaoqiao also brings it another benefit, that is, it allows users to choose the corresponding solution more freely, and it brings users more space in terms of cooperating with other libraries.
2.1.2 Plug-in of Vue.js
Although Vue.js is small and exquisite, it is "small but has all internal organs". When building large-scale applications, Vue.js is also handy to use. For example, the core of Vue.js does not include functions such as Router, Ajax, and form verification by default, but if you need to use functions such as Router, Ajax, or form verification in your project, you can directly use the official library Vue-router provided by Vue.js And the third-party plug-in Vue-resource (after version 2.0, the official recommendation is to use axios, which is used in this paper), or plug-ins such as Vue-validator to complete the functions you want, and you can also use other The library or plug-in you want to use, such as jQurey's Ajax, etc., these Vue.js can be well compatible.
2.1.3 Componentization of Vue.js
In large-scale applications, for the sake of division of labor, reuse and maintainability, we inevitably need to abstract the application into multiple relatively independent modules. In the more traditional development mode, we only make a certain part into a component when we consider reuse; but in fact, the application UI can be regarded as completely composed of component trees, so the design of Vue.js Taking components as a core concept, it can be said that every Vue.js application is developed around components. This can be said to be one of its highlights and one of the most respected and powerful functions of Vue.js. Its core goal is to achieve high reusability and reduce repetitive development. We can put the component code into the corresponding .vue file for management according to the template, style, and script splitting methods, which greatly improves the reusability and maintainability of the code.
2.1.4 Two-way data binding of Vue.js
Another powerful function of Vue.js is its two-way data binding mechanism. It is very convenient for Vue.js to handle some rich interaction and state machine-like front-end UI interfaces. , Simple and fast, it associates data with views, and when data changes, views can be automatically updated.
2.2 Introduction to MVVM mode
MVVM is the abbreviation of Model-View-ViewModel. When it comes to MVVM mode, I have to mention the MVC mode. MVC is one of the most widely used software architectures. The general MVC is divided into: Model (model) , Controller (controller) and View (view). This is mainly based on the purpose of layering to separate the responsibilities of each other, as shown in Figure 2-1.
Compared with MVC, MVVM just changes the MVC Controller to ViewModel, the changes of View will be automatically updated to ViewModel, and the changes of ViewModel will also be automatically synchronized to View for display. This automatic synchronization is because the attributes in the ViewModel implement Observer, which can trigger corresponding operations when the attributes change, as shown in Figure 2-2.
The MVVM pattern is the same as the MVC pattern, which mainly separates the View (View) and the Model (Model). It mainly has the following four advantages.
reusability. You can put some view logic in the ViewModel, so that many Views can reuse this view logic. For example, there are iPhone and iPad versions in iOS. Except for the different interactive display, the business logic model is the same. In this way, we can develop another app at a very small cost.
Low coupling. The view (view) can be changed and modified independently of the model (Model). A ViewModel can be bound to different "Views". When the View changes, the Model does not need to change, and when the Model changes, the View can also remain unchanged.
Independent development. Developers can focus on business logic and data development (ViewModel), designers can focus on page design, and use Expression Blend to easily design interfaces and generate xml codes.
Easy to test. Under MVC, the Controller is basically untestable. It is mixed with various logics and scattered in different places. With MVVM, we can test the viewModel inside to verify that our processing results are correct.
3 System Analysis
3.1 Feasibility Analysis
The purpose of the feasibility study is to find out whether the project to be developed is achievable and worthwhile. This work is usually done by specialized system analysts and requires other Write a feasibility study report. If the conclusion is that the project is feasible, then the implementation plan of the project can be formulated and software development can be started at the same time; if the conclusion is that the project is not feasible, a proposal to terminate the project should be put forward. Feasibility demonstration is actually a simplified demand analysis and design at another level. But its purpose is not to solve the problems raised by users, but only to determine whether this development is worthwhile and analyze some of its possible risks. In other words, research the possibility of project success before investing a lot of energy to reduce the possible risks of the project. Even if the research concludes that it is not worthwhile, the effort expended is not wasted because it avoids a greater waste. Below we will conduct the following feasibility analysis according to the characteristics of this system.
3.1.1 Economic feasibility
The purpose of developing an APP is mainly to obtain better economic and social benefits, so the demonstration of the economic feasibility of developing an APP has become an important content of the feasibility study. The cost-to-benefit analysis can be used to evaluate the economic rationality of the system, and then give an estimate of the development cost, and compare the estimated cost with the profit obtained, and demonstrate whether the software to be developed is feasible from an economic point of view. Generally speaking, The cost in development mainly includes the following four types:
1) The cost of purchasing and installing software, hardware and related equipment.
2) Software development costs.
3) The cost of software installation, operation and maintenance.
4) Training costs for personnel.
Combined with the entire development process of the graduation project, it can be seen that all the software and platforms used in the software development are free, so it is completely feasible economically.
3.1.2 Technical Feasibility
Technical feasibility is an important part of feasibility study. Since the process of system analysis and definition is carried out simultaneously with the process of system technical Feasibility demonstrations pose many difficulties. Therefore, the technical feasibility study is often the most difficult work in the system development process. The music player is developed by Vue.js, it is relatively simple to debug, and the required computer hardware configuration is not high, and a general PC is sufficient to meet the development requirements. In terms of software, we use a real cross-platform editor visual studio code developed by Microsoft. This editor is easy to use and mature in technology. It also provides rich plug-ins and supports the use of Git, and the software is also easy to download from the Internet. Obtained, can fully meet the development needs.
3.1.3 Legal Feasibility
Legal feasibility mainly studies whether the development and use of the new system will violate the rights and interests of others, and whether it will violate the laws and regulations of the country. This graduation project was completed by myself independently. The developed system will not infringe anyone's rights and interests, and the software used is also obtained through legal channels, so it fully complies with laws and regulations.
To sum up, the development of this system is completely feasible economically, technically and legally.
3.2 Software requirements analysis
Software requirements analysis refers to the user's expectations of the target software in terms of performance, function, behavior, and design constraints. Requirements analysis is the process of gradually refining, unifying, and perfecting user requirements through the understanding and analysis of application problems and their environment, using a series of analysis methods and technologies, and finally forming a requirement scale specification document. This section will describe the software requirements from different angles.
