# gulishop-0310

**Repository Path**: newsegmentfault/gulishop-0310

## Basic Information

- **Project Name**: gulishop-0310
- **Description**: 学习gulishop前台项目,项目代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2022-08-01
- **Last Updated**: 2022-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# gulishop

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).





gitee地址: https://gitee.com/newsegmentfault/gulishop-0310.git
生产环境地址: http://101.43.227.123/home

## day01

### 项目简介

做一个电商类的前台项目

		* 前台项目: 面向于C端，面向于客户端，全国的人都可以访问
		* 后台管理项目: 面向于B端，给商户用的，用来管理C端的数据用的
		* 前端项目: 由前端开发人员写的项目，用的html、css、js，又分为前台项目和后台管理项目
		* 后端项目: 由后端开发人员写的项目，用java、php、nodejs(express)，写接口的

项目由很多模块组成:

首页、搜索页、详情页、购物车、支付、订单中心、登录、注册等



### 创建项目

```
vue create gulishop
```

创建出来的项目需要了解目录解构，早之前介绍过

> 注意: 
>
> public 文件夹下的内容,不会被webpack处理,打包的时候直接打包到dist目录下
>
> scr/assets 文件夹 会被webpack处理

#### 禁用ESLint

vue.config.js

```js
lintOnSave: false
```

#### jsconfig.json配置别名@提示

之前是没有的,脚手架升级了才有了

```js
{
    "compilerOptions": {
        "baseUrl": "./",
            "paths": {
                "@/*": ["src/*"]
            }
    },
    "exclude": ["node_modules", "dist"]
}
```



### Git操作 - 工作流程

![day01-git操作-工作流程](note/day01-git操作-工作流程.png)



### Header、Footer组件

分析发现Header和Footer是通用组件，不是路由组件，把组件定义到components目录下，具体拆分组件，拿着静态页面 html.html 拆分即可，拆分过程中有如下问题

1. 图片问题 - 用到的图片放到当前组件的文件夹中(因为图片不是公用的，只有当前组件在用)

2. css问题

   * 将less放到style中编辑器飘红显示，给style标签加lang属性`<style lang="less">`

   * 安装less

     ```js
     npm i less less-loader@7 -D
     ```

     > 注意：1. less-loader 是7版本  2. -D 保存到开发依赖



### Home、Search、Login、Register 组件创建

这四个组件分析后是路由组件，路由组件的定义、注册、使用和普通组件不一样，

普通组件：定义(创建.vue文件)、注册(Vue.component())、使用(标签使用)

路由组件：定义(创建.vue文件)、注册(注册在路由器中注册)、使用(router-view渲染)

安装使用 vue-router，需要注意: `npm i vue-router@3 -S` 安装的是3版本

在 路由器的routes配置项中，写一级路由

```js
{
    path: "/home",
    component: Home
}
```

在App.vue中留下的

```html
	<div id="app">
        <Header></Header>
        <router-view></router-view>
        <Footer></Footer>
    </div>
```



## day02

### Header 组件的跳转

登录跳转至登录页面、注册跳转至注册页面、点击login图片跳转至首页

这几个跳转使用的是声明式导航`<router-link></router-link>`

点击搜索框按钮跳转到搜索页面

搜索页面使用编程式导航 `$router.push()`

### 跳转至Search页面携带参数

在这里我们携带了一个参数，文本输入框中的内容，使用两种传参方式传到search页面(params + query)，说明一些路由传参的问题

```js
// 组件中
$router.push({
    name: "search",
    params: {
        keyword: this.keyword // 收集到的input输入框内容
    },
    query: {
        keyword1: this.keyword
    }
})
```

1. 跳转路由的2种基本方式

   编程式导航`$router.push()`有历史记录、`$router.replace()`没有历史记录

   声明式导航` <router-link></router-link>` 

2. 跳转路由携带参数的2种方式

   params传参，参数相当于直接拼接在路径中，在路由中需要配置占位

   ```js
   {
       path: 'search/:keyword', // :keyword 占位
       component: Search // Search组件
   }
   ```

   query传参，相当于路由中问号之后的内容

3. 路由组件能传递props数据

   将路由组件的参数映射到组件的 `props`属性上

   ```js
   {
       path: 'search/:keyword', // :keyword 占位
       component: Search, // Search组件
       // 1. 布尔值,只能传递params参数
       // props: true,
       // 2. 对象形式,只能传递额外的参数
      	// props: {
       //     text: "哈哈"
       // },
       // 3. 函数形式(用的最多),可以映射路由的参数和额外的数据
       // 函数返回的对象中属性会被映射到组件中的props属性上
       props(route) {
           return {
               keyword: route.params.keywrod,
               keyword1: route.query.keywrod1,
           }
       }
   }
   ```

4. 指定params参数时可不可以用path和params配置的组合

   不可以

   配置params参数的时候，只能配合name属性使用

5. 如何指定params参数可传可不传

   ```js
   {
       path: 'search/:keyword?' // 这里的问号加上就变成非必传
       ...
   }
   ```

6. **如果指定name与params配置**, 但params中数据是一个"", 无法跳转，路径会出问题

   如何解决:

   1. 不传params参数(不推荐)

   2. 指定params参数为 undefined

      ```js
      $router.push({
          name: 'search/:keyword?',
          params: {
              keyword: this.keyword || undefined // 对空传做兼容,保证路径正确
          }
      })
      ```

7. 编程式导航 push 和 replace 重复点击报错

   防止组件重复渲染报的错，怎么解决 ?

   1. `$router.push().then().catch()`

   2. 重写push和replace方法

      ```js
      const originPush = VueRouter.prototype.push;
      VueRouter.prototype.push = function push (location) {
          return originPush.call(this, location).catch(() => {});
      }
      const originReplace = VueRouter.prototype.replace;
      VueRouter.prototype.replace = function replace (location) {
          return originReplace.call(this, location).catch(() => {});
      }
      ```



### 拆分Home组件 - 过程比较慢，不要急

Home中组件挨个去拆分，需要注意 TypeNav组件在好几个页面都用到，需要放在components文件夹下，注册也是全局注册，我们需要全局注册的组件全部放到一个文件中管理 `src/register/index.js`

剩下的组件只在Home组件中使用，存到Home组件的文件夹下即可



组件差分完之后，要获取数据动态渲染页面

### 测接口文档中接口是否可以使用 - postman

![day02-postman发送get请求](note/day02-postman发送get请求.png)

![day02-postman发送post请求](note/day02-postman发送post请求.png)



### axios二次封装

发送请求，拿数据，需要使用axios，在项目中对axios进行二次封装

为什么要对axios进行二次封装?
可以对所有的请求进行统一配置,例如说:超时时间、对错误的统一处理等
对axios二次封装要达到一下要求:

1. 配置基础路径和超时限制
2. 添加进度条信息  nprogress
3. 返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
4. 统一处理请求错误, 具体请求也可以选择处理或不处理



发请求的时候发现跨域

### 解决跨域

在 `vue.config.js`中配置webpack的代理即可

```js
devServer: {
    // 代理
    proxy: {
        // /api是标识
        '/api': {
            // target 转发的目标服务器地址
            target: "http://gmall-h5-api.atguigu.cn",
            // 路径重写(由于接口都带着api呢,所以这里路径不重写)
            // pathRewrite: { '^/api': '' }
        }
    }
}
```



数据要放哪? 数据需要放到vuex当中

### Vuex 模块化

vuex使用步骤:

```js
// src/store/index.js
// 1. 下载安装
// npm i vuex@3 -S
// 2. 引用使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 3.暴露一个store对象
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})
// 4.在vm实例创建的时候挂上store对象

// src/main.js
import store from './store'
new Vue({
    store // 第4步
})
```

由于项目变得越来愈大，vuex开启模块化

```js
export default new Vuex.Store({
    // 开启模块化
    modules: {
        home,
        user
    }
})
```

每个模块中和之前是一样的，同样有4个核心概念

```js
// 每个模块
const state => {}
const mutations => {}
const actions => {}
const getters => {}
export default {
    state,
    mutations,
    actions,
    getters
}
```

模块化和非模块化的差异

![day02-vuex模块化](note/day02-vuex模块化.png)



### TypeNav 发请求，拿数据

在mounted钩子中，触发一个actions，去获取三级分类的数据，然后存到vuex

#### 在这个过程把请求函数提出来了，单独放到了一个文件中`srv/api/index.js`，这个文件用来封装所有的请求函数



## day03

现在我们已经把基本架子打起来了,如果现在拿数据渲染页面(组件)怎们做?

1. 拿数据要调用接口,在哪调用? 在组件的 mounted 中触发actions，在actions中调用接口
2. 调用的哪里的接口呢? 调用 `src/api/index.js`封装的接口函数
3. 在接口函数中拿的我们二次封装的 `axios`示例去发请求(注意跨域,如果发生跨域需要配置代理)
4. 拿回数据放到store中, 在 actions 中走三连环(调用接口返回数据,触发mutations,mutations将数据存到state中)
5. store中数据有了之后,往组件中映射

### 将 TypeNav 数据映射到组件中展示

通过 v-for 展示了三级分类列表的数据

渲染完数据,点击三级分类要跳转到 search 页面,要看携带的参数

### 点击 TypeNav 跳转search 带参数

携带的是query参数

`/search?category3Id=61&categoryName=手机`

1. router-link 携带参数(弃用了)

   组件中通过v-for渲染的`router-link`，页面中存在过多的`router-link`，而`router-link`是组件，在页面中写组件的本质实在内存中创建了一个组件实例，`TypaNav`中有`router-link`几百个，会造成页面的卡顿

