Day06_商品分类(vuetify-nginx-cors)与品牌查询 (5)

3.5.测试

启动nginx，然后用域名访问后台管理系统：

现在实现了域名访问网站了，中间的流程是怎样的呢？

浏览器准备发起请求，访问，但需要进行域名解析

优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1

请求被发往解析得到的ip，并且默认使用80端口：:80

本机的nginx一直监听80端口，因此捕获这个请求

nginx中配置了反向代理规则，将manage.leyou.com代理到127.0.0.1:9001，因此请求被转发

后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx

nginx将得到的结果返回到浏览器

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异步请求

点击商品管理下的分类管理子菜单，在浏览器控制台可以看到：

页面中没有，只是发起了一条请求：?pid=0

大家可能会觉得很奇怪，我们明明是使用的相对路径：/item/category/list，讲道理发起的请求地址应该是：

但实际却是：

?pid=0

这是因为，我们有一个全局的配置文件，对所有的请求路径进行了约定：