Background project learning: based on vue-element-admin

Don’t use vuex just to use vuex!

It turns out that you can simply add a unique key to the router-view to ensure that the hook is rerendered during route switching.

Background project is different from other projects, authority verification and security is very important, can be said to be a background project from the beginning must consider and build the basic core functions. All we need to do is: different permissions correspond to different routes, and the sidebar needs to be generated asynchronously according to different permissions.

After the user fills in the account and password, the server verifies whether the account and password are correct. After the verification is successful, the server returns a token. After the token is obtained (the token is stored in the cookie to ensure that the login status of the user can be remembered after the page is refreshed), The front-end will then pull a user_info interface based on the token to obtain user details (such as user permissions, user names and other information).

The user obtains the role of the user through the token, dynamically calculates the route to the user based on the user’s role, and dynamically mounts these routes through router.addRoutes.

Login idea:

Use the Element Form component to submit user and password information. To the background for verification, and obtain the token, save the token to the local cookie, ensure that there is no login when refreshing and opening the page again. The local cookie life cycle is customized as required.

A token Expires/ max-age is a Session, which is lost when the browser closes. Re-opening the browser requires re-login verification. The backend will also refresh the token at a fixed point every week, so that all background users can re-log in once to ensure that background users will not be arbitrarily used due to computer loss or other reasons.

It’s better to keep login and get_user_info separate.

Permission control:

The front end controls the page-level permissions. Users with different permissions display different sidebars and restrict the pages they can enter (a little button level permission control is also done). The back end verifies each operation involving requests and verifies whether it has the permission for the operation. Every backend request, no matter get or POST, will let the front-end carry the user’s token in the request header, and the back-end will verify whether the user has the permission to perform the operation according to the token. If there is no permission, a corresponding status code is thrown, and the front end detects the status code and performs corresponding operations.

The original addRoute did not use the entire permission control code is a variety of if/else logic judgment, the code is quite coupled and complex.

The VUe-Router is mounted when the Vue instance is created, but the Vue-Router mounts some public pages for login or non-permission purposes.

After the user logs in, the user obtains the role and compares the role with the required permissions on each page of the routing table to generate a routing table accessible to the end user.

Call router.addroutes (store.getters. AddRouters) to add a route accessible to the user.

Manage routing tables using VUEX, rendering sidebar components based on routes accessible in VUEX.

Use meta tags to identify the permissions that can be accessed on the page.

The code re-enters the router. BeforeEach hook and releases the hook with next() to ensure that all routes are hung.

The code basically does one thing: matches the user’s permissions with the permissions previously required for each asyncRouterMap page in router.js, and returns a list of routes that the user can access.

Sidebar:

The permission_routers calculated before were traversed and rendered dynamically via VUex. But there’s a lot of judgment here because there’s some business requirements like we’re going to add a lot of parameters when we define routes.

:default-active=”$route.path” :default-active=”$route.path” (The sidebar can be highlighted with the route)

There are not many places that really need button level control. At present, after obtaining the user’s role, v-if is used to distinguish the buttons corresponding to different permissions in the front end.

The actual layout page in a project is a layout.

The request interceptor inserts tokens in each request header to allow the back end to validate the request. And create a Respone interceptor, when the server returns a special status code, we do the same thing, such as no permission or token invalid operation.

The two authentications here are a bit misnomer, in fact, after the account password authentication also need a bound third-party platform login authentication. It is also very simple to write, in the original login logic to transform it.

We through the window. The opener. Location. Change the hash href way, in the login. With js and monitor the change of the hash. When the hash changes, the code returned by the third party after successful login and the UID returned after the first login are sent to the server for verification. If the code is correct, the login succeeds.

How does skin change come about?

Start by replacing the color-related CSS values in the default theme file with keywords.

Generates a series of color values based on the theme color selected by the user.

Replace the keyword with the corresponding color value you just generated.

Add the style tag directly to the page and fill in the generated style.

Self-realization of skin change:

A custom theme, element-theme, can be generated using the custom theme tool provided by Element.

You can also use the tools on the official website to customize the theme you need online, download and introduce.

Use gulp-CSS-wrap to add the same class to each element in the theme.

You can then switch themes by constantly switching classes in the namespace (adding or removing them), but it can be troublesome to customize multiple templates if there are multiple themes.

Load CSS dynamically: Dynamically add a link element under the head element to switch CSS using different href.

New skin change idea:

To be added.

Sidebar:

We built the sidebar, using recursive components.

That is, you use yourself in a component to form a recursive component.

The user clicking on the highlighted route doesn’t refresh the view, because vue-Router intercepts your route and determines that your URL hasn’t changed, so it doesn’t trigger any hooks or view changes.

Single page: A single page application (SPA), in layman’s terms, is an application with only one home page. The browser starts by loading all the necessary HTML, JS, and CSS. All page content is contained in this so-called home page. JS will perceive the change of the url, through this, you can use JS dynamically remove the contents of the current page, and then the next page will mount to the current page, the content of the routing is not for this time of the back-end to do, but the front end, determine the page exactly which component is to display, remove unwanted, according to need of components. This process is a single page application, and no HTML files need to be requested for each jump.