2. 优化：使用编程式导航

   ```html
   <a href="javascript:;" @click="$router.push({
       name: 'search',
       query: {
       	category1Id: c1.categoryId,
       	categoryName: c1.categoryName
       }
   })">{{ c1.categoryName }}</a>
   ```

   编程式导航一样的，在页面中也是创建了几百个函数，也浪费内容

3. 事件委派

   给所有的链接的父元素绑定了点击事件，只绑定这一个点击事件，在事件回调用通过e.target拿到目标元素，且在目标元素上携带上参数(category1Id、category2Id、category3Id、categoryName)，拿到参数使用编程式导航跳转 search 页



### 给 TypeNav 中的显示和隐藏做成不使用 hover ,使用变量来控制

1. 移入、移出每个item背景色的改变
2. 右侧内容的显示和隐藏使用变量控制

这里使用的参考值思想，设置一个currentIndex数据 ，记录移入到哪一个item中的，移入之后判断 currentIndex 和 当前item的index 是否相同，如果相同就需要变色、显示右侧内容

> 注意: 什么时候重置 currentIndex 为 -1, 移入所有item的父组件的时候,且要包含`全部商品分类`



给每个链接加防抖和节流

### 防抖 和 节流

什么是防抖 ? 什么是节流 ?

防抖是函数的防抖，多次执行变成一次执行就叫防抖

节流是函数的节流，多次执行变成少次执行就叫节流

应用场景:

1. 搜索(可以用防抖,可以用节流) - 输入内容的时候,要联想词汇,联想词汇要发送网络请求,不能时时的输入(这里是为了服务器减轻压力做的防抖)
2. 抢购(可以用防抖,可以用节流) - 疯狂点击抢购按钮的时候,前面点的都不发请求,只有最后一次点击(点累了休息一下),发送了网络请求(这里是为了服务器减轻压力做的防抖)
3. 页面的响应式变化 - 当页面窗口发生变化的时候,要进行响应式,但是响应式有动画,如果高频次触发动画会影响性能,可以使用防抖
4. 文本输入时校验 - 也可以使用防抖(一般我们框架中都对应的插件做校验)

理解图:

![day03-函数的防抖和节流](note/day03-函数的防抖和节流.png)

源码: 

```js
// 防抖,给谁防抖?给点击的回调函数做防抖
// 参数一: 要防抖的函数
// 参数二: 延时,最后一次点击多少毫秒之后执行处理函数
function debounce(fn, delay) {
    var timer = null; // 存定时器
    return function () {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(fn, delay);
    }
}


// 节流,给谁节流?给点击的回调函数做节流
// 参数一: 要节流的函数
// 参数二: 延时,每间隔多少毫秒之后执行处理函数
function throttle (fn, delay) {
    var flag = true; // 给个默认状态是true,状态是true的情况下才能执行回调
    return function () {
        if (flag) { // 是true的情况下,才会去触发fn
            flag = false; // 先把flag变成false
            setTimeout(function () {
                flag = true;
                fn();
            }, delay) // 在1秒以后将flag变成true,并且执行fn
        }
    }
}
```



### 使用 lodash 做节流

lodash 我们并没有安装，但是可以拿出过来直接用，为什么?

因为项目依赖包也会依赖一些其他的包，在这些其他的包当中就有 lodash

```js
import throttle from 'lodash/throttle'
export default {
    name: 'TypeNav',
    ...,
    methods: {
        moveIn: throttle(function(index) {
    		this.currentIndex = index;
		}, 50, { 'trailing': false }),
    }
}
```

> 注意:
>
> 节流的第三个参数这个配置项的设置，可以配置 leading 和 trailing 选项，默认两个选项都是 true
>
> 节流是一个过程，需要时间，这两个参数代表的实在这个间隔时间之前去执行 节流函数 韩式 这个间隔时间之后执行 节流函数，leading  代表间隔时间之前，trailing 代表间隔时间之后
>
> 这里我们我们希望刚触发节流的时候立马执行这个函数 ,所以设置 `{ 'trailing': false }`



### TypeNav 在 Search 页面的隐藏和显示

我们通过一个变量isShow，两个条件(isShow代表移入移出，$route.path在那个路径生效)解决了问题，问题如下:

1. 移入显示、移出隐藏只在search页面好使
2. 除了home以外所有页面页面应该默认隐藏

```js
// 在模板中移入isShow要变成true
export default {
    ...,
    created() {
        // 默认进入 search 页的时候,不能让 TypeNav去展示
        if (this.$route.path != '/home') { // 只要不是首页的时候
            this.isShow = false; // 默认都让它隐藏
        }
    },
    methods: {
        moveOut() {
            this.currentIndex = -1;
            if (this.$route.path != '/home') { // 首页的时候,永远能让isShow变成false
                this.isShow = false; // 首页移出的时候,不能让false生效
            }
        },
    }
}
```



### 给 sort 显示效果过渡

1. 将过渡的内容放到 transtion 标签中
2. 书写类名(注意权重) v-enter、v-enter-to、v-enter-active
3. 使用数据控制过渡效果(例如: 隐藏、显示)

> 注意: 当不确定页面中有几个过渡的时候，给transition标签加name属性，同时类名发生变化，不再以v-开头，以name属性值开头



### 问题：跳转search页面的时候参数丢失的问题

1. 先点击三级分类(此时路由带的query参数是好的)，再点击搜索按钮，参数会有问题，只有params参数，没有query参数了
2. 先点击搜索按钮(此时路由带的params参数是好的)，再点击三级分类，参数有问题，只有query参数，没有params

这两个地方可以理解成 search 页面的两个入口，在这两个入口跳转的地方处理一下，忘记携带哪个参数就给带上就行



TypeNav --------------- 结束

题外话：写一个功能产品，例如说需要100%完成，你需要花费90%时间完成90%的功能，剩下的10%的功能会花费你另外的90%时间



### mock 使用

mock 会拦截到ajax请求，返回自己模拟的数据，原理:

![day03-mockjs原理](note/day03-mockjs原理.png)

1. 安装

   ```js
   npm i mockjs -S
   ```

2. 引入

   ```js
   import Mock from 'mock'
   ```

3. 使用

   ```js
   Mock.mock('/mock/abc', function () {
       return {
           code: 200,
           data: {
               username: "张三",
               age: 18
           },
           message: 'success'
       }
   })
   ```


> 注意: mock这个 src/mock/index.js 这个文件需要在main.js中引入,
>
> `import '@/mock'`



## day04



### 准备 ListContainer 和 Floor 的数据

在`src/mock`把准备好的json数据粘贴进来，然后书写mock接口

```js
// src/mock/index.js
import Mock from 'mock'
import banner from './banner.json'
import floor from './floor.json'

Mock.mock('/mock/bannerList', function () {
    return {
        code: 200,
        data: banner,
        message: 'success'
    }
})

Mock.mock('/mock/floorList', function () {
    return {
        code: 200,
        data: floor,
        message: 'success'
    }
})
```



### 书写接口

`src/api/index.js` 书写请求接口

```js
import request from '@/utils/request.js'
// 专门用来请求mock的axios二次封装,这个axios实例基础路径是 baseUrl: '/mock'
import mockRequest from '@/utils/mockRequest.js'

export const reqBannerList = () => {
    return mockRequest({
        url: '/bannerlist',
        method: 'get'
    })
}

export const reqFloorList = () => {
    return mockRequest({
        url: '/floorList',
        method: 'get'
    })
}
```



### ListContainer 和 floor store中的三连环

```js
const state = {
    // 三级分类的数据
    categoryList: [],
    bannerList: [], // 首页轮播数据
    floorList: [], // 首页楼层数据
}
const mutations = {
    ...
    RECEIVE_BANNERLIST(state, bannerList) {
        state.bannerList = bannerList;
    },
    RECEIVE_FLOORLIST(state, floorList) {
        state.floorList = floorList;
    }
}
const actions = {
    ...
    async getBannerList({ commit }) {
        try {
            let result = await reqBannerList();
            if (result && result.code === 200) {
                commit('RECEIVE_BANNERLIST', result.data);
            }
        } catch (error) {
            console.log('获取轮播数据失败');            
        }
    },
    async getFloorList({ commit }) {
        try {
            let result = await reqFloorList();
            if (result && result.code === 200) {
                commit('RECEIVE_FLOORLIST', result.data)
            }
        } catch (error) {
            console.error('获取楼层数据失败')
        }
    }
}
```



### ListContainer 和 floor 展示数据

在mounted中触发相应的actions，然后走发请求，拿数据，将数据存到store中，映射到响应的组件中去展示数据

ListContainer 的数据直接映射到 ListContainer 组件中使用即可

floor 的数据是两个楼层的数据在一起，需要循环渲染floor组件，数据映射到Home组件去循环渲染floor

> 注意: 我们这里使用的假数据中的图片路径是绝对路径，真实的开发中应该是一个url，我们现在的绝对路径，应该把图片放到 public/images 这个文件夹下



### Swiper

Swiper 是一个轮播插件，功能很强大，目前版本是7版本，正在维护

我们使用上一个稳定版本 6

步骤:

1. 安装

   ```js
   npm i swiper@6
   ```

2. 引入使用

   需要引入的文件 swiper-bundle.min.js 和 swiper-bundle.min.css

   ```js
   import Swiper from 'swiper/swiper-bundle.min.js';
   import "swiper/swiper-bundle.min.css"
   ```

