参看乐优商城（三）商品分类管理
https://blog.csdn.net/lyj2018gyq/article/details/82220560
4.实现商品分类查询
商城的核心自然是商品，而商品多了以后，肯定要进行分类，并且不同的商品会有不同的品牌信息，我们需要依次去完成：商品分类、品牌、商品的开发。
4.1.导入数据
首先导入课前资料提供的sql：
我们先看商品分类表：
CREATE TABLE `tb_category` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目id',
`name` varchar(20) NOT NULL COMMENT '类目名称',
`parent_id` bigint(20) NOT NULL COMMENT '父类目id,顶级类目填0',
`is_parent` tinyint(1) NOT NULL COMMENT '是否为父节点，0为否，1为是',
`sort` int(4) NOT NULL COMMENT '排序指数，越小越靠前',
PRIMARY KEY (`id`),
KEY `key_parent_id` (`parent_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1424 DEFAULT CHARSET=utf8 COMMENT='商品类目表，类目和商品(spu)是一对多关系，类目与品牌是多对多关系';
因为商品分类会有层级关系，因此这里我们加入了parent_id字段，对本表中的其它分类进行自关联。
4.2.实现功能
在浏览器页面点击“分类管理”菜单：
根据这个路由路径到路由文件（src/route/index.js），可以定位到分类管理页面：
由路由文件知，页面是src/pages/item/Category.vue
商品分类使用了树状结构，而这种结构的组件vuetify并没有为我们提供，这里自定义了一个树状组件。不要求实现或者查询组件的实现，只要求可以参照文档使用该组件即可：
4.2.1.url异步请求
点击商品管理下的分类管理子菜单，在浏览器控制台可以看到：
页面中没有，只是发起了一条请求：http://api.leyou.com/api/item/category/list?pid=0
大家可能会觉得很奇怪，我们明明是使用的相对路径：/item/category/list，讲道理发起的请求地址应该是：
http://manage.leyou.com/item/category/list
但实际却是：
http://api.leyou.com/api/item/category/list?pid=0
这是因为，我们有一个全局的配置文件，对所有的请求路径进行了约定：
路径是http://api.leyou.com，并且默认加上了/api的前缀，这恰好与我们的网关设置匹配，我们只需要把地址改成网关的地址即可,因为我们使用了nginx反向代理，这里可以写域名。
接下来，我们要做的事情就是编写后台接口，返回对应的数据即可。
4.2.2.实体类
在leyou-item-interface中添加category实体类：
内容：
@Table(name="tb_category")
public class Category {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
private String name;
private Long parentId;
private Boolean isParent; // 注意isParent生成的getter和setter方法需要手动加上Is
private Integer sort;
// getter和setter略
}
需要注意的是，这里要用到jpa的注解，因此我们在leyou-item-iterface中添加jpa依赖
<dependency>
<groupId>javax.persistence</groupId>
<artifactId>persistence-api</artifactId>
<version>1.0</version>
</dependency>
4.2.3.controller
编写一个controller一般需要知道四个内容：
- 请求方式：决定我们用GetMapping还是PostMapping
- 请求路径：决定映射路径
- 请求参数：决定方法的参数
- 返回值结果：决定方法的返回值
在刚才页面发起的请求中，我们就能得到绝大多数信息：
-
请求方式：Get，插叙肯定是get请求
-
请求路径：/api/item/category/list。其中/api是网关前缀，/item是网关的路由映射，真实的路径应该是/category/list
-
请求参数：pid=0，根据tree组件的说明，应该是父节点的id，第一次查询为0，那就是查询一级类目
-
返回结果：？？
根据前面tree组件的用法我们知道，返回的应该是json数组：
[ { "id": 74, "name": "手机", "parentId": 0, "isParent": true, "sort": 2 }, { "id": 75, "name": "家用电器", "parentId": 0, "isParent": true, "sort": 3 } ]对应的java类型可以是List集合，里面的元素就是类目对象了。也就是
List<Category>
添加Controller：
controller代码：
@Controller
@RequestMapping("category")
public class CategoryController {
@Autowired
private CategoryService categoryService;
/**
* 根据父id查询子节点
* @param pid
* @return
*/
@GetMapping("list")
public ResponseEntity<List<Category>> queryCategoriesByPid(@RequestParam("pid") Long pid) {
if (pid == null || pid.longValue() < 0) {
// 响应400，相当于ResponseEntity.status(HttpStatus.BAD_REQUEST).build();
return ResponseEntity.badRequest().build();
}
List<Category> categories = this.categoryService.queryCategoriesByPid(pid);
if (CollectionUtils.isEmpty(categories)) {
// 响应404
return ResponseEntity.notFound().build();
}
return ResponseEntity.ok(categories);
}
}
4.2.4.service
一般service层我们会定义接口和实现类，不过这里我们就偷懒一下，直接写实现类了：
@Service
public class CategoryService {
@Autowired
private CategoryMapper categoryMapper;
/**
* 根据parentId查询子类目
* @param pid
* @return
*/
public List<Category> queryCategoriesByPid(Long pid) {
Category record = new Category();
record.setParentId(pid);
return this.categoryMapper.select(record);
}
}
4.2.5.mapper
我们使用通用mapper来简化开发：
public interface CategoryMapper extends Mapper<Category> {
}
要注意，我们并没有在mapper接口上声明@Mapper注解，那么mybatis如何才能找到接口呢？
我们在启动类上添加一个扫描包功能：
@SpringBootApplication
@EnableDiscoveryClient
@MapperScan("com.leyou.item.mapper") // mapper接口的包扫描
public class LeyouItemServiceApplication {
public static void main(String[] args) {
SpringApplication.run(LeyouItemServiceApplication.class, args);
}
}
4.2.6.启动并测试
我们不经过网关，直接访问：http://localhost:8081/category/list
然后试试网关是否畅通：http://api.leyou.com/api/item/category/list
一切OK！
然后刷新后台管理页面查看：
发现报错了！
浏览器直接访问没事，但是这里却报错，什么原因？
这其实是浏览器的同源策略造成的跨域问题。
5.跨域问题
参看