Vue 项目 尚品汇（二）（暂停进行）

一、Home 模块组件拆分

基本流程

先写静态页面

拆分静态组件

获取服务器的数据进行展示

动态业务

（一）三级联动组件

如果一个组件在很多模块之间都在使用，我们就拆分成成一个全局组件 只需注册一次 在全局的项目都能使用

三级联动在 Home Search Detail 这三个模块中都使用了 所以把三级联动注册为全局组件

我们在 Home 模块里面 新建文件夹 TypeNav 里面放 index.vue 是我们的三级联动组件

先把结构和样式 复制粘贴到 我们的三级联动组件里面

然后 到入口文件注册全局组件

三级联动已经是 全局组件了 不需要再在 Home 里面引入了 直接使用

回到 Home 使用

（二）其余静态组件

HTML + CSS + 图片资源

在 Home 模块中 再新建一个文件夹 ListContainer 里面放 index.vue

还是先粘贴 结构和样式 注意我们结构中引入了图片

我们在 ListContainer 里面再建一个图片文件夹 我们把图片找到并放进去 观察路径中图片的位置修改成我们放图片的位置即可

  

路径修改完毕 就等于我们注册成功了一个静态组件 我们是需要引入的

进行组件的引入

最后使用组件即可

都是这个流程

二、测试接口 POSTMAN

使用 POSTMAN 进行测试

选择请求的方式 是 get 方式  请求时我们需要服务器 和接口两个数据 才能实现正确的请求数据

前面是服务器地址 后面是api 是接口 请求一下三级联动的数据 请求成功 接口可以使用 

接口前缀中都带 /api 

如果状态返回码为 200 代表返回成功

三、axios 的二次封装

（一）基本介绍

常用的向服务器发送请求的手段有 有 XMLHttpRequest fetch jquery axios

项目中常用 axios

二次封装的目的是 写一下请求拦截器和响应拦截器

请求拦截器：发请求前处理一些业务

响应拦截器：数据返回后处理一些事情

（二）流程

1.安装 axios

先安装一下 axios

npm install --save axios

2.创建文件

项目中的 Api 文件夹中放 axios 请求 里面创建一个request 文件来放我们的axios 请求

3.实现封装

先引入然后创建实例 配置对象  

配置请求响应拦截器 

最后暴露

四、接口统一管理

（一）目的

如果项目很小 直接在组件的声明周期函数中 发送请求

把接口统一管理 要不软如果 接口地址发生更改 就都得改

（二）过程

首先创建文件 index.js 文件 

在文件里面引入 二次封装的 axios 请求 然后写一个方法 调用这个方法就 进行发送请求

注意暴露

在main.js 入口文件中调用函数进行检查

报错 404 因为存在跨域问题

协议 域名 端口号有一个不用就会出现跨域的问题 我们本地服务器根本没有接口 而资源服务器有

常用的解决跨域的办法：JSONP CROS 配置代理

我们使用 webpack 中的解决办法 通过修改 webpack.config.js 中的属性来解决跨域

 查阅 webpack 说明书 然后配置 代理服务器解决跨域问题

 

跨域问题解决

五、nprogress 进度条的使用 

在请求和响应拦截器中使用

请求前 和 返回后调用函数

在 request.js 文件中引入 nprogress

然后再引入样式 

样式的位置可以修改进度条的颜色