3. 创建实例

   配置对象 直接去官网上粘贴即可

   ```js
   new Swiper(选择器/元素, 配置对象)
   ```

   > 如果自己使用 swiper 需要自己搭建html+css,只是我们使用的组件直接写好了,拿过来用

#### 在哪里创建swiper实例合适?

1. mounted中创建实例(不好使)

   刷新页面不好使，因为数据异步回来的，回来之后又改变了DOM，而我们初始化的时候已经初始化过第一次的DOM结构了，已经创建swiper实例了

2. updated中创建实例(好使，不推荐)

   在页面中不光有我们swiper的数据会更新，如果其他地方的数据也更新，那么也会走updated，就会重新创建swiper

3. 在定时器中(好使，不推荐)

   原理是等待异步数据回来再创建实例，为什么不推荐，接口是异步的，受网络环境影响，如果往不好的情况下数据需要很长时间才能回来，那么顶底设置时间设置多少合适?定时器没法设置，不知道网络请求的具体时间

4. mounted中创建

   触发 actions 的函数，前面使用await 等待数据回来在创建swiper实例，此时mounted前面需要async修饰，这个分情况，如果说需要其他数据异步请求的话这里可能阻塞其他数据的请求，如果不影响其他数据请求，可以使用

5. watch + nextTick

   在watch中监听数据的变化，当数据发生变化的时候且有值的时候，此时需要调用`this.nextTick`这个函数，等待DOM的更新，更新完毕后去创建 swiper 实例

   **nextTick作用**:

   数据更新完之后，里面调用该函数，等待DOM，DOM更新完毕会执行nextTick的回调

   ```js
   watch: {
       bannerList: {
           handler(nval, oval) {
               if (nval && nval.length) {
                   this.$nextTick(() => {
                       this.initSwiper();
                   })
               }
           },
           immediate: true
       }
   },
   ```



### floor Swiper初始化

和 ListComtainer 一样



### 二次封装 Swiper 组件

src/components/SwiperList/index.vue

```html
<template>
    <div class="swiper-container" :ref="refName">
        <div class="swiper-wrapper">
            <div
                class="swiper-slide"
                v-for="(banner, index) in list"
                :key="banner.id"
            >
                <img :src="banner.imgUrl" />
            </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 上下按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
// swiper-bundle.min.js 和 swiper-bundle.min.css
import Swiper from 'swiper/swiper-bundle.min.js';
import "swiper/swiper-bundle.min.css"
export default {
    name: "SwiperList",
    props: {
        list: {
            type: Array,
            required: true
        },
        refName: {
            type: String,
            default: 'mySwiper'
        },
        options: {
            type: Object,
            default: () => ({
                // autoplay: true, //可选选项，自动滑动
                autoplay: {
                    delay: 2000, // 时间间隔
                    pauseOnMouseEnter: true, // 鼠标移入暂停,移出继续
                    disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰(touch)，拖动，点击pagination等。
                },
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        }
    },
    data() {
        return {
            swiperIns: null, // 存实例
        }
    },
    watch: {
        list: {
            handler(nval, oval) {
                if (nval && nval.length) {
                    this.$nextTick(() => {
                        this.initSwiper();
                    })
                }
            },
            immediate: true
        }
    },
    methods: {
        initSwiper() {
            // this.$refs 这个对象中只有当前组件中所有写ref属性的元素
            this.swiperIns = new Swiper(this.$refs[this.refName], this.options)
        }
    }
}
</script>
```

> 注意: 不知道数据是同步的还是异步的，所以在watch监听数据的时候，要有 `immediate: true`
>
> 加 `immediate: true `时候:
>
> 不管同步还是异步的数据，只要数据变，就走watch的处理方法
>
> 不加 `immediate: true `时候:
>
> 不加相当于初始化数据的时候不进行监听，同步数据进来就不走watch的处理函数
>
> 但是异步的会走
>
> 
>
> floor组件是通过循环数据渲染出来，那么肯定是现有数据才能循环，那么在创建floor组件的时候它里面的数据就是同步的



至此未知 Home 页面完成

### search页面

**搭建页面步骤：**

1. 搭建静态页面
2. 初始化数据展示
   * 写接口函数
   * 写store三连环
   * 映射数据到组件展示
3. 交互



静态组件已经准本好了，直接粘贴过来使用即可

### 写请求接口

写的时候发现是post请求，涉及到传参，这里传参的叫法使用的是router中的叫法，分为三种传参，但是和router没有半毛钱关系

axios传参:

1. params传参

   直接拼接

   `getDetai/${1001}`

2. query传参

   `getDetai?id=1001`

   ```js
   export const reqSearchInfo = () => {
       return request({
           url: '/list',
           method: 'post',
           // query传参
           params: {
               id: 1001 // 这是参数
           }
       })
   }
   ```

3. 请求体传参

   直接把参数放到data配置中

   ```js
   export const reqSearchInfo = (searchParams = {}) => { // 注意: 传参所有参数都不是必传的,但是必须有一个空对象
       return request({
           url: '/list',
           method: 'post',
           data: searchParams
       })
   }
   ```



### 三连环

```js
const state = {
    searchInfo: {}
}
const mutations = {
    RECEIVE_SEARCHINFO(state, searchInfo) {
        state.searchInfo = searchInfo;
    }
}
const actions = {
    async getSearchInfo({ commit }, searchParams) {
        try {
            let result = await reqSearchInfo(searchParams);
            if (result && result.code === 200) {
                commit('RECEIVE_SEARCHINFO', result.data)
            }
        } catch (error) {
            console.error('获取搜索页数据失败')
        }
    }
}
```



### vuex的命名空间

什么情况下会开启命名空间?

模块化的时候,除了state以外，其他的内容都和之前没区别，该怎么调用还是怎么调用,那么存在一个问题，当有两个模块的时候 home 、search，这两个模块中都有一个同名actions，例如说 home 中有 getPage 的 actions，search 中也有一个叫 getPage 的 actions，此时我们在调用 actions 中就不知道触发的哪个actions方法了，此时就可以开启命名空间

开启命名空间之后，actions、mutations、getters，state触发的方式全变

#### actions

##### 不使用辅助函数

* 原来:
           `this.$store.dispatch('getPage');`
* 开启命名空间后:
           `this.$store.dispatch('home/getPage');`
           / 前面是空间的名称, / 后面才当当前空间内的方法

##### 使用辅助函数

* 原来:
           `...mapActions(['getPage'])`
* 开启命名空间后:
           `...mapActions('home', ['getPage'])`
           参数一是空间名称,参数二是空间内的actions函数

#### mutations

一般情况下我们不直接吧 mutations 函数映射组件中调用
 如果映射的的话和 actions 的规则一样

#### getters

##### 不使用辅助函数

* 原来:
           `this.$store.getters.newSearchCount`

* 开启命名空间后:
           `this.$store.getters['search/newSearchCount']`

  ​		 / 前面是命名空间，/ 后面才是空间中getters的属性

##### 使用辅助函数

* 原来:
           `...mapGetters(['newSearchCount'])`
* 开启命名空间后:
           `...mapGetters('search', ['newSearchCount'])`
           参数一是空间名称,参数二是当前空间中的getters中的属性



#### state

只要开启模块化就加了一层,不管有没有命名空间

##### 不使用辅助函数

* 原来:
           `this.$store.state.search.searchCount`

  ​		 只要开启模块化就加了一层,不管有没有命名空间

* 开启命名空间后(和没开一样):
           `this.$store.state.search.searchCount`

##### 使用辅助函数

* 原来:

  * 支持对象

    ```js
    ...mapState({
        searchCount: state => state.search.searchCount
    })
    ```

  * 不支持数组

* 开启命名空间:

  * 支持对象

    ```js
    ...mapState({
        searchCount: state => state.search.searchCount
    })
    ```

  * 支持数组

    ```js
    ...mapState('search', ['searchCount'])
    ```



![day05](note/day05.png)



## day05

### search 页面书写过程

1. 静态页面搭建
2. 初始化数据展示
     写接口
     三连环
     组件触发actions,等待数据返回,映射到页面去展示
3. 交互

----------------
点击哪里页面中的数据会发生变化

这些操作都会引起页面数据的变化,那么肯定重新发请求了,携带的参数不一样,对应的参数看接口
发送请求携带的参数
{
    "category3Id": "61",
    "categoryName": "手机",
    "keyword": "小米",
    "order": "1:desc",
    "pageNo": 1,
    "pageSize": 10,
    "props": ["1:1700-2799:价格", "2:6.65-6.74英寸:屏幕尺寸"],
    "trademark": "4:小米"
}

--------------------------

1. 三级分类

     * 数据处理

       点击三级分类引起路由变化，从路由中拿到数据进行数据组装，发送请求

       当再次点击三级分类的时候需要监听路由，拿数据、组装数据、发请求

     * 页面展示

       面包屑展示，判断参数，进行展示

       面包屑删除，点击删除，重新跳转路由

2. 搜索框

     * 数据处理

       点击三级分类引起路由变化，从路由中拿到数据进行数据组装，发送请求

       当再次点击三级分类的时候需要监听路由，拿数据、组装数据、发请求

     * 页面展示

       面包屑展示，判断参数，进行展示

       面包屑删除，点击删除，重新跳转路由，全局事件总线告诉Header组件清空输入框

       总线步骤：

       1. 安装总线
       2. 在修改数据的地方`$on`绑定事件，留下回调
       3. 在触发事件的地方使用`$emit`触发事件，发送参数

