abstract
Through the research of Vue.js, routing, global state, axios and other technologies, the background single-page application management system is realized. Encapsulate the actions and define the relevant request information in the configuration file to implement the action with the background API request, greatly reducing the amount of system code, and ensuring the system's uniformity and robustness. The front-end page controls the entry of the page file according to the menu policy, and performs button-level permission verification according to the page permission control policy.
Keywords: Vue.js; MVVM; single page application; rights management.
introduction
In order to meet the increasingly complex and diverse Web App requirements, more and more business logic of the original back-end processing has begun to be transferred to the front-end for processing. Vue.JS is such a progressive framework for building user interfaces that facilitates the migration of most back-end logic to the front end. Vue.JS uses a bottom-up incremental design, and its core library focuses only on the view layer. It is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when Vue.JS is used in conjunction with a single file component and its library supported by the Vue.JS ecosystem, it is also fully capable of providing drivers for complex single-page applications. Therefore, Vue.JS is used to design the front-end of the background management system, which will reduce the development difficulty of front-end developers.
System key component selection
The front-end engineering of this system is based on the requirements of streamlined process, low cost, rapid development, high performance, etc., mainly used to key components such as Vue.JS, vue-router, vuex, axios.
Vue.JS is the basic view layer framework for the entire front-end project, which mainly solves the problem of front-end data binding. Traditional front-end development, based primarily on jQuery, operates DOM through a variety of complex selectors. At the same time, through AJAX and the server to request data, the front-end code parses the JSON layer by layer, assigns a certain level of JSON data to the corresponding DOM operation, and also performs the exception handling of the request. The data is not only complicated and complicated, but also prone to unknown errors. Through Vue.JS's responsive two-way binding data, real-time reflection of the real change of data and mapping to the target virtual DOM, avoiding the complicated operation of the DOM selector in the front-end page development, simplifying the web front-end development process and reducing the open difficulty and improving Front-end development efficiency, reducing development costs and cycles.
Vue-router is a routing plugin officially released by Vue.JS. It is deeply integrated with Vue.JS and is suitable for building single-page applications. The traditional page application uses some hyperlinks to implement page switching and jumping. In the vue-router single-page application, it is the switch between the paths, that is, the switching of components. The page component is dynamically mounted by the router-view and finally rendered into a page. In addition, HTML5 introduces a new API, history.pushState and history.replaceState, which can change the page URL without refreshing the page through this new interface, which allows Vue.JS to dynamically adjust the page path for page switching. , improved user experience.
Vuex is a set of global state management solutions implemented by Vue.JS in accordance with Flux, and is integrated into vue-devtools, enabling time travel debugging in the browser without configuration. When developing a single-page application, we usually store the state inside the component. Each component has its own state management, but at the application level, many public states are scattered across pages. At the same time, we often need to share part of the state to multiple components. A common solution is to use an event system to let a component "inform" some state to other components to let the corresponding component respond to changes. However, the problem with this model is that the flow of events in a large component tree can quickly become very complicated, and it is difficult to find out exactly what went wrong when calling. The bubbling of the event is likely to cause the resource consumption of the entire application to be very high. Big. Applications are getting bigger and bigger, the number of page files is increasing, and multiple states are scattered across many components and interactions, and their complexity is often increasing. Use vuex to put the state into a global instance, so that each component responds synchronously, reducing system state complexity. However, when using global state management, we also need to distinguish between component component local state (componentlocalstate) and application level state (application levelstate) to avoid component local state to be applied to the application level state for management. The application-level state does not belong to any particular component, but each component can still monitor its changes to responsively update the DOM. We solved the page switching problem with vue-router. We solved the problem of global state sharing management through vuex, but the basis of all applications is data. Traditional data requests are mainly implemented using JQuery-encapsulated AJAX requests. When dealing with asynchronous problems, the callback callback is generally used. The callback callback has a very serious pyramid problem - a state in which a large number of callback functions slowly extend to the right screen. By using Promise-enabled components to enter AJAX requests, we can implement asynchronous request operations in synchronous code. Axios is such an HTTP client based on Promise for browsers and nodejs. It can create XMLHttpRequest from the browser, support Promise API, and facilitate middleware operations in the request process, such as permission checking.
The whole front-end project is summarized, mainly using vue as the basic view layer framework, using vue-router to complete the jump of front-end page routing and various access interception functions, using axios as the HTTP request library, and using vuex to be responsible for the global state management of the front-end. Use iView as the interface component library.
How Vue.js works
Before introducing the principle of Vue.js, I will introduce a few concepts. Observer is essentially a data listener. It goes without saying that it acts as a listener. For all the properties in the data object, it can listen to it, telling the subscriber which properties have changed and what changes have occurred. For the instruction parser Compile, it scans the instructions in Vue.js and parses and compiles the scanned instructions. Watcher is equivalent to a coordinator. Its main function is to establish a connection between Observer and Compile. It can not only receive the property change notification from Observer, but also play a scheduling role and execute the corresponding command binding. Callback function to update the view.
When an object is created in Vue, an initialization process is first performed for the object. During the initialization process, Observer will always listen to all the properties of the object, and Compile will scan the instructions in the web page, compile the scanned instructions, and initialize the view. Watcher will add a subscriber to Dep.
When the system is running, the Observer listener will get the property change and notify Dep. In Dep, it will find the subscriber corresponding to the property object, and send a change notification to the Watcher who added the subscriber, so as to correspondingly view the view. Update.
Comparison of Vue.js and React.js
React.js was originally a project of Facebook itself. The front-end framework was based on the traditional MVC model, but the traditional MVC was difficult to meet the requirements of Facebook. Because the project was a very large project with very complicated logic structure and quite a lot of program code, React.js was born. First of all, Vue.js has many similarities with React.js:
1. Use Virtual DOM.
2. Provides a responsive (Reactive) and componentized (Composable) view component.
3. Focus on the core library, along with the accompanying routing and libraries responsible for handling global state management.
This article focuses on comparing the differences between Vue.js and React.js, and by comparing the advantages of Vue.js, so the similarities are not repeated here.
For the difference between Vue.js and React.js, the author compares with a small example. When we render the user interface, in order to reduce the operation of Dom, React and Vue all implement this requirement through the Virtual Dom abstraction layer. In addition to the necessary Dom operations, it is necessary to reduce the consumption of other functions, such as some page operations. Wait. This is the difference between Vue and React. To prove this, we created a simple reference project that is responsible for rendering 10,000 list items 100 times.
In order to obtain the experimental results objectively, the author performed the experiment project twenty times and obtained the best results from their respective operations. It can be clearly seen from the running results that the unoptimized Vue is much faster than the unoptimized React. Because Vue has improved rendering performance, even fully optimized Reacts are usually slower than out-of-the-box Vue.
Rendering performance is only one of the powerful features of Vue. Compared with other front-end libraries, Vue has many features. First of all, Vue.js is a lightweight front-end library that is easy to use and can be learned by novices for too much time. . For DOM updates, Vue uses asynchronous batch processing, so it's very fast, and it can also combine each component in a series, which greatly improves the decoupling and reusability of the program.
Architecture design
The entire back-end single-page application management system is divided into two projects: front-end engineering and back-end engineering, and the front and back ends are combined in the form of API interfaces. In the front-end project, components are used as the storage directory of the individual page components, and pages are used as the storage directory of the system pages. All the code related to the global state management is stored in the store directory, and the code related to the routing configuration is stored in the router directory, and the general configuration file is used. Stored in the common directory. Usually, when you do a store design, all the actions are concentrated in the action.js file, which contains the code for the background api request via axios. When the background single-page application system development is carried out, the data communication will be frequently carried out with the background. Therefore, it is considered to divide the action into two types, one is without the background API request, but the simple front-end operation, and the other is always included. Background API request, data communication with the background. According to past experience, about 2/3 of the actions involve background API requests, so some form of code is needed to reduce duplicate request codes. After thinking about the above problems, you can reduce the amount of code in the system by ensuring uniformity of requests, especially the uniformity of request exceptions.Declare the names of all actions in common/mutation-types.js, such as: export const BACKEND_LOGIN='BACKEND_LOGIN', which defines an action for BACKEND_LOGIN.Declare all actions involving background API requests in api/config.js and configure their request addresses, etc., in the following format: api[BACKEND_LOGIN]={url:''
method:'get',pathinfo:true|False,noMutation: true|false}. The key of the object is the constant of the mutation-type, the url indicates the path of the request, the method indicates the way of the request, the pathinfo indicates whether the requested url parameter is added to the requested path by pathinfo, and the noMutation indicates whether to ignore the commit operation. Yes, some of the data requested by ajax is not a global state, but a state of some page level, so there is no need to perform global state management on the requested data.In api/helper.js, declare the createAPIRequest method, which accepts three parameters: commit, type, param, where commit is a method, the commit operation of the mutation, type is a specific mutation-type (name of the action) , param is the request parameter that needs to be passed in. The api request configuration for this type can be obtained from api/config.js via the type passed in. According to its configuration, the corresponding background api request is performed, and according to the noMutation in the configuration item, it is identified whether the commit operation needs to be performed, and finally a Promise instance is returned, so that we can implement various asynchronous operations in the form of synchronous code.
In addition, when designing the front-end system, it is also necessary to consider the permissions of the entire system. In the background application, the user rights are mainly authenticated according to RBAC in the middleware. In the front-end page, the user rights are controlled in three levels: the first layer is mainly the control of the user portal, and the performance is: according to the user role, the menu list that the user can access is obtained. The second layer is mainly to identify the rights when the user accesses the page. In the global hook of the router, according to the permissions of the user role, to identify whether the user has the right to access the page, if there is permission, then next (), otherwise, directly redirect the user to the 401 page. The third layer, when the user only has access to the page permission, but does not have the operation permission, the packaged hasPermission method dynamically displays or hides the relevant operation entry, and can also show or hide the relevant data column according to the actual request.
Deployment implementation
Separation of the front and rear ends ensures the independence of the front and rear ends. For front-end projects, use webpack packaging to generate front-end code in the build environment. For the back-end project, you need to package the corresponding production environment application according to the specific development environment. When the front-end and the end are separated and released, the cross-domain problem is often encountered. In order to reduce the code-level modification actions, Nginx can be used to perform reverse proxy, and the two projects are deployed in a domain name to solve the cross-domain problem. . The following is a Nginx configuration file with a PHP application as an example. The main idea is to forward the request to the front-end page to the front-end static page, and the front-end vue-router performs page routing control.
Conclusion
This paper mainly describes the design of the back-end single-page application system based on Vue.JS from three aspects: component selection, system structure design and deployment implementation. The encapsulation of related components and the development of leading functions in the form of configuration reduce the front-end development workload of the back-end system to a certain extent. Utilize the two-way binding feature of Vue.JS to efficiently reflect data to the page model, while Vue.JS handles page DOM operations more efficiently and improves the performance of background applications.