Table of contents
1. Create a system menu
Create the table sys_menus.sql in the admin database
to view the page
According to the code generated by reverse engineering, write the remaining front-end code and back-end code by yourself, and write according to the interface document.
2. Development property grouping
1. Extract the three-level classification function
Create a common directory under the front-end modules and create a category.vue file.
In the product directory, create an attribute group attrgroup.vue file. The final result is a menu on the left and a table on the right.
1. Use the column interval in the Layout layout
2. Copy the el-tree in the category.vue written before, delete the span (add the delete button), drag and drop, and expand the node function by default, and it will not be displayed Check box
3, copy the required content in the script
4. We need to use the public component category.vue in the menu position of attrgroup, and use import to import the component
5. Copy the div in the reverse generated attrgroup.vue to the table position in attrgroup.vue written by yourself
6. Copy the content in the script as well.
7. Because the component attrgroup-add-or-update.vue is referenced in attrgroup.vue, copy the reverse-generated component attrgroup-add-or-update.vue to the project. 8. Use
parent-child components to transfer data and use the event mechanism. The child component sends an event to the parent component, carrying the data
- Parent-child components pass data
- 1), the child component transmits data to the parent component, and the event mechanism;
- The child component sends an event to the parent component, carrying data.
- // this.$emit("event name", carried data...)
9. We introduced the sub-component catgegory in the component attrgroup, and use the sub-component to transmit data to the parent component. When the data in the category is clicked, attrgroup can know , return the following table data.
10. Bind the click event to el-tree.
11. Send the event treenodeclick to the parent component, so that we know which data was clicked, and then query the properties according to this data.
2. Write back-end code
1) Write the interface to realize the acquisition of classification attribute grouping
3. New function of attribute grouping
1. Use the cascading selector Cascader
2. The children field of CategoryEntity in the entity class in the backend, plus the annotation @JsonInclude(JsonInclude.Include.NON_EMPTY) is not empty
4. Attribute group modification echo function
When querying details, return the full path of categoryId category.
Add catalogPath in AttrGroupEntity, the path is not a field of the database, you need to add annotation @TableField(exist=false) to the field
Query directory information in the details
Use closed in the dialog box Dialog, so that there will be no echo when you click Add
3. Brand Management
1. There is a problem with pagination display. There is a problem with using MyBatis-Plus. You need to use a paging plug-in and put a
2. Modify the fuzzy query function
3. Modify the association classification function
4. Subsequent module development ideas
Refer to the existing code to develop the front and back ends independently, record notes, and develop the following functional modules. Only by developing independently can you learn faster and better.
4. Platform attributes-specification parameters
5. New products
6. Preferential marketing module
7. Inventory system
8. Order system
9. User system
10. Content management