3. 品牌

     品牌在搜索器组件中，父子组件通信，子给父传参，使用自定义事件

     search组件接收到数据，组装数据，发送请求

     面包屑展示

     面包屑删除，组装数据发送请求

4. 平台属性

  平台属性在搜索器组件中，父子组件通信，子给父传参，使用自定义事件

  search组件接收到数据，组装数据，发送请求

  面包屑展示

  面包屑删除，组装数据发送请求

5. 优化
    优化一: 点后退返回首页,所有在search页面中的跳转都是用 replace

        1. 删除三级分类和搜索框搜索重新跳转,改成了replace
           当删除 三级分类 和 搜索框搜索 面包屑的时候没有历史记录
        2. 首页点击三级分类到search页,要有历史记录
           再次点击搜索 在search页内部重新跳转了一下,此时要没有历史记录
              修改Header组件中的搜索
        3. 首页点击搜索跳转search页,要有历史记录
           再次点击三级分类,在search页面内容重新跳转,此时要没有历史记录
               修改TypeNav组件的跳转

  优化二: 发送请求的时候,空串的字段要干掉在发送
        考虑 category、keyword、trademark 这几个参数为空串的时候要干掉
        category、keyword 没有值的时候,这两个直接就没携带
        发请求的时候,只要字段是undefined的时候就不会携带(这个活axios给咱干的)

6. 排序
     默认渲染的时候,是综合降序'1:desc'
     当再次点击综合排序的时候,应该变成综合升序'1:asc'
     当再次点击价格的时候,应该变成 价格降序'2:desc'
     当再次点击价格的时候,应该变成 价格升序'2:asc'
     当再次点击综合的时候,应该变成 综合降序'1:desc'
     总结:
     当点击同种类型排序的时候,改变的是升序降序
     当点击不同类型配许的时候,应该是点击类型的降序

     展示页面，图标使用iconfont

7. 分页
     静态页面搭建(静态组件)
             静态组件去课件中粘贴过来即可
     初始化数据展示
     交互



## day06



### 分页器

需要哪些数据？

pageNo 当前页

pageSize 每页条数

total 总条数 

pageCount 连续数，连续显示的页码



在组件内部计算属性:

pageTotal  总页数 = 向上取整(总条数 / 每页条数);

startEnd :   {   start ,  end   }  中间连续页码的起始页和结束页



分页器的数据展示:

```js
	<div class="pagination">
        <button :disabled="pageNo == 1">上一页</button>
        <button v-if="startEnd.start > 1">1</button>
        <button v-if="startEnd.start > 2">...</button>


        <button
            :class="{ active: page == pageNo }"
            v-for="page in startEnd.end"
            :key="page"
            v-if="page >= startEnd.start"
        >{{ page }}</button>


        <button v-if="startEnd.end < pageTotal - 1">···</button>
        <button v-if="startEnd.end < pageTotal">{{ pageTotal }}</button>
        <button :disabled="pageNo == pageTotal">下一页</button>

        <button style="margin-left: 30px">共 {{ total }} 条</button>
    </div>
```

1. 先展示总页码，和总条数

2. 先把中间连续的展示出来

3. 最后考虑(所有的页码都是start和end判断来显示)

   前面写死的 页码1 按钮 和  ... 按钮

   ​		拿起始页 start 去判断，什么情况下 .. 不显示 ,什么情况下 1不显示

   ​		1  ... 3 4 5 6 7 此时的当前页pageNo是5,起始页 start 是3 ---> 正常显示

   ​		1      2 3 4 5 6  此时的当前页pageNo是4,起始页start 是2  ---> ...不应该显示, ... 显示条件 start > 2 才显示

   ​		        1 2 3 4 5  此时的当前页pageNo是3,起始页start 是1  ---> 1 和 ... 不应该显示, start > 1 才显示

   后面写死的  ...按钮 和 总页码

​		拿结束页 end 去判断，什么情况下 ... 不显示 ，什么情况下 pageTotal不显示，假设总页码pageTotal是9

​			3 4 5 6 7  ...  9   当前页pageNo是5，end是7 ---> 正常显示

​			4 5 6 7 8       9   当前页pageNo是6，end是8 ---> ...就不应该显示，...显示的条件 end < 8

​																															8 不能写死 pageTotal - 1

​			5 6 7 8 9             当前页pageNo是7，end是9 ---> ...不显示，写死的9不显示  end < 9 不显示

​																															9 不能写死，9是pageTotal





分页器交互

给每个按钮去绑定点击事件，跳转到响应页面，需要绑定点击事件的按钮：

上一页下一页，写死的 1 和 pageTotal，中间连续的按钮，这些按钮点击触发自定义事件，将要跳转的页面传给父组件

> 当点击相同页码的时候，不许重新发请求



search页这里还有一个问题没解决 ? -------





### detail 页面

商品 search 页面跳转到 商品详情 detail 页面，需要要告诉详情页 商品的id，当详情页拿到商品的id，去发请求，拿数据

1. 静态页面展示(直接粘贴组件即可)

2. 初始化数据展示

   > 注意: 在点击 search 跳转到detail的时候，需要携带id，使用 router 的 params 参数携带的

   拿到商品id(skuId)在页面存了一下，触发三链接、调用接口、拿到数据

   将store中的数据通过 getters 计算一下拿到页面中使用，注意：数据需要做兼容

   展示数据分4部分:

   * 面包屑
   * 商品详细信息
   * 放大镜 和 图片列表
   * 销售属性

3. 交互

   * 放大镜交互

     1. 获取鼠标的实时位置(通过鼠标移动事件)

        e.offsetX 水平位置   e.offsetY 垂直位置

     2. 计算蒙层左上角的位置

        蒙层左上角X = 鼠标实时位置e.offsetX - 蒙层宽度的一半 this.$refs.maskRef.clientWidth / 2

        蒙层左上角Y = 鼠标实时位置e.offsetY - 蒙层高度的一半 this.$refs.maskRef.clientWidth / 2

        

        计算出蒙层的位置，赋值给蒙层，让蒙层随着鼠标移动即可

        > 注意：需要判断边界条件

        水平方向

        ​	* 不能小于0

        ​	* 也不能大于  event盒子宽 - 蒙层盒子宽

        垂直方向

        ​	* 不能小于0 

        ​	* 也不能大于 event盒子高 - 蒙层盒子高

     3. 蒙层跟着动，大图页跟着动，大图和蒙层的关系是 -2 倍，直接拿蒙层算出的结果乘上一个 -2 得到大图的结果

     

   * 图片列表 - 1. 轮播展示图片列表 2. 点击图片列表放大镜图片改变

   * 销售属性的点击 - 只有交互，没有改变价格

   * 添加购物车交互逻辑(代码不多，重要)

   

   昨天我们讲的时候，遇到一个问题，打印蒙层点开显示 宽高为0，但是获取值却能获取到的问题

   

   

   

   ------------------------------------------------------------

   

   * 图片列表 - 1. 轮播展示图片列表 2. 点击图片列表放大镜图片改变
   * 销售属性的点击 - 只有交互，没有改变价格
   * 添加购物车交互逻辑(代码不多，重要)





## day07

### search页面 当参搜索参数发生改变的时候，应该重置页码，从第一页开始展示

搜索条件有哪些?

三级分类导航、搜索框内容、品牌、平台属性、排序这些都是搜索页参数会改变的地方

我们在这区分开：

当翻页发生时，其他的参数都不会变

只要其他参数发生改变，翻页的参数就不会变

总结：翻页和其他参数的变化是互斥的

如何做?

声明一个数据 `recordPageNo` 记录之前的页码变化，每次页码发生改变的时候，都去记录一次

等待下一次翻页的时候那这个数据去对比 `recordPageNo` 和 `searchParams.pageNo`

​		如果是翻页操作，改的翻页的参数`searchParams.pageNo`，这两个值一定不一样

​		如果不是翻页操作，改的其他参数，这两个值一定相同

在哪里进行这个比较?

在发送请求前进行对比，之前发请求直接调用的是`store`中的`actions`的 `getSearchInfo` 这个方法，现在相当于加了一层函数，将`actions`发请求的方法该成了`getSearchInfoHandler`，然后页面中所有的地方都不变，加一个`getSearchInfo`的方法，在这个方法中调用`getSearchInfoHandler`，此时就可以在`getSearchInfo`中加入自己的逻辑



### detai - 小图列表交互

#### 小图列表轮播

* 先拿正常的swiper轮播写了一遍 - 为了得出这里轮播的配置项目

  步骤：

  1. 引入 js 和 css

     ```js
     import Swiper from 'swiper/swiper-bundle.min.js'
     import 'swiper/swiper-bundle.min.css';
     ```

  2. 监视数据，数据发生变化，等待DOM更新

     ```js
     watch: {
         skuImageList: {
             handler(nval, oval) {
                 if (nval && nval.length) {
                     // 等待DOM更新
                     this.$nextTick(() => {
                         this.initSwiper();
                     })
                 }
             },
             immediate: true
         }
     },
     ```

