Writing in the front

Recently, I came up with the idea of developing a background management system to try it out (in fact, I saw vue-element-admin). As soon as I said it, I started to directly choose the technology, basic function requirements of the page, implement functions, and project optimization.

Technology selection

The general direction must be vue+vuex+ VUE-Router + Axios to build, tangled between vue2+ Webpack and vite+vue3, and finally gave up. (Ha ha ha)

1. Selection of UI components

When I wrote this project, Element-Plus had not yet been released. Another reason was that I was disgusted at the interview and kept asking if you could use iView. When I said I could use Element-UI, he said no, I had to know iView

Since I usually use Element-UI in my projects, I used Ant-Design-Vue as the UI component library considering that I might write another version with VUe3 later. Meanwhile, I also came into contact with Ant-Design-Pro, and got a lot of inspiration.

2. Data simulation

Use mock to simulate data, set up the mock-serve service reference vue-element-admin, and change the address directly after mock

3. Code formatting

Use ESlint+prettier for code beautification and code detection

Unit testing

Unit tests use JEST for testing.

5. Project construction

I originally planned to use webpack built by myself, but after using it, I found that vuE-CLI4 was not as good as VUe-CLI, so I gave up. I used VUe-CLI4 to build the project, and those commonly used AXIos encapsulation and so on. This website is a lot of, add the page base directory.

├ ─ ─ the mock simulation data - the mock ├ ─ ─ public - static resource file ├ ─ ─ the SRC │ ├ ─ ─ the API interface - │ ├ ─ ─ assets - pictures │ ├ ─ ─ components - reusable components vue │ ├ ─ ─ Layouts - layout │ ├ ─ ─ the router - routing │ ├ ─ ─ store - vuex │ ├ ─ ─ styles - sass styling │ ├ ─ ─ utils - method function │ ├ ─ ─ views - │ a page ├ ─ ─ App. Vue │ ├ ─ ─ the main, js │ ├ ─ ─ permission. Js - routing intercept ├ ─ ─ tests - unit test file ├ ─ ─ the browserslistrc ├ ─ ─ the env ├ ─ ─ the eslintrc. Js ├ ─ ─ Babel. Config. Js ├ ─ ─ the jest. Config. The configuration of js - jest ├ ─ ─ package. The json ├ ─ ─ package - lock. Json ├ ─ ─ the README. Md └ ─ ─ Vue.config. js -- Webpack configurationCopy the code

The functional requirements

1. Verify permissions

As a background management system, route permission verification is a must. Generally, there are two ways to dynamically add routes

The first is the front-end control route. A role field is added to each route, and the specified route is filtered by the user’s corresponding role permission.

The second is that the back-end returns the route and the front-end adds it.

I’m using the first one here, partly because it’s not so off-stage, and partly because it’s completely at the back end, you want to add a page and you have to configure it on the back end before you can use it. The main method for dynamically adding routes is as follows

vue-router

AddRoutes method of.

2. The home page (dashboard)

This is also naturally needed for some system data summary, through some Echarts diagrams, can quickly understand the overall system.

3. Basic layout

Here I use the common admin system layout around the layout and up and down two

4. The error page

To prevent system error, jump to the corresponding page, such as 404 page, these ANTD have, we can directly use

5. Rich text and Markdown

These background management systems will be used in general.

6. Table and Form

Background management systems generally have tables and forms, so here also have to add a table.

7. Personal Settings and system Settings page

This mainly refers to the Ant-Design-Pro system. All permissions on the personal Settings page can be viewed, while only admin can view system Settings, and users can add, delete, change, check and modify the route menu permissions of corresponding users

Other 8.

The other ones are some common ones.

Login page: want to set the user name password login and mobile phone number verification code login.

Icon on the page

Map page: HERE I added the map, using the openLayers and ArcGIS maps I usually use

Echarts page: HERE I am thinking of adding echarts in various forms, such as bar charts, line charts, pie charts, diagrams, maps, word clouds and other Echarts, and maybe 3D echarts later.

Some other components

The UI design

Because it is a cut figure son, let me cut figure is also ok, UI design can be really difficult for me, so here to thousands of graph network to download, ordinary users can download once a day, new users send a few days of VIP, can download 20 times a day, white piao a wave.

Component packaging

1. The SVG icon

This is a vue-elemental-admin wrapper, which you can load on demand based on the name of the SVG wrapper. To prevent iconfont loss and other problems, here directly take vue-element-admin to use, slightly modified under.

