【尚品汇】(二)Home路由组件拆分

1. 先写完静态页面（html、css）
2. 拆分静态组件（将Home模块拆成7个组件）
3. 获取服务器数据，动态展示

TypeNav三级联动组件

在main.js处注册成为全局组件，可以在项目的任意地方使用

// 注册全局组件
import TypeNav from "@/pages/Home/TypeNav/TypeNav.vue";
Vue.component(TypeNav.name, TypeNav); 
//第一个参数：全局组件的名字；第二个参数：要注册成为全局组件的组件

在任意组件内，TypeNav无需注册，直接使用

<template>
  <div>
    <TypeNav></TypeNav>
  </div>
</template>

注册时使用什么名字，在组件中就写什么标签Vue.component(TypeNav.name, TypeNav);
如果是随便起的名字，要用"“（此处TypeNav.name是一个变量，没有用”"）

向服务器请求数据

1. 先用POSTMAN测试接口是否可用

   服务器的ip地址http://39.98.123.211 （返回一个HTML页面？？）
   
   
   最新接口地址http://gmall-h5-api.atguigu.cn
   首页三级分类的接口/api/product/getBaseCategoryList，请求方式GET
   
   如果服务器返回的数据code字段200，代表服务器返回数据成功
   接口前缀都有/api：

封装axios

向服务器发请求：XMLHttpRequest、fetch、jQuery、axios
为什么要二次封装axios？主要使用axios的请求拦截器和响应拦截器

• 请求拦截器： 可以在发请求之前处理一些业务（添加cookie、token，请求头等）
• 响应拦截器： 当服务器数据返回以后，可以处理一些事情

1. 安装axios插件——项目依赖 npm install axiso

   ![图片.png](https://img-blog.csdnimg.cn/img_convert/a95d60ac7f59fa15ace8c149c8a7307f.png)
   

2. 在src文件夹下，有一个api文件夹，存储axios请求

   二次封装axios，代码在api/request.js中  
   

- 配置拦截器： 在请求或响应被then 或 catch 处理前拦截它们

1. 首先创建一个axios实例对象

import axios from "axios"  //axios是一个构造axios实例的类
const myRequest = axios.create({