* 使用封装好的组件 `SwiperList` 去渲染

  遇到的问题：我们无法将当前小图列表的样式传给 `SwiperList` 组件

  使用 slot - 这种通信是父子之前，父给子传模板和样式

  直接给组件中写一个`<slot><slot>`标签，用来将当前组件的模板传给`SwiperList`组件

  > 注意：
  >
  > 补充了solt的语法
  >
  > 当使用[默认插槽]的时候其实是有name属性的，只是name属性是default
  >
  > ```html
  > <SwiperList :list="skuImageList" :options="options">
  >     <template #default>
  >         <div class="swiper-wrapper">
  >             <div
  >                  class="swiper-slide"
  >                  v-for="(skuImg, index) in skuImageList"
  >                  :key="skuImg.id"
  >                  >
  >                 <img :src="skuImg.imgUrl" @click="getIndex(index)"/>
  >             </div>
  >         </div>
  >         <div class="swiper-button-next"></div>
  >         <div class="swiper-button-prev"></div>
  >     </template>
  > </SwiperList>
  > ```
  >
  > ##### # 是 v-slot 指令的简写

#### 点击小图列表中的图片 - 放大镜图片要改变

这是跨组件间的通信 - 全局事件总线

全局事件总线步骤：

1. 安装总线
2. 接收参数的地方，绑定事件，留下回调
3. 触发事件的地方，传递参数

##### ImageList

```js
<img :src="skuImg.imgUrl" @click="getIndex(index)"/>
    
methods: {
    getIndex(index) {
        this.$bus.$emit('indexChange', index);
    }
}
```

##### Zoom

```js
mounted() {
    this.$bus.$on('indexChange', this.changeIndexHandler)
},
```

在Zoom中的 `changeIndexHandler`方法改变下标，拿到数组中点击的那一张图片



### detail - 销售属性交互

我们的销售属性只有交互，不改变价格，通过修改数据`isChecked`，使用排他思想，所有的`isChecked`都变成'0'，点击的那一个变成'1'，让后通过类名来加边框显示



### 加入购物车

#### 加入前数量的限制

点击加减按钮，让数量变化

输入框输入内容，不能输入字符串，不能输入负数，不能输入小数

1. v-mode.number 收集数据的时候收集到的数字字符(String)，将自动变成数值(Number)

   不能限制 字符串的输入

2. change事件 - 当失焦且值发生变化的时候触发

   input事件    - 只要值发生变化就会触发(实时触发)

#### 点击添加购物车

点击添加购物车发送网络请求，然后跳转页面到 `添加购物车成功` 页面

疑问：

添加购物车为什么要调用接口？

为什么要等待调用接口成功再跳转？

调用接口成功返回是null，是`actions`中的函数返回的null，那么如何让组件知道已经调用成功了

#### 拓展回顾：async 和 await 语法

##### async

async函数返回的这个promise的成功和失败由谁来决定?

1. return一个非promise值,那么async函数的promise是成功的
2. return一个promise值,那么async函数的promise 由 return的这个promise值来决定
   * return 的promise是pending状态,那么 async函数的promise也是pending
   * return 的promsie是成功的,那么 async函数的promise也是成功的
   * return 的promise是失败的,那么 async函数的promise也是失败的
3. 在async函数中抛错,那么 async函数的promise是失败的

##### await

await 必须在 async 函数中使用

1. await 跟一个普通值

   得到的结果是一个普通值

2. await 跟一个promise值

   跟的是一个成功的promise值,那么结果得到这个成功promise得值

   跟得是一个失败的promise值,得不到失败的promise值,直接抛错

总结：await 只能获取到成功的 promise 值 , 如果 promise 失败我们需要 try...catch 来捕获错误



### 跳转 AddCartSuccess

1. 静态页面(定义、注册、使用)

   定义：直接粘贴组件

   注册：在`routes`中注册

   使用：在点击添加购物车成功之后，进行跳转 $router.push()

   > 注意参数：
   >
   > 1. 商品数量，通过路由传参
   >
   > 2. 商品信息传递，通过 sessionStore 传递
   >
   >    在这里为什么使用sessionStroage?

2. 数据初始化

   AddCartSuccess 组件并没有发请求，起sessionStroage拿数据展示，数量去$route.path.params中拿

3. 交互

   点击按钮 `查看商品详情`，直接`<router-link>`跳转回来即可

   点击按钮 `去购物车结算`，使用`<router-link>`跳转即可



> 拓展:
>
> ```js
> 1. 商品数量从路由参数携带过去
> 2. 跳转到添加购物车成功页面,并没有发送请求去获取商品信息?
>      商品信息是怎么传过去的?
>      采用的是 localStroage 和 sessionStroage,将详情页的商品信息传过去的
>      这里我们用的 sessionStroage,为什么使用sessionStroage?按下不表 - 等讲完这块
>  拓展:
>      浏览器有几种存储数据的方式?
> 1. cookie
>      http请求是无状态请求,cookie的出现解决了http无状态的问题,他是一个浏览器的技术,两个作用:
>      1. 状态保持
>      2. 存储数据 - cookie只能存储4K左右大小的数据
> 注意: cookie是分域名的,它不能跨域
> 2. session
>      session是一个服务端的技术,由于使用cookie做状态保持的时候,安全性不够,产生了session这种技术
>      如何使用?
>      当发送请求到服务器的时候,session会生成一个session ID存储到服务器中,并且返回给浏览器端
>      浏览器端存储到cookie中,当再次发送请求的时候,在请求报文的请求头中携带上cookie这个字段,值就是session ID
>      服务器在接收到这个请求的时候,拿着cookie携带的session ID 和服务端存的session ID做对比,来验证身份
> 加强了cookie的安全性,相当于对cookie技术的补充
> 3. token
> token可以理解为一个令牌,一个加密字符串,加密算法有很多 base64、SHA-256、md5 等加密技术加密的
>      使用过程?
>      服务器生成一个token,返回给浏览器,浏览器在接收到这个token的时候,存储起来(存的时候可以使用cookie或localStroage)
>      下次发送请求的时候在请求头携带上token这个字段,服务端接收到这个token进行解密,校验身份
>  1.可以跨域
>  2.服务端不用专门去存储一个值(如果服务器是集群,那么存的session ID,需要同步到所有的服务器中,而token不用,解密就可以校验)
> 4. JWT Token
> 全称叫 Json Web Token,和token差不多,也是加密,在加密的过程中,会放入一个密钥字符串是服务器独有的
> JWT Token存的内容是三段式的 头部.载荷.签名
> 使用方式和 token 一样
> 为什么会有JWT Token呢?
> JWT Token 用来实现多点登录(pc端、移动端、pad端)
> ```





## day08

### ShopCart

1. 静态页面(定义、注册、使用)

   定义：直接粘贴组件

   注册：在`routes`中注册

2. 数据初始化展示

   发请求，拿数据，映射到页面进行展示

   直接展示的数据(商品的信息)、计算展示的数据(选中的商品个数、总价、是否全部选中)

3. 交互

   * 购物车商品选中
   * 购物车商品删除
   * 购物车商品数量的修改
   * 购物车商品的全选/全不选
   * 删除已勾选的商品
   * 点击结算跳转交易页面

   

### 初始化数据展示

问题：拿不到数据，购物请求列表没数据

#### userTempId

在发送请求的时候，不知道谁是谁，直接在详情页点击添加到购物车调用接口传参传了 skuId 和 skuNum 这两个参，后端知道了添加的商品和商品数量，但是后端不知道添加给谁，这是我们遇到的问题？

![day08-用户临时标识](note/day08-用户临时标识.png)

如何解决:

在发送请求的过程中，携带一个请求头 `userTempId` 对添加购物车的人做身份识别（未登录状态的临时身份标识），这个标识有什么要求呢？

1. 不能老变

   第一次加入购物车之后，当刷新页面(或关闭浏览器再次打开)再次选购的时候，还得是同一个人，同一个临时标识

2. 唯一

   生成的临时标识不能和别人重复，如果重复，加入购物车商品加给别人了

使用的是 `UUID` 这个包生成一个唯一的字符串，放到localStroage中，每次刷新页面去localStroage取这个标识，然后在之后的请求当中都去携带上这个标识(在axios拦截器中去携带)

当我们有了用户临时标识的时候，添加购物车商品之后，在去拿购物车商品列表数据就能拿到了

#### 直接展示的数据

这里需要注意:数据的结构

```json
{
  "code": 200,
  "message": "成功",
  "data": [
    {
      "cartInfoList": [
        {
          "id": 15360,
          "userId": "2106a8e5-91f1-42d7-a1a9-9899168e2949",
          "skuId": 6,
          "cartPrice": 1299,
          "skuNum": 2,
          "imgUrl": "http://47.93.148.192:8080/group1/M00/00/01/rBHu8l-rgJqAHPnoAAF9hoDNfsc505.jpg",
          "skuName": "Redmi 10X 4G Helio G85游戏芯 4800万超清四摄 5020mAh大电量 小孔全面屏 128GB大存储 8GB+128GB 冰雾白 游戏智能手机 小米 红米",
          "isChecked": 1,
          "createTime": "2022-08-12 08:54:51",
          "operateTime": "2022-08-12 08:54:51",
          "isOrdered": 0,
          "orderTime": null,
          "sourceType": "QUERY",
          "sourceId": 6,
          "skuPrice": 1299,
          "couponInfoList": null
        }
      ],
      "activityRuleList": null,
      "createTime": "2022-08-12 08:54:51"
    }
  ],
  "ok": true
}
```

#### 计算展示的数据

1. 商品选中的数量

   ```js
   conputed: {
       selectNum() {
           let result = this.cartList.reduce((supPrev, cartInfo) => {
               // 内层累加的结果
               let res = cartInfo.cartInfoList.reduce((prev, cartItem) => {
                   // 因为isChecked 选中是1 没选中是0
                   return prev + cartItem.skuNum * cartItem.isChecked
               }, 0)
               // 上一次累加的值 + 当前需要加的值
               return supPrev + res;
           }, 0);
           return result;
       },
   }
   ```

