a brief introdction:
Hello, everyone. First of all, let me introduce myself. I am an unknown little programmer. I run every day on the road of writing code and finding bugs. I go to bed late for work every day, but I am used to it. Some people often say that I imagine The programmer in is like this
Actually, of
course , the real programmer is of course, I am also in this state. Some people say: Drink some alcohol, smoke a cigarette, and find a bug for a day. It will be the end of the month right away. Summarize the project in advance for easy recall. Of course, the blog is also formatted. No, it’s the only way, family members come to see it alive
Project module and function introduction:
First of all, let's briefly talk about it. This month's project is composed of two modules, pms and ums, a commodity back-end management system.
Of course pms is a commodity module, and ums is a user module. This commodity back-end management system uses frameworks and plug-ins as Vue+elementui+SpringBoot+mybatisplus+OSS+JWT, etc.
First introduce the pms module:
PMS, it is divided into brand management, product type, product classification, product list and adding products.
1. Brand management
For brand management, it is actually a set of additions, deletions, and changes. What is the difference? It has a branded logo. The image upload uses the elemrentUI upload oss server. Its only difficulty is to upload half of it when uploading, but the user does not want to upload it, click Cancel to delete the uploaded image, and delete it when modifying it. Old pictures and so on. Why do you want to delete the picture? Because the user clicks Add to upload the picture and clicks cancel after uploading, the database does not have the picture uploaded by it, but the oss server has one more picture, right, then if the user keeps clicking upload, is it a page? The picture above is the value of the success function returned after uploading to the oss server to display the page. If the user asks the user to click, click 100 to upload 100 pictures? Click 1000, and he doesn't click Add and click Confirm. Then there is no database. Is there a lot of junk data on the server? When the user clicks to cancel, will the server data still exist? Is it junk data? Does it need to be deleted?
The answer, of course, must be deleted, why? Oss is because according to traffic charges, is to use your own image server set up so that it is not also required that space, junk data can be as little less
two, New Laws bomb box Cancel Delete picture ideas:
When this project is done, it is a front-end and back-end separation project
. Before doing the function, we must first consider several issues:
1. When the user clicks 1 in the following picture, the uploaded picture is deleted when the number X is
2. When the user clicks 2 in the following picture, Click on the blank space to delete the uploaded picture
. 3. When the user clicks on 3 in the following picture, it is added successfully when submitting
3. When the user clicks on 4 in the following picture, the uploaded picture is deleted when clicking cancel
Step 1 Delete when canceling Rubbish pictures delete rubbish pictures are pictures uploaded to Oss but not uploaded to the database:
(1) First, a global close event is required for @close="" No matter where you click, you must close to trigger the event close Dialog to close the callback, and then set this event first Define
(2) and then define a variable in data, its initial value is null, it is used to determine the current button, what button the current user clicks on, and then when the user clicks on the new method, it is assigned a value of 1 , When you click edit when editing, assign a value of 2 to it, and then click to cancel when you pop up the box or click to close when you click X, assign a value of 3 to it.
(3) Judging in the global method just defined, if the current variable is equal to one, then it takes the new method, otherwise it is judging that the variable is equal to two, then he takes the modified method, otherwise it takes Any method is a method of cancellation.
Why is it not troublesome to define? Because of the @close event, in this modal box, no matter you click anywhere, he will cancel, no matter if you click on a blank place, bad or cancel, or even if you click to add, it will become cancel, so there is a problem. It is ready to be added, but I clicked to add or deleted my photo, which is not very user-friendly.
(4) Then the next step is to pass the value, receive the value and send a request to the background to delete the method. Because after uploading the oss, after the image is uploaded to the oss, there will be a success callback function after uploading, can you get the address of the picture in the success callback function, and then pass this address to the one you want to receive Page, and then click on the page, and then write the delete method in the method of variable 3 to send the background to delete the picture, of course, use the array when the parameter is passed, because when the user clicks to upload the picture, it is not necessarily uploaded How many sheets are deleted, so the array is deleted in a loop. After the deletion is successful, it needs to be refreshed. Because the picture is stored in the cache, it cannot be deleted again if it is not refreshed the second time. The value is still the previous
undelete specific code, please refer to
step 2 of this article Delete the old picture when modifying and modify the picture without clicking confirm after uploading OSS. Delete the picture uploaded to OSS. Deleting junk pictures is the picture uploaded to Oss but not uploaded to the database:
(1) When modifying, first define a variable, which is in the entity class. Make a definition and add a field. This is only for query use. The database does not have this field. Add this field to the object in the data method of the page. Define such a variable in the object, and put it in this variable when it is displayed. A picture value, and then brought to the background for judgment. Judge in the background, first judge that the object ID is not empty, and then judge, the new picture and the old picture are not empty, and the new picture is not equal to the old picture, if they are not equal, delete the old image. When modifying, if you click the uploaded new picture, but you don’t want to upload it after uploading, click Cancel, then the variables set before the previous modal box will be used, and when you click Modify again, click Cancel, the modal The value of the box is equal to two. At this time, it will enter the modal box to delete. It is judged that the previous picture is not equal to the current picture. If it is not equal, delete the upload and delete the picture. Of course, delete and batch delete are relatively simple, so I won’t say much here, if you are interested, you can look at code
delete and batch delete
2. Commodity Type and Commodity Classification Module
For commodity type module and commodity classification module, it is actually a set of additions, deletions, and changes. When the focus is on the attributes and parameters of the type data, as shown
in the figure: In the two modules of commodity type and commodity classification in
(1) query: it has a level of a field, it is used to distinguish rank in this product type, he has a list of goods and commodities parameters of these two lists in this product category, it points It is a first-level node and a second-level node. For these two words and two classes, it is actually the same. Its main query is based on the current ID and the number of items displayed on each page of a page. , Because it is also a list below these two lists. When querying in the background, it is still based on the database ID of the current classification, and then equal to the current ID, otherwise, let the level be equal to zero again.
if(vo.getId() != null){
queryWrapper.eq("parent_id",vo.getId());
}else {
//页面显示为一级的数据
queryWrapper.eq("level",0);
}
(2) Add or modify: When adding or modifying, because there is no level field in the foreground, when adding, the addition and modification can only be performed in the background, whether the first level or the second level is determined in the background, if His classification ID is not equal to empty, and if it is not equal to zero, plug him a billion. What does this mean? By default, he will be plugged in a level 1 node, otherwise a zero will be plugged in. Zero is a level 1 node. New The default is a level 1 node.
(3) Delete: When deleting the data node of the 1st level node when deleting, the second level child nodes below it should also be deleted at the same time, and the judgment is performed in the background. If its classification ID is equal to zero, then query according to the conditions His category ID is equal to all the data of the current data ID, and then delete them all at once.
3. The product list and the added product belong to a module
. 1. The product list is actually an addition, deletion, and modification check, but for this addition, deletion, modification, and check, there is an added product in it. For the adding product module, it is the use step It includes a lot of things. Newly used is the step bar, which is divided into several pages such as adding product information, filling in product promotion, and filling in product attributes.
2. Adding products: Adding the classification of products in the product information uses recursion. First, obtain a collection through super.list() in the background implementation, and perform a loop operation based on the collection, create a map collection in the loop, and then judge by query The Id of the category is equal to the pid. Then I put a level of value in the map, and then judge the level=0, let him adjust his own loop to put the value, when it has no child nodes, the loop ends. Finally, it is judged that the child node cannot be empty. The
promotion part of the return collection product involves the member price list, the ladder price list and the full reduction price list. Because they are all in different tables, it is requested to use data to send data in the foreground and @RequestBody in the background. Annotate to receive data and define the bo package at the same time. Define the data collection of the member price list, the ladder price list and the full reduction price list in the bo package.
3. The most difficult place to fill in the product attribute new module is the SKU attribute module. Of course, SKU and The difference between SPU is that, simply speaking, SPU is equivalent to a class, and SKU is equivalent to an object, as shown in the figure: This is the sku part of this project
(1) Effect: After clicking any item in the drop-down box of the product attribute, it will trigger the product specification, and a table will pop up in the product specification. In the product specification, select the content of your own combination. The color can be added. After adding, select this color, select the capacity and click the refresh button, a table will appear below, and the data you need will appear in the table, such as price. Enter 1 price, click Sync Price, and all prices in the price will be unified. Inventory can also be synchronized with one key, and all data can be synchronized directly. The SKU number is generated by the back-end, and the front-end cannot be entered or modified. The product parameters are also queried after clicking the drop-down box
(2) New ideas: Bind an event in the product attribute drop-down box, click the drop-down box to trigger the event. Define the method in the event, check type equal to 0 and type equal to 1, and define the val parameter and two value methods .
Note: type is the type of the entity class attribute; 0->specification; 1->parameters
are connected in the method, start subscript according to the paging, each page displays the number of items, type and ID enter the background to query the data of the attribute, and then The queried data is received and given to the variable value so as to put the value in a loop.
Then start to judge, if this type is equal to zero, then the query is the commodity attribute, and the variable is started to loop. In a loop, define two variable variable arrays, one is values and the other is options. They are respectively. The capacity array and the color array in the product specification, and then determine whether it is added or modified. If it is modified, you need to determine whether the color was added manually or checked out from the database, and then the data is recycled Put id in options, you need to get the id of the current attribute to judge, you need to define this method, divide the data into options, and finally push the value of the product specification attribute array, let it loop the data display,
then judge type is not equal to 0, then the query is the product parameter, and the variable is also started to loop. In a loop, define values = "", put the looped data id in the values, you need to get the id of the current attribute to judge. Finally, push the value of the product parameter attribute array to display the data
in a loop , enter a color in the product specification, click Add, it will trigger a method, in the method, it is judged that the attribute value cannot be empty, the attribute value cannot be repeated, and it is Manually add, and then clear the data for him after adding.
When you click the refresh button again, first get the value you selected, and then cyclically put it into the table for display, and perform cyclical assignment to the data in the method of the refresh button. Synchronous price and synchronous inventory are judged on the original basis that it cannot be empty, and its length is greater than zero, and then assign values to it in cycles.
Doing a good job is to merge all the SKU-related data by combining the attribute values, loop all the data of the SKU, and finally put these data into the collection in a loop, including his ID and his data. The data is converted to a string, including The drop-down box of the product parameters he bought is also, enter the loop and put it in the collection, including ID and data sent to the background for adding to the database
(3) Thinking back:
The category drop-down box of the product defines a method in computed, then defines it in watch, connects to the id, and then judges whether he wants to return if he is not modifying it. If it is modified, judge this value newValue == undefined || newValue == null || newValue == 0 Let him return, and finally put the id of the first-level node and the second-level node into the array, and then display the
SKU by taking the value Echo: Define a method in computed, then define it in watch, connect the parameter id, and define a method to obtain data according to the attribute type id. This method is the method triggered by clicking the drop-down box, in this method In type==0, if it is judged before that it is equal to the modification, it is called to recycle, and the name generated by this.handleProductValus(attr[i].name) is assigned to values. Start the definition method to echo the product specifications. In
this method, define a values equal to an empty array, then define the data collection of the product, define a variable, and then start to judge that the variable collection cannot be empty or an empty string, and then Start looping this array, skuList[i].spData; what you get is a json string. Then use JSON.parse(spData); to convert the json string into an array string, and then loop the resulting array. If the retrieved name value is equal to the Key in the array, then the value of the array is directly converted to values. push(spDataArr[j].value); Put it in the values array, break out of the interrupt, and finally return to values;
The echo product parameter is also in the method type==1. If it is judged before, if it is equal to the modification, call it to recycle, values=this.getProductParams(attr[i].id); assign the id out of the loop to values. Define the method to start echoing the product parameters. Define the method of echoing the parameters
, and then take the meal, then define values="", and then define all the data sets obtained, and then loop this set, if the meal ID is Equal to the ID in his set, then, assign all the values of this array to values, break out of the interrupt, and finally return to values.
The following introduces the ums module
The user management system involves five main tables in the design process. The five tables are user table, role table, permission table, user role relationship table, and role permission relationship table. The user table and role table have a many-to-many relationship, and the role table and permission table are also a many-to-many relationship.
In the background management system, I designed the authority management into three modules, namely user management, role management, and authority management.
Next, let me first talk about the user management module. User management is an operation of adding, deleting, modifying and checking users. The background data is loaded on the user list page. When adding and modifying users, I use the elementui file plug-in to upload user avatars. Assign roles to this user.
Let me talk about the role management module. The role management is the addition, deletion, modification, and checking of roles, and the role data is displayed on the role list page. And you can assign permissions to the role. When deleting a role, we will determine whether the current role is associated with the user, and if it is associated, it will prompt the user that it cannot be deleted.
Finally, there is the permission management module. The permission management is an addition, deletion, modification, and check of permissions. The permission data is displayed on the permission list page. When deleting, we will delete all the child nodes under the selected node.
====== Next, we will further explain some details of user management, role management and authority management. ======
1. User management (including login, token, verification, token expiration, etc.)
Of course, in the user management module above, I mentioned adding, deleting, modifying and checking, but it is actually very simple, including uploading avatars using elementui , I have also explained it above, then I will briefly talk about how this assignment role is achieved.
In this user management module operation, first write a button for assigning roles. Of course, assigning roles can be done by using a pop-up box. First use it. First define the pop-up box, and then define the variables in these. Click the button to trigger the function.
In this function, you need to continue to query all the information of the role and go to the background to query. When querying in the background, you can query all directly without pagination. After the query is completed, stuff the obtained straight into the allRoleList collection for circular display.
The query is shown below, but he also needs to find out what roles the current user has from the database. This is just to show what roles the database currently has. Echoing the roles the user has
Then which table in the database must be checked to reselect the role? You have to check the user role association table, get the role ID of the current user, and then put it in allocRoleIds for echo. When querying the response, you need to pass the ID in the place where the role is assigned, get the ID from the data, and go below to receive the ID and give you the ID to query. this.allocAdminId=adminId; At the same time, attach allocAdminId to id; the
next step is to modify, there is a confirmation button in the assigned role pop-up box, click on the role you want to select, then trigger the event, and assign the value when defining the event , And then send the background to modify.
Use data to send data, receive in the background, operate
in the implementation class, delete the original data in the database within a time, and add it after deleting it according to the field name. Select those data by yourself to complete some changes to the role. Added.
Assigning permissions is the same as assigning roles, so I won’t go into details.
=To be continued===