The core of the mall is naturally commodities. When there are many commodities, they must be classified, and different commodities will have different brand information. We need to complete them in turn: commodity classification, brand and commodity development.
Import data
Let's first look at the commodity classification table:
CREATE TABLE `tb_category` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'Category id', `name` varchar(20) NOT NULL COMMENT 'Category name', `parent_id` bigint(20) NOT NULL COMMENT 'Parent category id,Fill in 0 for top category', `is_parent` tinyint(1) NOT NULL COMMENT 'Is the parent node, 0 is no, 1 is yes', `sort` int(4) NOT NULL COMMENT 'Ranking index, smaller, higher', PRIMARY KEY (`id`), KEY `key_parent_id` (`parent_id`) USING BTREE ) ENGINE=InnoDB AUTO_INCREMENT=1424 DEFAULT CHARSET=utf8 COMMENT='Commodity catalogue, categories and commodities(spu)It's a one to many relationship. Category and brand are many to many relationships';
Because there will be a hierarchical relationship between commodity classifications, we have added the parent [ID] field here to self associate other classifications in this table.
Realization function
Click the "classification management" menu on the browser page:
According to the route path to the route file (src/route/index.js), you can navigate to the category management page:
It is known from the routing file that the page is src/pages/item/Category.vue
The product classification uses a tree structure, and the component of this structure, vuetify, is not provided for us. Here, a tree component is customized. It is not required to implement or query the implementation of the component, only the component can be used by referring to the document:
url asynchronous request
Click the sub menu of classification management under commodity management, and you can see in the browser console:
There is no one on the page, just a request: http://api.learn.com/api/item/category/list?pid=0
You may find it strange that we clearly use the relative path / item/category/list. The reasonable request address should be:
http://manage.learn.com/item/category/list
But the reality is:
http://api.learn.com/api/item/category/list?pid=0
This is because we have a global configuration file that specifies all request paths:
The path is http://api.learn.com , and the prefix of / api is added by default, which just matches our gateway settings. We just need to change the address to the address of the gateway, because we use nginx reverse proxy, where we can write the domain name.
Next, we need to write the background interface and return the corresponding data.
Entity class
Add category entity class in learn item interface:
Content:
@Table(name="tb_category") public class Category { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; private String name; private Long parentId; private Boolean isParent; // Note that the getter and setter methods generated by isParent need to be manually added with Is private Integer sort; // getter and setter }
It should be noted that jpa annotation is used here, so we add jpa dependency in learn item item item item interface
<dependency> <groupId>javax.persistence</groupId> <artifactId>persistence-api</artifactId> <version>1.0</version> </dependency>
controller
There are four things you need to know to write a controller:
-
Request method: decide whether we use GetMapping or PostMapping
-
Request path: determine mapping path
-
Request parameters: parameters that determine the method
-
Return value result: determines the return value of the method
In the request just initiated by the page, we can get the vast majority of information:
-
Request method: get. The description must be a get request
-
Request path / api/item/category/list. Where / api is the gateway prefix, / item is the route map of the gateway, and the real path should be / category/list
-
Request parameter: pid=0. According to the description of the tree component, it should be the id of the parent node. The first query is 0, which is the query level 1 category
-
Return result:??
According to the previous usage of tree component, we know that the returned array should be json array:
[ { "id": 74, "name": "Mobile phone", "parentId": 0, "isParent": true, "sort": 2 }, { "id": 75, "name": "Household Electric Appliances", "parentId": 0, "isParent": true, "sort": 3 } ]
-
The corresponding java type can be a List collection, and the elements in it are class objects. That is, List < category >
Add Controller:
controller code:
@Controller @RequestMapping("category") public class CategoryController { @Autowired private CategoryService categoryService; /** * Query child nodes based on parent id * @param pid * @return */ @GetMapping("list") public ResponseEntity<List<Category>> queryCategoriesByPid(@RequestParam("pid") Long pid) { if (pid == null || pid.longValue() < 0) { // Response 400, equivalent to responseentity. Status (httpstatus. Bad? Request). Build(); return ResponseEntity.badRequest().build(); } List<Category> categories = this.categoryService.queryCategoriesByPid(pid); if (CollectionUtils.isEmpty(categories)) { // Response 404 return ResponseEntity.notFound().build(); } return ResponseEntity.ok(categories); } }
service
In general, we will define the interface and implementation class in the service layer, but here we will be lazy and write the implementation class directly:
@Service public class CategoryService { @Autowired private CategoryMapper categoryMapper; /** * Query subclasses according to parentId * @param pid * @return */ public List<Category> queryCategoriesByPid(Long pid) { Category record = new Category(); record.setParentId(pid); return this.categoryMapper.select(record); } }
mapper
We use generic mapper to simplify development:
public interface CategoryMapper extends Mapper<Category> { }
Note that we do not declare @ Mapper annotation on the Mapper interface, so how can mybatis find the interface?
We add a scan package function to the startup class:
@SpringBootApplication @EnableDiscoveryClient @MapperScan("com.learn.item.mapper") // Packet scanning of mapper interface public class ItemServiceApplication { public static void main(String[] args) { SpringApplication.run(ItemServiceApplication.class, args); } }
Start and test
We do not go through the gateway, but directly access: http://localhost:8081/category/list
Then try whether the gateway is unblocked: http://api.learn.com/api/item/category/list
All OK!
Then refresh the background management page to view:
I found the wrong report!
It's OK to visit the browser directly, but it's wrong here. What's the reason?
This is actually a cross domain problem caused by the browser's homology policy.
Leon_Jinhai_Sun 2032 original articles published, 46 praised, 120000 visitors+ His message board follow