2. 商品的总价

   ```js
   computed: {
       ...,
       totalPrice() {
           let result = this.cartList.reduce((supPrev, cartInfo) => {
               // 内层累加的结果
               let res = cartInfo.cartInfoList.reduce((prev, cartItem) => {
                   // 因为isChecked 选中是1 没选中是0
                   return prev + cartItem.skuNum * cartItem.skuPrice * cartItem.isChecked
               }, 0)
               // 上一次累加的值 + 当前需要加的值
               return supPrev + res;
           }, 0);
           return result;
       },
   }
   ```

3. 是否全选

   ```js
   computed: {
       ...,
       isCheckedAll() {
           let result = this.cartList.every(cartInfo => {
               let res = cartInfo.cartInfoList.every(cartItem => {
                   return cartItem.isChecked
               })
               return res;
           })
           return result;
       },
   }
   ```



### 交互

注意：在购物车列表中的所有交互都进行调接口、发请求

#### 商品选中状态的改变

当勾选checkbox的时候，去调用actions，发请求，拿数据

```js
methods: {
    ...mapActions('shopcart', ['getCartList', 'setCheckCart', 'setDeleteCart', 'addShopCart', 'setBatchCheckCart']),
    async changeCheckCart(cartItem) {
        try {
            await this.setCheckCart({
                skuId: cartItem.skuId,
                isChecked: cartItem.isChecked == 1 ? 0 : 1, // 这里不需要拿事件源的value,只需要拿之前的状态进行取反
            })
            alert('修改状态成功');
            // 重新拿数据,重新渲染,为什么这么做?因为可能回走到catch中
            this.getCartList();
        } catch (error) {
            console.error(error);
            // 当请求发生错误的时候,此时不应该让刚刚 checkbox 选中
            // 如何解决?
            // 当请求发生错误的时候,此时只是 checkbox 选中,页面的数据并没有发生变化
            // console.log(cartItem.isChecked);
            // 思路:
            //      选中的操作是点击默认的操作,所以尝试取消默认事件
            //      给 click 事件 加上阻止默认行为 @click.prevent
            // 这里走catch方法的时候,不能使用强制刷新 this.$forceUpdate(); 为什么:
            // 因为: this.$forceUpdate(); 对 input 的 checkbox 选中不起作用
        }
    },
}
```

#### 商品的删除

```js
methods: {
    // 删除购物车商品
    async deleteCart(cartItem) {
        try {
            await this.setDeleteCart(cartItem.skuId); // 触发actions
            alert('删除购物车商品成功');
            // 重新获取数据
            this.getCartList();
        } catch (error) {
            // alert('删除购物车商品失败');
            // 问题: 假如删除失败,这里打印 error 是个 字符串 ? 对象 ?
            // 看错误来源:
            // 1. 拦截器抛错
            //      抛出的错误error是 axios 创建的一个错误对象 AxiosError 里面有一堆属性 (有message这个属性)
            // 2. actions 函数中抛错
            //      Promise.reject('删除商品失败');
            //      这里的error就是reject方法中的字符串 '删除商品失败'
            // 需求: 假设我希望不管哪里给过来错误 都 可以弹出框弹出错误信息?
            // 拦截器错误  alert(error.message);
            // Promise.reject('删除商品失败');   alert(error);
            // 这样是不对的,应该统一行为,拿么怎办?
            //      将actions失败的reject稍加改动 Promise.reject(new Error('删除商品失败'))
            //      抛出的是一个错误对象,这个错误对象是自己new出来的,有message这个属性
            // 总结:
            // 以后抛错的时候,看下外面(看下catch错误的地方怎么写)
            //      如果catch错误的地方写字符串 -> Promise.reject('添加购物车失败')
            //      如果carch错误的地方写error.message -> Promise.reject(new Error('添加购物车失败'))
            alert(error.message);
            console.error(error);
        }
    },
}
```

#### 商品数量的修改

```js
methods: {
    validateInputSkuNum(e, cartItem) { // e是为了拿输入的值, cartItem 改的商品
        // 对输入的内容进行校验 1.字符串 2.负值 3.小数
        let value = Number(e.target.value);
        // console.log('输入的值是你想要的值->', value, '原本的值', cartItem.skuNum);
        // Number是强转,只要输入的内容包含除了数字的字符就会转成NaN
        // 问: if判断有哪些是false  js中只有这6种: false  undefined null  ""  0  NaN
        if (!value) {
            alert('请输入合法内容');
            this.$forceUpdate(); // 强制刷新当前组件,input框内容变了,但是我们的数据并没有变,重新让数据渲染一次,展示就回到之前的状态了
            return
        }
        // 负数
        if (value < 1) {
            alert('请输入一个正数');
            this.$forceUpdate();
            return;
        }
        // 小数
        if ( parseInt(value) !== value ) { // 将数值转成 整数,如果和之前不一样,一定是小数,如果一样证明是整数
            alert('请输入一个整数');
            this.$forceUpdate();
            return
        }
        // 调接口,改数据
        // this.changeSkuNum(value, cartItem);


        // 注意: 不能直接调用,需要给  changeSkuNum  传的num是差值
        // value 是你输入的值   cartItem.skuNum 是之前本来就有的值
        // value - cartItem.skuNum // 这是差值
        this.changeSkuNum(value - cartItem.skuNum, cartItem);
    },
    // 修改购物车商品数量 - 需要知道改的数量,和改的谁
    async changeSkuNum(num, cartItem) { // 这个num是 数量的差值
        // console.log('差值', num);

        // 问题:
        // 一直点击减号数量变成了负值这是问题, 点击减号传过来的是 -1
        // 如何避免这个问题?
        // 进行校验和修复
        // 拿差值num + 当前数据的数量cartItem.skuNum  = 最终数量  ----> 拿着最终数量去判断,不能让最终数量小于1即可
        if (num + cartItem.skuNum < 1) {
            // 那么此时应该对 num 这个差值进行修复
            // 假设
            // num + cartItem.skuNum < 1
            //  -1 + 1               < 1
            //       之前数量           判断条件
            // 此时已经满足条件了,数量已经越界
            num = 1 - cartItem.skuNum; // 进行修复,修复num这个值,最终我们传参的时候传的是num这个差值,所以需要修复的是 num 这个数
        }


        // 这个接口为啥不写成跟购物车那款一样，我们传的value做参数去直接替换数据库里的数据
        // 在添加购物车的地方,商品数量相当是0个,所以输入几都是增量

        try {
            await this.addShopCart({
                skuId: cartItem.skuId,
                skuNum: num // 这里的skuNum要接收的数据是 数量的差值,要增加的个数,或者要减少的个数
            })
            alert('修改商品数量成功');
            // 重新请求数据
            this.getCartList();
        } catch (error) {
            console.error(error);
        }

    }
}
```





## day09

#### 删除选中的商品

筛选商品中 isChecked 为1 的商品组成商品列表，去调用用批量删除的actions，然后去调用接口，需要注意如若筛选的 skuIdList 没有成员，就不要调用接口了

```js
methods: {
    ...
    async deleteCheckedAll() {
        // 组装数据
        // 这里的idList是选中的idList,需要判断当前的选中状态来进行添加
        let skuIdList = this.cartList.reduce((supPrev, cartInfo) => {
            let res = cartInfo.cartInfoList.reduce((prev, cartItem) => {
                if (cartItem.isChecked) { // 判断是否选中 1代表选中 0代表没选中
                    return prev.concat(cartItem.skuId)
                } else {
                    return prev
                }
            }, [])
            return supPrev.concat(res)
        }, []);

        // 校验数据
        // 没有选中不能删除
        if (!skuIdList.length) {
            alert('没有选中,不能删除')
            return
        }

        // 发送请求
        try {
            await this.setBatchDeleteCart(skuIdList);
            alert('删除选中商品成功');
            this.getCartList(); // 刷新页面
        } catch (error) {
            alert(error);
            console.error(error);
        }
    }
}
```



> 接着要点击结算，进入结算页面，结算页面是必须登录的，如果不登陆掏钱给谁掏



### 注册

#### 静态页面展示

定义、注册、使用

#### 数据的初始化展示 (没有需要必须展示的内容)

#### 交互

收集表单中的数据，简单校验(注册的校验我们单独返回说)，发送网络请求

##### 验证码

验证码的真实逻辑

![day09-短信验证码校验](note/day09-短信验证码校验.png)

我们项目中没有用到短信服务，使用点击按钮发送请求直接拿回验证码，这里后端会校验验证码是不是该手机号发送请求回来的验证码



### 登录

收集用户输入手机号和密码，触发actions，发送请求，拿回数据

注意：登录返回的数据一般只有一个 token ，只要返回 token 代表登录成功，登录并不能获取到用户信息

拿到 token 之后，存到 `store` 中，获取个人信息的时候要使用 token 获取

**什么时候获取个人用户信息**

在路由跳转的过程中，拿着 `store `当中的 token 去获取用户信息

路由跳转涉及到路由守卫



### 路由守卫

什么是路由守卫?

在路由跳转的过程中可以拦截，是钩子函数

有哪些?

全局前置守卫 			`router.beforeEach((to, from, next) => {})`
全局解析守卫			 `router.beforeResolve((to, from, next) => {})`
全局后置钩子守卫	 `router.afterEach((to, from) => {})`
路由独享守卫			在 `route` 中配置 `beforeEnter: (to, from, next) => {}`
组件内守卫(三个)	 用的比较少	