Multi-page: each time the page jumps, the background server will return a new HTML document, this type of site is also called multi-page site, also known as multi-page application.

Here is mainly based on Sortable to achieve drag table content effect.

Due to JavaScript limitations, Vue cannot detect the following changes in the array: * When you set an item directly using an index. Use the Slice method on the array prototype object to trigger the array change, which in turn triggers the View layer change.

View updates are triggered by splice replacing data.

The assigned data is an OBjeC reference type that shares a memory region. So instead of waiting for a copy, we need to redirect to a new reference.

When keep-alive wraps dynamic components, it caches inactive component instances rather than destroying them. It is an abstract component: it does not render a DOM element on its own, nor does it appear in the parent component chain. Reduces memory and request time, providing efficiency.

The output data is actually rendering the DOM based on the data returned in real time in the background, such as the select option.

The official state states that all native events must have the.native modifier.

Scoped is not mysterious either, it is based on PostCss and adds the concept of an office.

Since the element-UI style was introduced globally, you can’t add scoped if you want to cover the style in a view, but if you want to cover only the element style in the page, you can add a class to its parent to solve the problem with namespaces.

Give a tip Most weird problems can be solved by adding a key or vue.nexttick.

If your business needs do not have any requirements on the format of the exported file, it is not recommended to export the file to XLSX format, directly export to CSV, really much simpler. Create an A tag and say data:text/ CSV; Charset = UTF-8 header, insert the data, encodeURI(csvContent), and that’s it.

* * * * * * * * * * * * * * * * * * * {handler(options){this.chart.setoption (this.options)}, deep: true},} {seriesData(val) {this.setoptions ({series:val})}}

Create and edit pages cannot be cached by keep-alive because keep-alive includes do not support caching by route, so they are cached by component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or instead of using keep-alive include, cache all pages directly.

Most page creation and page editing fields and UI are pretty much the same, and you can have a Component for different pages. Compare recommendations by meta. You can also write different Components to route to different pages.

Routing lazy loading should be a common feature for larger projects, where the component is loaded only when it is used. This writing greatly reduces the size of the original page JS and makes better use of the browser cache.

Maybe the cache of webpack is invalid because of asynchronous loading, so the rebuild is so slow.

Since sidebar navigation and breadcrumbs or permissions are closely related to the Router, a small extension was made to the Vue-Router routing information object to customize some attributes.

Configuring ESLint can be of great benefit to multi-player projects, while configuring Lint to write code with ide plugins can take off.

The PostCSS plug-in parses CSS and adds vendor prefix CSS rules using values from Can I Use.

PostCSS (platform for CSS processing services) provides a parser that parses CSS into abstract syntax trees (AST).

Just import the style you want in the.vue file, or you can change the vue-cli file and add a postCSs-loader in front of the CSS-loader.

Engineering stuff: Packaging tool – WebPack, configures a series of plug-ins and loaders for packaging projects.

By default, Babel only converts new JavaScript syntax, not new apis, such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise, etc. And some methods defined on global objects (such as Object.assign) do not transcode.

Or more simply, polyfill. IO uses a CDN address given by it. After introducing this js, it will automatically judge the browser and load the missing part of polyfill.

Cross Origin Resource Sharing is the recommended cross-domain solution. The backend needs to cooperate.

The front-end solves cross-domain problems. The principle of proxy and Nginx is the same. By building a forwarding server to forward requests, the cross-domain problems can be avoided. (Server has no cross-domain issues)

The AXIos interceptor intercepts the sending and returning of requests.

New in version 4.0:

This update basically migrates the previous Webpack configuration based on webpack-chain, since vue-CLI does a lot of default configuration for you, so you can save some code.

The implementation logic and principle is the same as before, and is based on plugins babel-plugin-dynamic-import-node. (Lazy loading)

The reason you only need to set one variable in vue-CLI is that it borrows the default configuration of vue-cli, which helps you write your code. Vue-cli uses the environment variable VUE_CLI_BABEL_TRANSPILE_MODULES to distinguish between babel-plugin-dynamic-import-node and babel-plugin-dynamic-import-node.

When you need to refresh the page, you manually redirect the page to the 'redirect' page, which redirects the page back. This indirectly redirects the page components because the key has changed. (Uses an indirect page to jump to)

Mockjs overrides the browser’s XMLHttpRequest object to intercept all requests and proxy them locally.

I recommend you install a Snippets VS Code plug-in like Vue 2. This kind of code fragment can improve a lot of development efficiency in daily work.

Asynchrony is used in some places

Async /await instead of promise.

You can add the immediate attribute so that the Watch fires when you initialize it.

We can use v-bind=”$attrs” for all attributes and v-on=”$listeners” for all methods.

In order to optimize, image Sprite is the so-called Sprite image, which is to synthesize multiple images into one image and then display different icon ICONS by using CSS background-position positioning.

The main principle is the same as Unicode, but it goes one step further, replacing the previous  notation with.icon-qq, which writes Unicode in the before attribute of each class, eliminating the need for manual writing. Ex. Icon-qq :before {content: “\e604”; }.

You can’t guarantee that all of your SVG will be used as ICONS, and some may actually be used as image resources.

There is no guarantee that some of the third party libraries you use will use SVG.