Preliminary preparation: create vue scaffolding, configure files, download third-party ui libraries, axios, each, etc.
Technology stack: Vue , elementui-plus , axios , each
Project Portfolio: The project mainly consists of: login module, user management module, authority management, role list, product management, order list, visual icon each data statistics, and several other modules.
Before the project starts, first configure and encapsulate the baseurl base address interface path, set the timeout timeout period, and perform some operations after the network request and response through the interceptor in axios. We create a new until folder and create a new one in it. A request.js file, import the third-party axios in it, set the interceptor through axios.interceptors after configuring the base address , configure the request header through the Authorization of config.headers in the request interceptor to enter the token value of the home page, and then Then set the token value expiration processing in the response interceptor, let the user go to the login page to log in again, and then process and prompt the conventional expired status code.
login module
By creating a login.vue component, introduce the form form of element in it, through this click login event, get the user name and password in this form, initiate a network request by introducing the encapsulated API interface, and pass the status code returned by the background To judge whether the login is successful, if it is successful, it will return a token, store the token locally or in the vuex state management tool, and take the token value in the encapsulated network request and put it in the request header, because the following All operations need to rely on this token value, so that you don’t have to write it every time you request it, which seems redundant.
Login structure:
Configure the token value in the network request:
menu permissions
The menu is realized by using the rouer.routes dynamic path through the logged-in user and the data returned in the later stage. According to the different logged-in users, the super administrator will give them some permissions. When logging in, they will get this menu. The list is cyclically input through the menus navigation in the ui library.
login authentication
Login authentication is implemented through routing guards. When I use the routing guard (beforeEach) to judge whether there is a token value in the state management tool or locally, if not, force him to log in to the interface.
User Management Module
The table structure of the user module is configured by introducing <el-table> in the ui library and configuring the tableData attribute in data as an array, requesting the data of the user list in the onMounted hook function, and assigning values to the tableData table according to the printed data data The status and operation buttons in the form need to be set using the data in the <template> row. Adding an event means clicking the button and a modal box for adding users will appear. Add the user’s name, email address and other data in it, and click OK to start. For network requests, the backend returns the status code to determine whether the addition is successful and re-call to obtain the data of the form.
I think the user list module is more complicated than the user module or the role assignment module, which is a drop-down select box, v-mode binds an empty data, and loops the data obtained in the user list in the option , assign a value in the attribute value, and then judge its value by clicking on the determined event, send a request to assign a role, bring this value to it, and return the assignment success field later.
Rights Management - Role List
The biggest difficulty in the role list is the assignment of permissions and the rendering below the roles. The assignment of permissions is mainly to pop up a modal box after clicking this event, and introduce the <el-tree> tree control in the ui library. Bind data data in the tree control, and then you need to add the show-checkbox attribute to the tree control, because the tree control is false by default, which means whether the node can be selected, if you do not add this attribute , it cannot be selected when used, and the default-expanded-keys attribute is added, which means that the selected node is expanded by default. Because the data interface that sends the tree control is generally a body, which is a tree data, you can judge whether the children in it still exist through recursion, and stop when it is judged that the data in the id of the last layer has no children. Recursion, to see whether the tree control is fully open or half open, in vue2 you can directly use this to get the id value of the last layer, but in vue3 there is no this point, you can introduce proxy, it Inside you can access the entire object and prototype, use proxy.$refs.tree.datadata.map to determine whether the id is equal, and finally force it to a string and send a network request. Change user permissions.
Assign permission event code (vue3):
Commodity Management - (commodity list)
The most troublesome thing in the product list is to add products. Unlike other components, it is not directly input in the modal box, and it can be added by passing in. It jumps to a page and needs to fill in product information, cascading menus, Product attributes, dynamic parameters, uploaded product images, and rich text of product introductions.
This step bar is introduced into the steps in the ui library. By setting the title attribute page in it, the basic information and the text of the product can be displayed. By adding the active attribute in the step bar, the subscript of the tabs on the left is bound. Click the tabs on the left to pass the current subscript to the global activeIndex, and bind the activeIndex to the active attribute of the step bar to realize the function of clicking tabs and completing it. There is a cascade menu in the basic information. In the event of the cascade menu, it is judged which level is selected in the cascade. Only when it is selected as the third level will it get its id, and get the product parameters and parameters for this id. In product attributes, rendering
upload image
Uploading pictures is to upload product pictures through upload combined with element ui library. The uploaded picture address is placed in the action attribute attribute in upload, and the hook function after successful upload is passed through the on-success attribute. This function is called to make the picture Convert it into binary and pass it to the backend. The backend will get the binary file and convert it. If it is successful, it will return a piece of data to the frontend. One is the temporary image path and the other is the real image path. The temporary image will let the frontend view it by itself. The backend of the real path will be stored in the database, and the upload will be returned successfully, prompting the user.
Statistics
Data statistics are downloaded and imported globally through the third-party plug-in of each. According to the instance of each, the code is assigned and put into the data data. For example, using a histogram, by integrating the option data, change the option when requesting the interface The data corresponding to the data inside.
The data visualization diagram needs to be placed in a box, and the box needs to set the width and height, or set the maximum width and maximum height. If the width and height of the box are not given, the each icon cannot be displayed.
Summary: The above are the functional requirements of all modules in the project. This project is a background management system. The front-end and back-end are separated and developed, which is mainly used for internal operation personnel to manage products. There are mainly login module, user management module, authority management module, commodity management module, data statistics and other modules.