```js
// 组件内守卫,组件内守卫用的比较少,组件内有自己的钩子
beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 注意: 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log('beforeRouteEnter');
    next();
},
// 复用
beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('beforeRouteUpdate');
    next();
},
// 离开
beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('beforeRouteLeave');
    next();
}
```

路由的执行过程：

![day09-路由守卫的执行过程](note/day09-路由守卫的执行过程.png)

![day09-路由守卫解析过程](note/day09-路由守卫解析过程.png)



> 注意：全局守卫(全局前置、全局解析、全局后置)、只要路由发生变的时候就会走全局守卫



路由守卫中的参数:

to: 要去哪，是一个 `route`

from: 从哪里来，是一个 `route`

next 参数，是一个函数，控制放行、不放行、到哪去

​		`next()`   放行

​		`next(false)`  拦截不动，什么都不操作

​		`next('/home')` 或  `next({ path: '/home' })` 告诉当前应该去哪



### 获取用户信息

在路由跳转的时候获取用户信息，每次都会走全局前置，在全局前置守卫中做这件事 

```js
import store form '@/store'

router.beforeEach(async (to, from, next) => {
    // 判断登录没有,只要有token就代表登录
    const token = store.state.user.token; // 从store中拿token
    if (token) {
        // 如果有token,判断有没有用户信息
        const userInfo = store.state.user.userInfo;
        if (userInfo.name) {
            // 如果有用户信息直接放行
            next()
        } else {
            // 没有用户信息,就去获取
            try {
                // 等待接口返回用户信息
                await store.dispatch('user/getUserInfo');
                next()
            } catch {
                // 拿不到用户信息: 1.网络错误 2.token失效(token过期)
                // 清除token
                store.dispatch('user/resetToken')
                // 登录页重新登录获取token
                next('/login')
            }
        }
    } else {
        // 在项目中有的页面是可以看到的,但是有的页面必须登录,例如:
        // 首页、搜索页、详情页都是所有人都能看，交易、支付、个人中心这些事必须登录
        // 目前这里全部放行，等所有的页面完成后，回来再做限制条件
        next()
    }
})

```



#### 自动登录

将token存储到 localStorage 中，只要刷新页面就去 localStorage 中去拿token



### 退出登录

点击`退出登录`按钮，需要调用接口，告诉后端当前这个token失效了，等待接口调用成功、清除我们store中的 token、 userInfo、同时清除 localStorage 中 token



### 登录 和 未登录 两种状态 购物车的逻辑

未登录 会使用用户临时标识(userTempId)来区分用户，当登录的时候会携带 token 和 userTempId ，此时后端会把刚刚记录的 临时用户标识(userTempId)购买的商品，放到当前登录用户的购物车中，同时轮式用户标识(userTempId)中的商品就消失了

![day09-购物车商品展示逻辑](note/day09-购物车商品展示逻辑.png)





## day10

### 交易页面

1. 静态页面展示(定义、注册、使用)

   直接赋值粘贴过来组件，在路由当中注册，在购物车中点击结算跳转到结算页面

2. 初始化数据展示

   调用接口拿参数

   调用 trade 接口，拿交易信息，不需要传参，为什么不需要传参，因为当前是登录状态，从当前登录账号的购物车中拿到所有的商品筛选出选中的返回给前端即可

   调用 获取地址列表接口，拿当前用的地址列表信息，也是不需要传参

   拿到数据展示即可

3. 交互
   * 选择地址列表，将点击的地址列表设置为默认地址(排他思想)，同时下方的收货地址跟着变
   * 收集卖家留言

> 注意：交易页面只是展示了购物车中选中商品，并没有生成订单



### 点击提交订单 - 创建订单

调用接口创建订单，后端需要的参数：商品列表、收获人信息（名称、手机、地址）、买家留言（订单备注）、交易编号

创建完成订单之后，跳转到支付页面

> 注意：当调用接口创建订单之后，后端会返回一个订单编号(orderId)，这个orderId需要传递给支付页面，通过路由的query参数传递过来，在支付页面拿到orderId去获取支付信息



### 支付

1. 静态页面的展示（定义、注册<在路由中注册>、使用<在交易页面点击'提交订单'的时候跳转>）

2. 初始化数据展示

   调用接口返回数据，返回的数据中主要就是两个：总金额 和 付款时的二维码链接

3. 交互

   点击立即支付，弹出二维码弹窗

#### 二维码的展示

使用 qrcode 包来生成二维码

```js
1. 安装
        npm i node-qrcode --save
2. 引入
        import QRCode from 'qrcode'
3. 使用
        QRCode.toDataURL(text);
        使用QRCode调用toDataURL,传入一个字符串text,将这个字符串转成一个base64格式url,得到结果
        注意: 这个方法是异步的,需要使用 .then().catch() 或者使用 async/await
```

#### 弹窗 - element-ui

安装

`npm i element-ul -S`

##### 全部引入(用的多)

```js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```

##### 按需引入 - 需要用什么就引入什么

在 element-ui 中，组件分为两类组件，这两类组件的引入方式少许不同

```js
// 像一些普通的组件直接引入进来，使用Vue.component()注册一下即可使用，例如: button
import { Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.component(Button.name, Button);
```

```js
// 像 MessageBox 和 Message 这类组件引入需要挂在Vue实例的原型对象上才可以使用
// 目的: 为了在组件内部使用 this. 能获取到这些组件
import { MessageBox, Message, } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$message = Message;
```



#### 弹出弹窗 - 显示二维码

```js
async payInfoDialog() {
    // 1. 准备二维码: 将接口返回的支付链接转成一个二维码
    let imgUrl;
    try {
        imgUrl = await QRCode.toDataURL(this.paymentInfo.codeUrl);
    } catch (error) {
        console.error('生成二维码图片url失败')
    }
    // 2. 弹出弹框
    this.$confirm(`<img src="${ imgUrl }" />`, '使用微信支付', {
        dangerouslyUseHTMLString: true, // 允许弹出框解析html内容
        center: true, // 居中
        confirmButtonText: '我已支付成功', // 确认按钮
        cancelButtonText: '支付遇到问题', // 取消按钮
        showClose: false, // 右上角关闭X是否显示
        closeOnClickModal: false, // 按下遮罩是否关闭 弹出框
        closeOnPressEscape: false, // 按下ESC是否关闭 弹出框
        // 暂停实例关闭
        // function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；
        // instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；
        // done 用于关闭 MessageBox 实例
        beforeClose: (action, instance, done) => { // 这个函数不能用ES5函数,因为this指向有问题
            if (action === 'confirm') { // 点击的确定按钮 '我已支付成功'
                // 需要判断'那小子掏钱没',有个简便办法
                // 在轮询中记录一下当前支付的支付状态码,在这个地方可以判断,如果这个状态码为200就不发请求了
                // if (this.payStatus === 200) { // 代表支付成功,跳走
                //     // 1. 清除定时器
                //     clearInterval(this.timer);
                //     // 2. 弹框隐藏(使用done方法关闭 或者 实例关闭)
                //     done();
                //     // instance.close();
                //     // 3. 给个提示
                //     this.$message.success('支付成功');
                //     // 4. 跳转走,到支付成功页面
                //     this.$router.push('/paySuccess');
                // }

                // 留个后门,不去判断,点击确定直接跳走
                clearInterval(this.timer);
                done();
                this.$message.success('支付成功');
                this.$router.push('/paySuccess');
            } else { // 要么关闭按钮'close' 要么取消按钮'cancel'
                this.$message.warning('请联系尚硅谷客服小姐姐 13366667777')
                done(); // 关闭当前实例
            }
        }
    }).catch(() => {}) // 实在看着点击取消promise抛出的错误难受,写一个catch即可
}
```



#### 轮询

查询当前订单的支付状态

使用轮询

当弹出框弹出的时候,此时就应该去询问后端"这小子付钱没",并且是持续不断的去询问

没有任何操作,当付钱成功之后,应该自动跳转到支付成功页面

其实本质上就是使用了个定时器,一直不断发请求,询问后端"这小子付钱没,知道检测到付钱之后,跳走到支付成功页面

接口返回code 205代表未支付  200代表支付成功

```js
// 定时器不存在才创建,存在就不创建了
if (!this.timer) {
    this.timer = setInterval(async () => {
        try {
            let result = await this.$api.reqPayStatus(this.orderId)
            this.payStatus = result.code; // 每一次轮询记录一下当前支付的状态码
            if (result && result.code === 200) {
                // 支付成功....
                // 1. 清除定时器
                clearInterval(this.timer);
                // 2. 弹框隐藏
                this.$msgbox.close(); // 关闭弹窗
                // 3. 给个提示 支付成功(两种写法)
                this.$message.success('支付成功');
                // this.$message({
                //     message: '支付成功',
                //     type: 'success'
                // })
                // 4. 跳转走,到支付成功页面
                this.$router.push('/paySuccess');
            }
        } catch (error) {
            console.error(error)
        }
    }, 3000)
}
```

支付成功跳转至支付成功页面，两个按钮：查看订单 - 去个人中心查看、继续购物 - 去首页继续购物



### 个人中心

个人中心做我的订单、团购订单，这里使用二级路由拆分去做

#### 我的订单

发送订单分页请求，拿数据展示

在这里一个表格就是一个订单，需要注意的是收货人、金额、状态、操作需要合并单元格

表格左侧的商品正常 `v-for` 循环 `<tr>` 唯独到了表格右侧需要合并 收货人、金额、状态、操作，因为每次订单的商品数量不同，所以右侧合并单元格的数量不同，所以合并单元格的数量不能写死，应该有商品数量来决定