src/components/svgIcon/index.vue <template> <svg class="svgClass" :style="{ fontSize: size + 'px', color: color }" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'svgIcon', props: {icon: {type: String, required: true}, color: {type: String, default: 'rggba (0, 0, 0, 0.65); ' }, size: { type: Number, default: 16 } }, computed: { iconName() { return `#icon-${this.icon}`; }}}; </script> <style scoped> .svgClass { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; outline: 0; } </style> src/icons/index.js import Vue from 'vue'; import Vue from 'vue'; import Vue from 'vue'; import svgIcon from '@/components/svgIcon'; Vue.component('svg-icon', svgIcon); const req = require.context('./svg', false, /\.svg$/); const requireAll = requireContext => requireContext.keys().map(requireContext); requireAll(req);Copy the code

2. Loading encapsulation

Some common loading wait animations are encapsulated here, in the form of custom instructions and pass methods.

First, we need to create a loading component, and then write the basic style, mask layer, etc. The loading animation in the middle is considered for some time. For the time being, we write a component for each animation, and use the spin name to switch the component.

Later, I found that I could use SVG to load animation rendering, but I had to learn it first and change it later

To enable loading, add this file, and register this loading globally

Start loading

import Vue from 'vue'; import loadingComponent from './index.vue'; const loadingConstructor = Vue.extend(loadingComponent); const instance = new loadingConstructor({ el: document.createElement('div')}); instance.show = false; const loading = { show(options) { instance.show = true; let el = document.body; if (options) { const { text, textColor, background, spin } = options; if (options.el) { el = options.el; } if (text) { instance.text = text; } if (textColor) { instance.textColor = textColor; } if (background) { instance.background = background; } if (spin) { instance.spin = spin; } } el.appendChild(instance.$el); }, hide() { instance.show = false; }}; export default { install() { if (! Vue.$loading) { Vue.$loading = loading; } Vue.mixin({ created() { this.$loading = Vue.$loading; }}); }}; This $loading. The show ({spin: 'loading', / / optional parameter loading, pulse, the rect, plane, cube, preloader, chase the text: 'is being loaded... ', //loading text textColor :' #3ff9dc', // textColor, background:'rgba(0,0, 0.07)' // mask layer color});Copy the code

Example Add the user-defined v-loading command

The main methods of custom directive include bind and update

import Vue from 'vue'; const startLoading = (el, bind) => { if (bind.value) { const full = el.getAttribute('loading-full'); const text = el.getAttribute('loading-text'); const textColor = el.getAttribute('loading-textColor'); const background = el.getAttribute('loading-background'); const spin = el.getAttribute('loading-spin'); const target = full ? document.body : el; Vue.$loading.show({ el: target, text, textColor, background, spin }); } else { Vue.$loading.hide(); }}; export default { bind(el, bind) { startLoading(el, bind) }, update(el, bind) { startLoading(el, bind); }};Copy the code

3. The table table encapsulation

After using ANTD’s table table, I found a big difference from Element-UI. I was not used to it at the beginning, so I referred to Ant-Design-Pro’s table table for packaging

4. The scroll bar

Since I am used to elder-ui’s el-scrollbar, but antd does not have a scrollBar component, I will go to the source code of elder-ui to separate out the scrollBar component

5. Echarts Resize event stabilization package

Since echarts resize event will execute n times per second, consuming a lot of resources, we use the anti-shake event here to reduce resource consumption. For convenience, we encapsulate the resize method, which can be directly mixin when using

I didn’t know I could do this until I saw vue-element-admin

Import {debounce} from '@/utils/index.js'; import {debounce} from '@/utils/index.js'; export default { data() { return { myChart: null, resizeHandler: null }; }, mounted() { this.resizeHandler = debounce(() => { if (this.myChart) { this.myChart.resize(); }}, 100); this.initResizeEvent(); }, methods: {// listener resize initResizeEvent() {window.addeventListener ('resize', this.resizeHandler); {}, / / remove the resize destroyResizeEvent () the window. The removeEventListener (' resize, enclosing resizeHandler); } }, beforeDestroy() { this.destroyResizeEvent(); if (! this.myChart) { return; } this.myChart.dispose(); this.myChart.off('click'); this.myChart = null; }, activated() { this.initResizeEvent(); if (this.myChart) { this.myChart.resize(); } }, deactivated() { this.destroyResizeEvent(); }Copy the code

The last

Now that the prototype of the project initialization function has been completed, and some of the components that will be used have been wrapped up, you can begin to finish the page happily. The address is below, if you are interested

Project address: github.com/biubiubiu01…

Project screenshots

Other articles

  • Viii. Using VUE + ANTD to build background Management System (Implementation)

  • Vii. Using VUE + ANTD to build background Management System (Requirements Analysis and Construction)

  • Vi. Try a new VERSION of Vue3.0

  • V. Remember to build a VUE project with Webpack once

  • Remember to refactor the project with TS +vuecli4 once

  • Echarts+Amap to achieve the click drilling function

  • Vue keep-alive stomp pit, delete keep-alive cache