## day11

#### 分页器 - 我的订单

就是用之前封装好的组件就行

注意参数：当前页、每页条数、连续数、总条数

回调: 当页码改变的时候会有一个回调，页码改变重新发请求拿数据

#### 团购订单

##### $set

对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property

```js
参数一: 目标对象
参数二: 属性名
参数三: 属性值
this.$set(this.userInfo, 'sex', '男');
```



#### 切换二级路由如何缓存 - 我的订单 - 团购订单

使用 keep-alive 缓存 router-view 即可

keep-alive 身上有几个属性:

* include 包含的意思，写组件的name属性，只有配置了的组件名会被缓存
* exclude 排除的意思，写组件的name属性，配置了的组件名不会呗缓存
* max 最大缓存组件数



#### 全局守卫的限制条件

1. 如果没登录，访问 （交易相关、支付相关、用户中心相关）跳转到登录页面 

2. 登录后会自动跳转前面想去而没到的页面

   在跳转登录之前记录一下path --->　使用 router 携带query参数来记录

   跳转完成之后,在登录组件中拿到记录的path  ---> 去query参数中拿这个记录

```js
router.beforeEach((to, from, next) => {
    const token = store.xxxxxxxx;
    if (token) {
        xxxxxxx
    } else {
        // 走没有token的else分支，是没有登录的状态
        // 在没有登录状态下,访问(交易、支付、用户中心)是应该跳转到登录
        // 其他情况正常放行
        if ( to.path.includes('/trade') || to.path.includes('/pay') || to.path.includes('/center') ) {
            next(`/login?redirect=${ to.path }`)
        } else {
            next()
        }
    }
})

Login组件:
methods: {
    async Login() {
        try {
            await api.login();
            // 拿之前记录的值，拿不到就用首页
            const redirect = this.$route.query.redirect || '/home'
            this.$router.push(redirect)
        } catch (e) {
            console.error(e);
        }
    }
}
```



#### 独享守卫限制条件

* 只有携带了 skuNum 和 sessionStorage 内部有skuInfo数据  才能看到添加购物车成功的界面

  路由独享守卫和组件守卫使用

  如果是跳转单独的一个页面，需要检测，那么使用这两个守卫

  ```js
  	{
          path: '/addCartSuccess/:skuNum',
          caseSensitive: true, // 匹配规则是否大小写敏感？(默认值：false)
          component: AddCartSuccess,
          // 注意: 需要有 skuNum 和 SessionStroage 中商品信息才能跳转到该页面,否则不行
          beforeEnter(to, from, next) {
              const goodsInfo = sessionStorage.getItem('SKUINFO_KEY'); // 注意:拿出来的是json字符串,在这里不需要转成对象,只要判断有没有这个值即可
              if (to.params.skuNum && goodsInfo) {
                  next(); // 放行
              } else {
                  alert('必须有商品数量和商品信息才能展示添加购物车成功页面')
                  next(false); // 什么多不做,直接拦住,不放行
              }
          }
      },
  ```

* 只有从购物车界面才能跳转到交易页面(/trade)（创建订单）

  ```js
  beforeEnter(to, from, next) {
      if (from.path.includes('/shopcart')) {
          next()
      } else {
          alert('只能从购物车页面跳转到交易页面')
          next(false)
      }
  }
  ```

* 只有从交易页面（创建订单）页面才能跳转到支付页面

  ```js
  beforeEnter(to, from, next) {
      if (from.path.includes('/trade')) {
          next()
      } else {
          alert('只能从交易页面到支付页面')
          next(false)
      }
  }
  ```

* 只有从支付页面才能跳转到支付成功页面

  ```js
  beforeEnter(to, from, next) {
      if (from.path.includes('/pay')) {
          next()
      } else {
          alert('只能从支付页面到支付成功页面')
          next(false);
      }
  }
  ```

  



### 图片懒加载

图片在没有进入可视区域的时候不加载，只有进入可视区域的时候去加载，那么此时需要一个短暂显示的展位图

怎么做 ?

1. 下载安装 - 安装1版本

   ```js
   npm i vue-lazyload@1
   ```

2. 注册

   ```js
   import Vue from 'vue'
   import VueLazyload from 'vue-lazyload'
   import loading from '@/assets/images/loading.gif'
   // 在图片界面没有进入到可视范围前不加载, 在没有得到图片前先显示loading图片
   Vue.use(VueLazyload, { // 内部自定义了一个指令lazy
       loading,  // 指定未加载得到图片之前的loading图片
   })
   ```

3. 使用 - 插件创建了一个指令 v-lazy

   ```html
   <img v-lazy="goods.imgUrl">
   ```

   

### 路由懒加载

将路由中所有涉及到的组件，拆分出来，不再是一次性加载所有的内容

正常加载:

**import Home from '@/page/Home'**

1. 同步加载
2. 正常加载的时候,直接导入的文件会一次行打成一个包
import Home from '@/page/Home'

懒加载

**const Home = () => import('@/page/Home')**

1. 异步加载
2. 导入的文件会分开打成每个模块的包,这样就拆分开所有的组件,用到哪个模块就加载哪个模块



### vee-validate - 前端表单校验

文档单独查看



前台项目结束

-----------------------------------------------------------





## 组件间通信

### props

props 父子组件之间的通信

父给子传参用的,怎么传?

1. 给组件标签绑定属性传值,绑定的属性名需要在子组件接收,属性值是当前组件的数据
2. 在子组件中去接收,使用props接收参数,接收绑定在组件标签上的属性名
    props有3种接接收方式:
3. 数组形式
     props: ['content']
4. 对象形式 - 规定了接收属性的类型
     props: {
         content: String,
     }
5. 配置对象的形式
     props: {
         content: {
             type: String,
             required: true,
             // default: ""
         }
     }
     注意:
            1. required 和 default 是互斥的
            2. 使用default接收对象的时候,设置默认值必须使用函数返回值的形式
                user: {
                    type: Object,
                    default: () => ({})
                }

**使用props传参分为两种情况**

1. 传非函数数据
     就是为了子组件使用(展示)这个数据
2. 传函数数据(用的少)
     为了让子组件调用这个函数,然后修改父组件中的数据

场景:  父给子传参的时候，使用props传参



### 自定义事件

组件间的通信方式 - 子给父传参

* 原生事件

  1. 事件类型,有限个数

  2. 触发方式 -> 例如: 点击按钮，浏览器触发的事件

     这就造成了`事件对象`这一说，事件对象是 $event

* 自定义事件

  1. 无限个数,事件类型由我们自己去取

  2. 触发方式 -> 自己触发，在子组件中调用 $emit 触发自定义事件

     这就造成了没有事件对象，那么此时的 $event 是什么?

     这个 $event 是 $emit 传过来的参数

怎么做?

1. 在当前组件中，写子组件标签的时候，可以使用 `v-on` 绑定事件，简写是`@`
2. 子组件中使用 $emit() 触发自定义事件, 触发的时候可以携带参数

场景:

​	当子组件想给父组件传参的时候，使用自定义事件



### 事件总线

步骤:

1. 安装总线
2. 在接收参数的组件中，`this.$bus.$on()` 绑定事件，留下回调，接收参数
3. 在发送参数的组件中，`this.$bus.$emit()` 触发事件，传递参数\

> 注意：在绑定事件的组件要销毁的时候，要解绑(调用 $on 的组件内, 销毁的时候要解绑 $off)

场景:

​	跨组件之间的通信，一般使用事件总线即可结局(跨组件的两个组件之间传参)



### v-model

* 只在原生input标签上使用

  ```html
  <input type="text" v-model="text">
  ```

  想要实现和v-mode同样的效果，但是不使用v-model这个指令，怎么办

  属性value 给input框赋值的

  @input 是事件，只要输入内容发生改变就会触发该事件

  ​		这里的 $event 是事件对象

  ```html
  <input type="text" :value="text" @input="text = $event.target.value" />
  ```

  

* 在组件上使用

  我们发现，使用 绑定value 和 绑定input事件 可以实现和 v-model 一样的效果

  我们自己封装一个组件带有这两个东西，是不是也能实现 v-model 的效果

  子组件:

  ```js
  <template>
      <div class="box">
          <h3>子组件</h3>
          <input type="text" :value="value" @input="$emit('input',$event.target.value)">
      </div>
  </template>
  
  <script>
  export default {
      name: 'CustomInput',
      props: ['value']
  }
  </script>
  ```

  父组件:

  ```html
  <CustomInput :value="customText" @input="customText = $event"></CustomInput>
  ```

  注意：这里组件上的 @input 是自定义事件，自定义事件没有 $event 事件对象，这个事件对象变成了子组件使用 $emit 传过来的参数

  其实这个数据流程:

  ​		1. 将父组件数据通过绑定 value 属性传给子组件

  ​		2. 子组件修改了input框内容之后，通过自定义事件将改完之后的 input 框文本(注意改的不是父组件传过来的数)给了父组件

​				3. 父组件接收到数据更新自己组件中的数据

​				4. 更新完成后，再将数据传给子组件

​				5. 此时子组件数据就发生变化了

* 此时相当于子组件实现 :value 和 @input 这两东西，实现之后我们替换一下 v-mode 发现好使
  ```js
  <CustomInput v-model="customText"></CustomInput>
  ```

  等到结论：v-model 就是靠 :value 和 @input 组合而成

> 现成例子： element-ui 封装的 el-input 组件就是用的 v-model 收集数据