# vueproject

**Repository Path**: sym2020/vueproject

## Basic Information

- **Project Name**: vueproject
- **Description**: No description available
- **Primary Language**: Java
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-09
- **Last Updated**: 2021-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

gulishop-client
20210410 day01安装 架构
1. 安装 安装脚手架
    vue create gulishop-client (随意起的名字)
        publish 此文件是根目录 最终对应的是dist 直接copy过去,不收webpack的限制,浏览器运行的是构建好的dist文件,
        assets静态资源,各个组件之间公共的部分,受到webpack的管理
        package.json包 最重要的是5个name version scripts dependencies依赖 devDependencies开发依赖
    
2. 启动项目 npm run serve 或者yarn serve

3. 配置vue.config.js文件 禁用语法检查
    module.exports={
        lintOnSave:false//禁用语法检查
    }
4.配置main.js
    import Vue from "vue"
    import App from './App'
    import router  from '@/router'
    Vue.config.productionTip=false
    new Vue({
        render:h=>h(App),
        router
        }).$mount('#app')
5.jsconfig.json配置别名@提示
    {
        "compilerOptions": {
            "baseUrl": "./",
            "paths": {
            "@/*": ["src/*"]
            }
        },
        "exclude": ["node_modules", "dist"]
    }
6.配置完文件后需要重启项目 npm run serve 或yarn serve
7.git的基本操作
    先有本地代码
        创建本地库
        创建远程库
        关联本地和远程
        修改本地
        修改远程
    先有远程代码 
        直接克隆
    git分支扩展
        分支创建和合并
            本地创建分支   git checkout -b dev
        本地推送新分支自动在远程库建立新分支  git push origin dev
        合并分支之前如果是多人协作先拉取一下远程master，以防止别人已经做了更改
        本地切换到master 然后再合并分支  git merge dev
        合并之后再次推送到远程master
        分支删除
        项目开发完成可以删除分支		  
            git push origin --delete dev  删除远程分支
            git branch -d dev  删除本地分支
8.观察页面确定页面主体框架
    我们的功能页面是 上中下结构    上和下是不变化的，只有中间在变化  
    切换页面的时候，页面是不刷新的，证明切换的过程当中请求采用的是ajax请求
    这个是单页面应用，中间的部分就是我们的路由组件切换
    上和下，我们全部都定义为非路由组件	
    
9. 创建文件夹pages/( Home  Search  Login  Register) 为其分别创建index.vue文件
项目创建的基本结构
    publish               //放置第三方或者是长久不变的 最终对应dist 直接copy上去,不收webpack管理
        css
            reset.css   //css初始化
        index.html
        favicon.icon
    src
        assets          //静态资源 各个组件之间公共的资源 受webpack的管理
        pages           //放置路由组件的文件夹
            Home
                index.Vue
            Search
                index.vue
            Login
                index.vue
            Register
                index.vue
        components                      //放置非路由组件的文件夹
            Header
                index.vue
            Footer
                index.vue
        router                                      //放路由文件的文件夹
            index.js                                  //路由的主文件
            routes.js                               //放路由规则 单独成一个文件
        App.vue                                     //外壳文件
        main.js                             //入口文件
    babel.config.js
    package.json
    jsconfig.js             //配置别名 @提示   @代表src 关于路径问题都要写成@注意好管理
    vue.config.js          //配置webpack的文件隐藏了,在此文件中可以写配置文件自动添加到webpack里
    定义页面主体组件组装，切换路径可以组件跳转（非路由组件和路由组件）
        Header和Footer是固定的所以是非路由组件写入components文件夹
        Home  Search  Login  Register 都是点击才会出现所以是路由组件并且是一级的（可能内部还有二级）
10.路由器配置文件 路由组件的使用步骤
    1)安装vue路由
        npm i vue-router -S(运行依赖 运行项目)
        npm i less lee-loader@5 -D(开发依赖 打包时用这个)
    2).引入并使用
        import Vue from 'vue'
        import VueRouter from 'vue-router'
        import routes from './routes'
        Vue.use(VueRouter) //声明使用插件，所有的vue官方插件都要声明使用，第三方插件不需要
        // 本质在调用插件内部的install方法，只有调用它，插件的功能才会添加到Vue身上和Vm身上
    3) 必须往外暴露一个路由器对象 在router路由器中添加一个 配置项routes
        const router = new VueRouter({
            routes
        })
        export default  router
    4)必须在Vue配置路由对象当中注册路由器对象 在main.js中写入
        import router from '@/router'
        new Vue({
            render: h => h(App),
            router
        }).$mount('#app')
    5)使用 <router-view></router-view>
11.路由组件和非路由组件的区别
    使用都是三大步 定义 注册 使用
    定义都是一样去定义的，只是定义的文件夹不同 路由组件放文件夹pages里 非路由文件放components里
    注册的时候区别：非路由组件是注册在要使用的组件当中（或者全局注册），而路由组件是要在路由配置routes:[path:xxx,component:xxx]当中注册的
    使用的时候区别：非路由组件使用注册的组件标签，
        而路由组件使用声明式导航（router-link,router-view）和编程式导航来使用(push replace router-view)
    非路由组件和路由组件生命周期不同
    路由组件在切换的时候，会销毁重建（keep-alive）
    而非路由组件不会
12.Header和Footer非路由组件的使用
    定义    定义在components
    注册    注册在App
    使用    在App当中书写组件标签
13.Home  Search  Login  Register路由组件的使用
    定义    定义在pages当中
    注册： 
    路由器的相关配置
        安装路由  npm i vue-router -S
        引入并声明使用路由插件
        向外暴露一个路由器的对象
        在main当中把路由器注册到Vue的配置对象
    注册路由组件（配置路由的时候就已经注册了）
    使用：
    使用router-link  和  router-view 
    push和replace    和   router-view
    router-link 切换路径用的 不能自己定义的函数
    this.$router.push(路由名)
    this.$router.replace('/search')
    代码区 Header/index.vue
        <p>
            <span>请</span>
            <router-link to="/login">登录</router-link>
            <router-link to="/register" class="register">免费注册</router-link>
        </p>
    文件App.vue
        <template>
          <div>
            <Header></Header>
            <router-view></router-view>
            <Footer></Footer>
          </div>
        </template>
14.把静态页面的东西复制到对应组件
    html	      直接复制静态页面当中的html
    css(less)     安装less和less-loader的包@7，否则less不认识
    images        在对应的组件目录下，创建images，把对应的图片给捞到这个文件夹下（注意路径要对应好）
    把内容复制过程当中，莫急莫慌
    css初始化放入public，reset.css需要引入到index.html当中
    复制完成之后，需要把router-link用上，对应的a标签得修改过来， 按钮点击跳转需要用到编程式导航
    重定向路由，访问根路径，默认访问的就是home首页
    routes:[
        {
            path:'/',
            redirect:'/home'
        }
    ]  
15.登录注册不需要Footer,通过路由meta配置解决  如果不写meta 表示空对象
    从route当中可以获取到path判断可以解决但是麻烦
    通过路由配置的时候路由对象当中配置meta设置来做
    routes:[
        {
            path: '/login',
            component: Login,
            meta:{
                isHidden:true
            }
        },
    ]  
在App.vue中写入
    <template>
      <div>
        <Header></Header>
        <router-view></router-view>
        <!-- 这样的方式是可以去隐藏footer，但是不好，如果要隐藏的页面有很多 -->
        <!-- <Footer v-show="$route.path !== '/login' && $route.path !== '/register'"></Footer> -->
        <Footer v-show="!$route.meta.isHidden"></Footer>
      </div>
    </template>
16.路由的传参
    1)跳转路由的2种基本方式
        声明式 <router-link to />
        编程式 this.$router.push()/replace()
            编程式导航比声明式导航 更加灵活,(内部可以加入自己的逻辑,某些请求效率会更好)
    2.路由携带参数的2种方式
        params参数 属于路径的一部分,匹配的时候路由的path中需要占位:
            routes:[
                path:'/search/:id'
                component:Search
            ] 
        query参数,不属于路径的一部分,匹配的时候路由的path 不需要写
        无论是params参数还是query参数最终匹配完成都会解析到当前这个路由对象当中params和query属性当中
            $route.params.xxx 比如$route.params.id
            $route.query.xxx
        显示路由组件的时候,会把当前这个路由对象,传递给组件当中的this.$route 所以this.$route就可以获取到之前传递的参数
    3.跳转路由的3种写法
        1)字符串写法
            第一步:在Header组件中
                this.$router.push('/search/'+this.keyword+"?keword1="+this.keyword.toUpperCase())
            第二步:在路由器中写占位:
                routes:[
                    {
                        path:'/search/:keyword',        //写占位符
                        component:Search
                    }
                ]                                               
            第三步:在Search组件中 需要做2件事.声明接收参数 在模板里展示接收到参数
                <template>
                <div>Search params参数为:{{$route.params.keyword}}-----query参数为:{{$route.query.keyword1}}</div>
                </template> 
                <script>
                export default {
                name: "Search",
                props:['keyword',"keyword1"]//声明接收属性
                }
        2.模板字符串写法:步骤同上面的第二步和第三步 只有第一步不同
            只写第一步:
                第一步:在Header组件中
                    this.$router.push(`/search/${this.keyword}?keword1${this.keyword.toUpperCase()}`)
        3.对象写法
            这样写不对 path不能和params参数配合,要配合只能是name
            this.$router.push({
                path:'/search',
                params:{keyword:this.keyword},
                query:{keyword1:this.keyword.toUpperCase()}
            })
            此时传递的props是undefined
        正确的写法如下:
        this.$router.push({
            name:'search',
            params:{keyword:this.keyword||undefined},
            query:{keyword1:this.keyword.toUpperCase()}
        })
    如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
        前提是路由params参数要可传可不传 (配置路由params参数可传可不传，在占位后面添加?)
            解决1: 不指定params
            解决2: 指定params参数值为undefined
17.报错解决
     路由点击多次，而参数没有变化，会报警告NavigationDuplicated
     原因是因为路由3.1.0之后引入promise用法，如果你使用的时候没有对promise进行处理，就报警告
        1 降低vue-router的版本
        2 使用push或者replace的时候传递成功或者失败的回调
        3 封装源码   这个解决办法优秀
     代码区 router/index.js
        /*location是指this.$router.push({}) 传入的配置对象*/
        const originPush=VueRouter.prototype.push//把原本的push函数地址存起来,防止后面要用
        const originReplace=VueRouter.prototype.replace //把原本的push函数地址存起来,防止后面要用
        VueRouter.prototype.push=function (location,resolved,rejected){
            if (resolved===undefined&&rejected===undefined){
                return originPush.call(this,location).catch(()=>{})
            }else {
                return originPush.call(this,location,resolved,rejected)
            }
        }
        VueRouter.prototype.replace=function (location,resolved,rejected){
            if (resolved===undefined&&rejected===undefined){
                return originReplace.call(this,location).catch(()=>{})
        }else {
            return originReplace.call(this,location,resolved,rejected)
            }
        }
18.面试常见的问题
    1)指定params参数时可不可以用path和params配置的组合?{对象写法}
        不可以用path和params配置的组合
        只能用name和params配置的组合
        query配置可以与path或name进行组合使用
    2)如何指定params参数可传可不传? 占位后面加?即可
        path:'search/:keyword?'
    3)如何只能name与params配置,但是params中数据时一个空串"", 无法跳转,路径会出问题
        可以将query或params参数映射/转换成props传递给路由组件对象
        props:(route)=>{keyword1:route.params.keyword,keyword2:route.query.keyword}
19.props传参  
day02
20.拆分组件 html less images
    1)导航菜单type-nav用的地方较多 那就定义到非路由组件中components中
        定义 components
                TypeNav
                    images
                    index.vue
        注册 需要全局注册 main.js Vue.component('TypeNav',TypeNav)
        使用 Home组件里 直接使用 <TypeNav/>
    2).  定义:创建各个路由组件 复制静态页面中的html less images 到各个组件
            ListContainer,
            Recommend,
            Rank,
            Like,
            Floor,
            Brand
        注册引入 Home/index.vue中
            import ListContainer from './ListContainer'
            import Recommend from './Recommend'
            import Rank from './Rank'
            import Like from './Like'
            import Floor from './Floor'
            import Brand from './Brand'
            components:{
                ListContainer,
                Recommend,
                Rank,
                Like,
                Floor,
                Brand
            }
        使用 <template>
                <div>
                  <TypeNav></TypeNav>
                  <ListContainer></ListContainer>
                  <Recommend></Recommend>
                  <Rank></Rank>
                  <Like></Like>
                  <Floor></Floor>
                  <Brand></Brand>
                </div>
            </template>
22.准备请求数据 首先二次封装axios
    1)安装 npm i axios
    2)创建api/ajax.js文件引入axios
        创建一个axios 
        const service=axios.create({
            baseBRL:'/api',
                timeout:"20000"
            })
        配置请求拦截器
            service.interceptors.request.use(config=>{})
        配置响应拦截器
            service.interceptors.response.use((response=>{},error=>{}) 需要终止Promise链条在error里
        对外暴露
        export default service
    3)配置代理在vue.config.js配置文件中加入一个配置项devServer
    	module.exports={
            lintOnSave:false,
            devServer:{
                proxy: {
                    // /api  往本地webpackDevServer发请求，路径只要是以/api开头，全部转发到了目标服务器
                    "/api": {
                        target: "http://39.98.123.211",  //http://localhost:3000/api/user
                    }
                }
            }
        }
        注释:
            // localhost:8080  -----> localhost:3000/user     跨域
            // localhost:8080  -----> localhost:8080/user     不跨域，但是404
            // 配置代理    转发请求
            // localhost:8080  -----> localhost:8080/api/user   
            // devserver是一个开发服务器，它可以帮我们去转发请求，但是前提必须配置
            // 不配置，往这开发服务器发请求，如果路径不存在，直接404
            // pathRewrite: {"^/api" : ""} //http://localhost:3000/user
            // 需不需要覆盖/api要看最终路径里面有没有  有就不需要覆盖，没有需要覆盖
    4)配置接口函数 新建api/index.js
        3.1)引入service     import Ajax from './ajax'
            // 看接口文档    请求获取三级分类列表数据的函数
            // /api/product/getBaseCategoryList
            // get
        3.2) 使用 分别暴露 因为需要写很多的接口函数
            export const reqCategoryList=()=>{
                return Ajax({
                    url:'/api/product/getBaseCategoryList',
                    method:'GET'
                    })
            }
        3.3)测试接口数据是否可以用 有2种方式
                第一种方式 
                    第一步:在此文件中直接调用该函数 reqCategoryList()
                    第二步:在main.js中引入 import '@/api'  
                            刷新页面看是否有请求的数据过来 控制台 network里查看响应的数据
                第二种方式直接在main.js 
                    引入并调用
                        import {reqCategoryList} from '@/api'
                        reqCategoryList()
   23.vuex传递数据 和vue-router一样 [[需要安装 创建文件夹store 引入 默认暴露store 然后再vm配置对象中配置]]
    1)安装 vuex  
        npm i vuex -S
    2)创建store  store/index.js
    创建四个配置项state mutations actions getters 然后store进行管理
        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)
     const state={}
        const mutations={}
        const actions={}
        const getters={}  
        const store=new Vuex.Store({
            state,
            mutations,
            actions,
            getters
            })
        export default store
    3)使用store           main.js中
        引入 import store from './store'
        在vm配置项中增加store
        new Vue({
            render:h=>h(App),
            router,
            store
        }).$mount('#app')
   24.vuex模块化操作 先分开成各个小的模块 然后再store/index.js中进行模块合并达到使用数据的目的
    1)拆分小小模块相当于miniStore 具体store的配置项  存入总得store是一组一组的对象
            modules:{
                home:{a,b},//home.js存入的state数据
                user:{c,d}//user.js存入的state数据
            }
        store/home.js写入
            import {reqCategoryList} from '@/api'//请求回来的数据 放入home.js中    vuex-store-home
             //存数据
                const state={
                    categoryList:[]
                 }
                //mutations中写的函数都需要大写 传入的参数state ,value(接收到的数据) 这里只对state 直接修改数据的地方
                const mutations={
                    RECEIVE_CATEGORYLIST(state,categoryList){
                        state.categoryList=categoryList
                    }
                }
            //actions做2件事 1.用来和vue组件打交道 vue组件中使用this.#store.dispacth()  actions当中的函数
            //2.actions 通知mutations修改state中的数据
                const actions={
                    async getCategoryList({commit}){//执行同步函数实现异步的效果
                        const result=await  reqCategoryList()
                        if (result.code===200){//如果数据请求成功通知mutations修改state中的数据
                            commit('RECEIVE_CATEGORYLIST',result.data)
                        }
                    }
                }
                const getters={}
                export default {
                    state,
                    mutations,
                    actions,
                    getters
                 }
        2)引入总的store  store/index.js
            import home from './home'
            const store=new Vuex.Store({
                    //增加一项 模块合并
                    modules:{
                        home
                    }
                })
        3)哪里需要在哪里用vuex中的数据 需要用 actions进行传给vue组件
        TypeNav/index.vue需要引入
            import {mapState} from 'vuex'//注意是从vuex中引入的
                //从vuex中捞数据用的是computed(state,getters)
                //从vuex中捞方法用的是methods(actions,mutations)
            mounted(){
                this.getCategoryList()发请求
            },
            methods:{
                getCategoryList(){
                // 拧开关 触发分发 action对应的函数 本质是在调用action对象的函数
                    this.$store.dispatch('getCategoryList')
                }
            },
            computed:{
                // 写数组必须满足两个条件
                //1、 不能使用模块化
                //2、 名字必须和vuex对应的名字相同
            ...mapState({
                categoryList:state => state.home.categoryList
            })
   25.事件控制2,3级的显示和隐藏 在组件TypeNav
    1)、首先把原来的:hover去掉，改为一个类item_on
    2)、在item身上动态的强制绑定class,:class="{item_on:布尔值}"，布尔值为true，那么当前的这个item的类就生效
    3)、移入哪一个item，就让当前这个item的类为true
    4)、在data中设计一个数据，currentIndex = -1 
    5)、移入item的时候，让currentIndex = index
    6)、移出不能在item身上去加，因为最后item和h2移出他们整体才会把2级分类隐藏，所以需要用div把item和h2包裹，给div添加移出事件
        @mouseleave='moveOutItem'
27.事件的防抖和节流
    正常 100秒触发100次 事件触发非常频繁,每次触发 都要调一次回调函数,而回调函数当中如果需要计算 那么有可能会出现浏览器很卡
    防抖 100秒触发100次  连续触发,只会执行一次
    节流 100秒触发100次 在规定的间隔时间内不会重复触发回调函数,把频繁触发变成多次触发
    按需引入工具函数lodash/throttle节流
        如果没有工具函数 需要先安装npm i lodash
        import throttle from 'lodash/throttle'
            使用 throttle(参数1,参数2, 参数3)
             参数1 要节流的函数
                参数2 节流的间隔时间
                参数3 是一个对象 trailing:false不拖延执行 true拖延执行 是否在时间间隔之后执行函数
                                leading 是否在时间间隔之前执行函数
                    //节流之后
                    moveInItem: throttle(
                        function (index) {
                            console.log(index);
                            this.currentIndex = index;
                        }, 20, { trailing: false }
                    ),
   28.点击某个类别（无论几级）跳转到搜索页面'/search'
    第一种方式:声明式导航  替换原来的a <router-link :to="{name:"search",query:{}}" />
            需要把类别的id和类别的名字通过query参数传递   
            每一个router-link标签都会渲染一个组件对象 用的卡
    第二种方式:编程式导航  $router.push({传参})
            <a @click="$router.push({
                name: 'search',
                query: {
                 categoryName: c1.categoryName,
                    category1Id: c1.categoryId,
                },
            })"
    第三种方式:事件委派   找一个共同的祖先元素绑定事件 添加data-属性 数据会自动收集到event.target.dataset中 
        methods:{
            toSearch(event) {
                let dataset = event.target.dataset//把元素身上的以data-开头的属性和属性值全部收集到dataset对象中
                    // console.log(dataset)
                    //dataset解构赋值 所需要的东西不一定能拿到,
                    //如果点击a标签那么可以拿到2个 categoryname和某个categoryid
                    //如果点击的不是a标签,那么就拿不到任何值,拿到4个undefined
                const {categoryname, category1id, category2id, category3id} = dataset
                if (categoryname) {
                //代表点击了a标签,因为只有a标签有这个属性
                    let location = {
                        name: 'search'
                    }
                    let query = {
                        categoryName: categoryname
                    }
                    if (category1id) {
                        query.category1Id = category1id
                    } else if (category2id) {
                        query.category2Id = category2id
                    } else {
                        query.category3Id = category3id
                    }
                location.query = query
                this.$router.push(location)
                }
            }
        }
   29.、搜索页的typeNav一级列表隐藏 写以下search页面 把TypeNav组件放入Search/index.vue中
    1)、typeNav这个组件在home当中一上来是显示sort的，在search当中一上来就要隐藏sort，sort需要使用v-show
        在组件mouted的时候，需要添加判断是不是search，如果是search页面，需要把isShow改为false
        data(){
            return{
                isShow:true
            }
        }
     mounted() {
        //如果跳转到不是home组件 就不展示item
            if (this.$route.path !== '/home') {
                this.isShow = false
            }
        }
    2)、移入search页面的全部商品分类，sort是要显示的，移出以后sort又是要隐藏的
        moveOutDiv() {
            this.currentIndex = -1
        //离开的时候 一级列表隐藏
            if (this.$route.path!=='/home'){
                this.isShow=false
            }
        }
        移入的时候：需要在原来自己添加的div身上，再去添加移入事件，让isShow变为true
        移出的时候：原来自己添加的div身上我们已经写过移出事件，但是逻辑需要添加，修改为回调函数去做
        移出的时候页得去判断是不是在search移出，如果是也得需要隐藏sort
   30.显示和隐藏一级列表的过渡效果添加
    首先谁要加过渡就看谁在隐藏和显示
    需要放在transition标签内部，name需要起名字sort  参考官方给的过渡图 <transition name='sort' ></transition>
        移入的时候是有过渡的
        移出的时候立马隐藏的
        注意：高度也是变化的 透明度的变化
            代码区:
            <transition name="sort">
                <div class="sort" v-show="isShow"></div>
            </transition>
            增加css样式 看vue官网 需要进入的效果还是离开的效果  自己定义
                &表示sort 这里只写了进入的效果 离开的效果未写
                    &.sort-enter{
                        opacity: 0;
                        height: 0;
                    }
                    &.sort-enter-active{
                        transition: all .5s;
                    }
                    &.sort-enter-to{
                        opacity: 1;
                        height: 461px;
                    }
   31.优化typeNav数据ajax请求次数，改变请求的位置
    之前我们是在typeNav组件内部dispatch去发送ajax请求，这样的话
 因为typeNav是被多个页面公用的，所以每次切换到一个页面，这个组件都会重新创建  mounted都会执行
    因此有几个页面公用了这个typeNav就会执行几次ajax请求
    所以我们放到App里面就只用执行一次，因为数据一样，没必要多次请求
        export default {
            name: 'App',
            mounted() {
             this.getCategoryList()
            },
            methods:{
                getCategoryList(){
                    this.$store.dispatch('getCategoryList')
                }
            }
        }
   32.合并分类的query参数和搜索关键字的params参数
        如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
        // 前提是路由params参数要可传可不传
        // 解决1: 不指定params
        // 解决2: 指定params参数值为undefined
    找到对应组件header组件 点击search按钮的时候，去看看有没有query参数 如果有 需要和params参数合并
        to Search(){
            let location={
                name:'search',
                params:{keyword:this.keyword||undefined}
            }
            if(this.$route.query){
             location.query=this.$route.query
            }
            this.$router.push(location)
        }
    点击TypeNav组件 类别选项的时候，去看看有没有params参数
        toSearch(event) {
            const dataset = event.target.dataset
            /* console.log(dataset)*/
            const {categoryname, category1id, category2id, category3id} = dataset
            if (categoryname) {
                let location = {
                name: 'search'
            }
            let query = {
                categoryName: categoryname
            }
            if (category1id) {
                query.category1Id = category1id
            } else if (category2id) {
                query.category2Id = category2id
            } else {
                query.category3Id = category3id
            }
        //判断之前有没有携带params参数，如果有合并起来一起携带
            if (this.$route.params){
                location.params=this.$route.params
            }
                location.query = query
                this.$router.push(location)
            }
        }
    注意：我们点击搜索的时候关键字使用的是params参数
        点击类别选项的时候我们的参数使用的是query参数

33.floor楼层和轮播图 20210414 第四天
    上一天的回顾:
    发送请求 数据vuex 展示 点击交互
    事件冒泡  主要做2件事 阻止冒泡和主要是做事件委派(代理 委托)
    声明式导航 内存中会增加一个组件对象
    编程式导航 内存中会增加很多事件回调函数
    事件委派 给共同的父元素或者祖先元素绑定事件 通过冒泡机制传递到子孙身上
    dataset中 都是小写的属性名 解构赋值的时候注意
开始讲课 轮播图和floor楼层
34.mock数据 模拟数据  通过mock.js 有官网 自己查看  生成随机数据 拦截ajax请求 拦截到本地 假的发数据
    1).mock/banner.json文件夹 准备数据 复制前台项目资料中的banner.json
        mock/floor.json文件夹 准备数据 复制前台项目资料中的floor.json
    2).安装 npm i mockjs
    3).api/mockAjax.js  对axios进行二次封装  模拟接口不能使用api/ajax.js 因为不是真实数据 在network中看不到因为发的不是真正的请求
        做法:复制api/ajax.js 修改里面的baseUrl:'/mock'
    4).mock/mockServer.js这个文件是模拟接口的
       Mock.mock(路径,返回的数据,{code:200,data:banner}) 模拟一个接口
        代码区://此文件是模拟接口使用的
            import Mock from 'mockjs'
            import floor from './floor.json'
            import banner from './banner.json'
            Mock.mock('/mock/banner',{code:200,data:banner})//模拟一个接口
            Mock.mock('/mock/floor',{code:200,data:floor})
            //这里的路径一定写对啦 还没请求数据那 需要写全路径 当请求的时候需要不写/mock因为mockAjax已经写好了路径
    4).main.js 引入
        代码如下:
            import '@/mock/mockServer.js'//引入模拟数据server
    此时接口已经准备好了 接下来就发送请求
35.写ListContainer组件 发请求  banner页面写接口文件 存储数据及处理数据 拧开关 捞数据 渲染页面
    1)先写接口请求函数api/index.js
        第一步 引入: import mockAjax from "@/api/mockAjax";
        第二步 分别暴露请求函数
            export const reqBannerList=function (){
                return mockAjax({
                    url:'/banner',
                    method:'GET'
                })
            }
            export const reqFloorList=function (){
                return mockAjax({
                    url:'/floor',
                    method:'GET'
                })
            }
    2) 存数据及处理数据  store/home.js 使用三连环
        import {reqBannerList, reqFloorList} from '@/api'
        const state={
            bannerList:[],
            floorList:[]
        }
        const mutations={
            RECEIVE_BANNERLIST(state,bannerList){
                state.bannerList=bannerList
        },
            RECEIVE_FLOORLIST(state,floorList){
            state.floorList=floorList
            }
        }
        const actions={
            async getBannerList({commit}){
                const result= await  reqBannerList()
                if (result.code===200){
                    commit('RECEIVE_BANNERLIST',result.data)
                }
            },
            async getFloorList({commit}){
                const result=await reqFloorList()
                if (result.code===200){
                    commit('RECEIVE_FLOORLIST',result.data)
                }
            }
        }
    3).在vue组件中拧开关 捞数据 用到mounted methods computed 查看vuex中的是否有数据 查看vue组件中的是否有数据
        mounted() {
            this.getBannerList()//组件一上来就调用这个函数
        },
        methods:{
            //拧开关 调用actions中的函数 
            getBannerList(){
                this.$store.dispatch('getBannerList')
            }
        },
        computed:{
            //捞数据 从vuex捞到vue组件当中来 以备渲染页面
            ...mapState({
                bannerList:state => state.home.bannerList
            })
        },
    4).vue组件中拿到渲染页面
    展示的数据时从dist目录中拿到的比如图片 开发中我们写在public中 需要新建一个images文件夹需要专门存图片
36.floor页面 
    分析: 两个地方都用到floor的数据 需要在home组件拧开关及捞数据 通过props传到floor组件中里 props接收数据 展示数据
    home组件中 通过props传递数据 <Floor v-for="(floor ,index) in floorList" :key="floor.id" :floor="floor"></Floor>
    在floor组件中 接收数据 props:['floor']
    展示数据
37. 一个简单的轮播图实现
    1)安装swiper 5版本的 看官网 https://www.swiper.com.cn/usage/index.html 
        npm i swiper@5 -S
    2)引入swiper的css和js文件
        import 'swiper/css/swiper.min.css'//引入swiper轮播图的css
        import Swiper from "swiper";
    3)使用
        第一种方式pages/ListContainer组件已挂载就new Swiper(....)不可用
            mounted:{
                new Swiper(......)
            }
            因为去实例化Swiper的时候 页面的轮播图结构还没完全形成,页面的结构是根据动态请求回来的数据而动态创建的,
            数据都没有回来 几个不可能创建
        第二种方式 用定时器写一个异步 是可以的 但是不好
            mounted:{
                setTimeOut(()=>{
                    new Swiper(......)
                })
            
            }
        第三种方式 watch监视 数据一回来就执行回调函数 完成数据结构
            采取watch保证数据一定先回来 然后采取实例化swiper 也不行
            因为数据时回来了 数据回来后 页面形成是需要时间的
            watch:{
                bannerList:{
                    immediate:true,
                    handler(newVal,oldVal){
                        this.$nextTick(()=>{new Swiper(......)})
                    }
                }
            }
38.把轮播图定义一个组件 可以复用的 因为有相同的html css js
    知识补充:banner是在watch当中去创建swiper 因为组件创建的时候数据不一定更新
            floor是在mounted当中去创建swiper，因为内部组件创建的时候，数据已经存在了
                1、同一个组件  有好几个地方js代码是一样的               封装函数
                2、不同的组件  有好几个地方js代码是一样的               封装模块（vue中还能封装混入（混合））
                3、不同的组件  有好几个地方 html css  js都是一样的      封装组件 （html,css,js的混合体，混合件）
    步骤:
    1)定义组件 components/SwiperLoop/index.vue 把结构复制过来放入template模板中 
        css已经放在全局main.js中
        js 把watch监视的数据放入里面 用到this.$nextTick表示最近的一次页面更新完成后 执行回调
    2)全局注册组件 main.js中
        引入 import SwiperLoop from '@/components/SwiperLoop'
        使用插件 Vue.use('SwiperLoop',SwiperLoop)
        注册完毕
    3)使用 在pages/Home/ListContainer/index.vue相应的位置使用这个组件SwiperLoop
            在pages/Home/Floor/index.vue中相应的位置使用这个组件SwiperLoop
    4)此间设计到props传参 传的是属性  接收的也是属性
        1))在pages/ListContainer/index.vue中  传递bannerList 和bannerSwiper
            注意点:    
            :bannerSwiper="'bannerSwiper'" 传递的是ref的属性值是一个字符串  如果不写 就表示js表达式 变量 显然这个组件中没有这个变量
            写法如下:   
            <SwiperLoop :bannerList="bannerList" :bannerSwiper="'bannerSwiper'"></SwiperLoop>
        2))在pages/Floor/index.vue中 传递bannerList 和bannerSwiper   属性值'floorSwiper' 也要使用字符串
            写法如下:
                <SwiperLoop :bannerList="floor.carouselList"  :bannerSwiper="'floorSwiper'"></SwiperLoop>
        3))接收属性在components/SwiperLoop/index.vue 
            结构中写:ref='bannerSwiper'
            props:['bannerList','bannerSwiper'],
            new Swiper(this.$refs[this.bannerSwiper],{.......})
39.查看数据的时候应该怎么去查看
    看组件没有数据  接着看vuex没有数据   然后看network请求状态    
40.home页已经写完 下面开始写搜索页search 写三个搜索逻辑 
    1)从home页点击三级分类时或者点击header组件的搜索按钮时 跳转到search页面 携带了params参数和query参数
    2)在search页面点击 header组件的搜索时 携带的params参数 进入面包屑中 点击删除的按钮 可以删除 重新刷新页面 
        清空header组件中的keyword关键字 需要用到全局事件总线 安装 使用$bus.$on 和$bus.$emit
    3)品牌搜索 用到了 子向父传递参数 自定义事件  点击的参数传入面包屑中 点击删除按钮 可以删除 重写渲染页面
    4)属性搜索 props=[]  
    第一步:开始写接口函数 携带参数 测试接口是带参数 函数调用() 在main.js引入import '@/api'
        1))/api/index.js中写 本次接口函数 携带参数 所以测试接口的时候也需要带参数
            //api/list 看接口文档得到的
            //post
            //请求获取商品列表数据信息（search搜索商品）
            export const reqSearchListInfo=function (searchParams){
                return Ajax({
                    url:'/list',
                    method:'POST',
                    data:searchParams
                })
            }
            //测试一下接口函数是否能用
            reqSearchListInfo({})//测试的时候必须携带参数 假设什么都不知道 写一个空对象
        2))在main.js中引入 import '@/api'查看network 数据是否回来了
    第二步:写store三连环
           1):新建 /store/search.js 内创建三连环 并暴露四大核心概念
                import {reqSearchListInfo} from '@/api'
                const state = {
                    searchListInfo: {}
                }
                const mutations = {
                    RECEIVE_SEARCHLISTINFO(state, searchListInfo) {
                        state.searchListInfo = searchListInfo
                    }
                }
                const actions = {
                    async getSearchInfo({commit}, searchParams) {
                        const result = await reqSearchListInfo(searchParams)
                        if (result.code === 200) {
                            commit('RECEIVE_SEARCHLISTINFO', result.data)
                        }
                    }
                }
                const getters = {
                attrsList(state) {
                    return state.searchListInfo.attrsList
                },
                goodsList(state) {
                    return state.searchListInfo.goodsList
                },
                trademarkList(state) {
                    return state.searchListInfo.trademarkList
                    }
                }
                export default {
                    state,
                    mutations,
                    actions,
                    getters
                }
            2):引入总的store/index.js 然后模块合并
                import search from './search'
                const store=new Vuex.Store({
                    state,
                    mutations,
                    actions,
                    getters,
                        //模块化 合并
                    modules:{
                        home,
                        search
                    }
                })
    第三步 拧开关
        mounted() {
            this.getSearchInfo()
        },
        methods:{
            getSearchInfo(){
                this.$store.dispatch('getSearchInfo',this.searchParams)
            }
        },
        computed:{
            ...mapGetters(['goodsList'])
        }
    第四步:从vuex中捞数据到vue组件中
    第五步:展示数据 
    第六步:动态交互 包含初始化数据展示,和用户如何搜索以什么方式进行搜索
41.三级分类和关键字搜索
    1)data中初始化化 searchParams参数 我们需要定义一个对象，代表是所有的搜素条件组成的对象，称为初始化搜索参数
        一部分是全是空串，这些是以后我们搜索时候自己要给的
        一部分是给定的，这些是我们默认给后台传递的搜索参数，要改，得自己改
        真正到了搜索页面我们都要去解析拿到相关的参数  修改我们的搜索参数
        beforeMount 去同步更新data数据
        mounted     去异步发送请求
            在搜索页重新输入关键字或者点击类别不会再发送请求，因为mounted只会执行一次，需要监视路由变化
        data(){
        return{
        searchParams:{
        // 这些参数代表用户的搜索条件，这些搜索条件是动态的
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        props: [],
        trademark: "", 
                // 默认参数：默认给你第一页的数据，每页是10条，默认是按照order排序的
                order: "1:desc",
                pageNo: 1,
                pageSize: 10,
              }
            }
        },
    2)从home页携带参数跳到search
        // 按照三级分类和关键字进行搜索，本质就是在mounted之前，把用户从首页跳转过来时候的
        // 三级分类名称和关键字给解析出来，赋值给this.searchParams
        //需要收集从home页面跳转到search页面带的query参数和params参数
        let {category1Id,category2Id,category3Id,categoryName}=this.$route.query
        let {keyword}=this.$route.params
        let searchParams={
            ...this.searchParams,
            category1Id,
            category2Id,
            category3Id,
            categoryName,
            keyword
        }
        //执行了一下代码 发现trademark带过去的是空串需要处理一下 那么把对象中的属性值为空串的,全部删除
        Object.keys(searchParams).forEach(item=>{
            if (searchParams[item]===""){
                delete searchParams[item]
            }
        })
        this.searchParams=searchParams
    3)在header页 输入keyword关键字 点击搜索按钮 页面不刷新 因为mounted只执行一次 看到了路由有改变,
        那只要是路由一变化,那么页面就刷新 我们需要监视一下路由对象$route
            watch:{
                $route:{
                    handler(newVal,oldVal){
                        //只要路由参数一变化,就发请求
                        this.handlerSearchParams()
                        this.getSearchInfo()//发请求
                    }
                }
            }
    4)监视完路由对象后 需要输入的关键字到面包屑中  需要删除输入的关键字
        那么就要用到组件间的通信 header和search兄弟之间的通信 全局事件总线
    searchParams.keyword写在对应的模板位置 即可显示面包屑
        1))安装全局事件总线
            在main.js中vm增加配置项
                beforeCreate() {
                    Vue.prototype.$bus=this
                },
        2))使用需要数据this.$bus.$on需要写在mounted中
            在header组件中接收数据的
                mounted() {
                    this.$bus.$on('clearKeyword',this.clearKeyword)
                },
                methods:{
                    clearKeyword(){
                      this.keyword=""
                    }
                }
        3))谁发送数据this.$bus.$emit 
            在search/index.vue组件中
                面包屑需要删除 重新发请求
            removeKeyword(){
                this.searchParams.keyword=undefined
                this.$bus.$emit('clearKeyword')
                this.$router.replace({name:'search',query:this.$route.query})
            } 
    5)searchParams.categoryName 在对应的模板位置写上即可显示在面包屑的位置 然后写删除
    类似keyword
        removeCategoryName() {
            this.searchParams.categoryName = undefined;
            // 这样发请求，数据确实可以重新获取，但是这样发请求不会改变路径
            // this.getGoodsListInfo()
            // 不能直接修改原来的路由对象，而是重新跳转匹配新的路由对象
            this.searchParams.pageNo = 1
            this.$router.replace({ name: "search", params: this.$route.params });
        },
42.品牌搜索
    品牌在面包屑中显示,然后删除 重新发请求 涉及到父子之间的通信 可以用自定义事件 也可以用全局事件总线
    这里用全局事件总线
    子组件触发事件 $bus.$emit
    父组件接收 $bus.$on
    详细说明区域
        子组件 绑定事件@click='tmForSearch'
             methods:{
                //把品牌数据传参给父组件search
                tmForSearch(tm){
                    this.$bus.$emit('tmForSearch',tm)
                },
            }
        }
    父组件接收
        mounted() {
            this.$bus.$on('tmForSearch',this.tmForSearch)
        },
        //子组件传参到父组件 进行加工成后端的数据 看接口文档 然后发请求
        tmForSearch(tm){
            this.searchParams.trademark=`${tm.tmId}:${tm.tmName}`
            this.getSearchInfo()
        },
        //从面包屑中 删除品牌
        removeTrademark(){
            this.searchParams.trademark=undefined
            this.getSearchInfo()
        },
43.属性搜索同品牌搜索
    子组件:触发事件 传递参数
        methods:{
            //把属性数据传参给父组件search
            propForSearch(attr,attrValue){
                this.$bus.$emit('propForSearch',attr,attrValue)
            }
        }
    父组件:绑定事件 使用事件 删除面包屑中的属性 是个数组 删除的时候需要注意
        //子组件传参到父组件的属性 进行加工成后端的数据 看接口文档 然后发请求
        propForSearch(attr,attrValue){
            let prop = `${attr.attrId}:${attrValue}:${attr.attrName}`;
                // some/every/forEach/map/filter/reduce
                // some
                // 功能  ： 判断一个数组当中是不是有和条件一样的项  有就是true  一个都没有返回false
                // 参数  ：  和filter一致
                // 返回值 ：  布尔值
            let isRepeat=this.searchParams.props.some(item=>{
                return item===prop
            })
            this.searchParams.props.push(prop) //注意是个数组
            this.getSearchInfo()
        },
        //删除属性
        removeProps(index){
            this.searchParams.props.splice(index,1)
            this.getSearchInfo()
        }
44.排序 用阿里的字体图标
    用gitHub账户登录https://www.iconfont.cn/ 
    使用步骤 资源--我的项目---+(起一个名字) icon写项目的前缀,--图标库--搜索(你想要的图标,这里是up或者down)--添加到购物车
            --添加到项目--确定--fontClass--查看在线连接--点击生成--复制地址
            在public/index.html中link引入该地址 加上https:复制的地址
            在需要的位置用class='iconfont 自己复制的类' 第一个类必须是它 iconfont 后面的类写自己需要的
    开始进入正题
        先确定点击的时候那个 背景色更改 然后再考虑字体图标是向上还是向下
        :class="{active:searchParams.order.split(':')[0]==='1'}"
        第二步 如果是高亮的那个按钮,动态的添加字体图标 向上和向下的图标
        第三步写逻辑 点击a标签根据类型和标志动态的显示
            //排序
            changeSort(sortFlag){
                let originSortFlag=this.searchParams.order.split(":")[0]
                let originType=this.searchParams.order.split(":")[1]
                let newOrder=''
                if (sortFlag===originSortFlag){
                    //点击还是原来的
                    newOrder=`${originSortFlag}:${originType==='desc'?'asc':'desc'}`
                }else {
                    //点击是新的
                    newOrder=`${sortFlag}:desc` //desc写的默认值
                }
                //重新赋值 然后发请求
                this.searchParams.order=newOrder
                this.getSearchInfo()
            }
45.分页器 这个是一个组件 全局安装一下在需要的地方写标签
    第一步:components/Pagination/index.vue 复制模板进入这个文件
            <template>
              <div class="pagination">
                <button>上一页</button>
                <button>1</button>
                <button>···</button>
                <button>3</button>
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button>7</button>
                <button>···</button>
                <button>9</button>
                <button>下一页</button> 
                <button style="margin-left: 30px">共 60 条</button>
              </div>
            </template>
            <script>
            export default {
              name: "Pagination",
            }
            </script> 
            <style lang="less" scoped>
            .pagination {
              button {
                margin: 0 5px;
                background-color: #f4f4f5;
                color: #606266;
                outline: none;
                border-radius: 2px;
                padding: 0 4px;
                vertical-align: top;
                display: inline-block;
                font-size: 13px;
                min-width: 35.5px;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                box-sizing: border-box;
                text-align: center;
                border: 0;
                &[disabled] {
                  color: #c0c4cc;
                  cursor: not-allowed;
                } 
                &.active {
                  cursor: not-allowed;
                  background-color: #409eff;
                  color: #fff;
                }
              }
            }
            </style>
    第二步:全局注册组件 在main.js中
        import Pagination from '@/components/Pagination'
        Vue.component('Pagination',Pagination)
    第三步:在search组件适当的位置使用 Pagination标签即可
    第四步:写逻辑了
       1)) search组件传参给子组件Pagination 通过props
            goodsListInfo.total传递的有可能是undefined因为goodsListInfo初始化的时候是{} 所以接收的时候需要注意了 要限定了
            continueNum连续数 是奇数,连续数最少是3 一般是5
              <Pagination
                :currentPageNum="searchParams.pageNo"
                :total="goodsListInfo.total"
                :pageSize="searchParams.pageSize"
                :continueNum="5"
              ></Pagination>
        2))在Pagination/index.vue中接收参数 props 需要用对象的复杂写法了
            props: {
                //当前页
                currentPageNum: {
                    type: Number,
                    required: true
                },
                //总条数
                total: {
                    type: Number,
                    default: 0
                },
                //每页多少条
                pageSize: {
                    type: Number,
                    required: true
                },
                //连续数
                continueNum: {
                    type: Number,
                    default: 5
                }
       3))计算总页数和计算开始数和结束数
            computed: {
                //计算总页数
                totalPage() {
                    return Math.ceil(this.total / this.pageSize)
                },
                //根据当前页的不同计算连续也的起始位置和结束位置
                startEnd() {
                    let {currentPageNum, total, continueNum, pageSize, totalPage} = this
                    let start = 0, end = 0
                    if (continueNum > currentPageNum) {
                        start = 1,
                        end = continueNum
                    } else {
                        //先考虑正常情况下
                        start = currentPageNum - Math.floor(continueNum / 2)
                        end = currentPageNum + Math.floor(continueNum / 2)
                        //大于最大值 小于最小值
                        if (start < 1) {
                            start = 1,
                            end = continueNum
                        }
                        if (end > totalPage) {
                            start = totalPage - continueNum + 1,
                            end = totalPage
                        }
                     }
                    return {start, end}
                }
            }
    4))使用在模板位置使用
        <template>
          <div class="pagination">
            <button :disabled="currentPageNum===1" @click="$emit('changeNum',currentPageNum - 1)">上一页</button>
        <!--  这个1不是一直存在的,需要根据计算出来的连续数是不是1决定的  -->
            <button v-if="startEnd.start!==1" @click="$emit('changeNum',1)">1</button>
            <button v-if="startEnd.start>2">···</button>
        <!--v-for和v-if同时使用的时候 v-for优先级高-->
            <button @click="$emit('changeNum',page)" :class="{active:page===currentPageNum} "
                    v-for="(page,index) in startEnd.end" :key="page" v-if="page>=startEnd.start">{{ page }}
            </button>
            <button v-if="startEnd.end<totalPage-1">···</button>
            <button v-if="startEnd.end<totalPage" @click="$emit('changeNum',totalPage)">{{ totalPage }}</button>
            <button :disabled="currentPageNum===totalPage" @click="$emit('changeNum',currentPageNum+1)">下一页</button>
            <button style="margin-left: 30px">共 {{ total }}条</button>
          </div>
        </template>
    5))在search组件中写自定义事件 分页器pagination与search父组件用到了自定义事件 绑定自定义事件changeNum
        <Pagination
            :currentPageNum="searchParams.pageNo"
            :total="searchListInfo.total"
            :pageSize="searchParams.pageSize"
            :continueNum="5"
            @changeNum="changeNum"
        ></Pagination>
        methods:{
            //分页器
            changeNum(page){
                this.searchParams.pageNo=page
                this.getSearchInfo()
            }
        }
46.detail组件 详情页 从老师给的静态组件复制到pages中
        注意路由里不要带空格 这个bug很难找 控制台不会报错 也不出效果
    配置路由 router/routes.js 文件中
    第一步:引入 Detail组件 import Detail '@/pages/Detail'
    第二步:在routes中增加一项路由 这个需要携带参数 商品的ID  只有知道了id才能向服务器发请求 返回来详情是什么
            {
                path:'/detail/:skuId',
                component:Detail
            },
    第三步:router/index.js中增加一项 vue官网看 路由router 增加滚动行为  复制代码过来
            scrollBehavior 是为了让右边的滚动条在最上方 有时候点击过来的时候在中间的某个位置,体验效果不好
            export default new VueRouter({
                // mode:'history',//不带#
                routes,
                scrollBehavior (to, from, savedPosition) {
                    return { x: 0, y: 0 }
                }
            })
    第四步:在模板适当的位置用<router-link :to='''/>需要携带参数 可以写成字符串形式
    第五步:检查下是否从search页可以跳转到detail详情页
47.解决bug 用户在search点击最上方的后退按钮跳转到home首页的问题 
    1))无论在search也怎么点击 只要从search跳转到search页都没有历史记录 用replace 在需要跳转路由的两个地方
        this.$router.replace({name:'search',params:this.$route.params})
        this.$router.replace({name:'search',query:this.$route.query})
    2))header页在home页和search都有 需要判断一下 然后再跳转路由
        如果不是home页是search页  replace跳转到search页 不留历史记录
        如果相反 则用push 有历史记录的
    3))TypeNav组件的push 也需要判断一下 看是否留历史记录
        2))和3))写的代码一样
            if (this.$route.path === '/home') {
                this.$router.replace(location)
            } else {
                this.$router.push(location)
            }
    4))当用户的点击分页器时 重新发了请求,需要默认到第一页 
        在修改参数需要发请求的地方 都需要添加一下 this.searchParams.pageNo=1
48.详情页detail静态页面已经写好 需要初始化数据 动态渲染数据    
    第一步.写api接口函数 看接口文档
            //请求地址:api/item/{skuId} 请求方式 GET请求 需要携带参数 params参数
            export const reqDetailListInfo=(skuId)=>{
                return Ajax({
                    url:`/item/${skuId}`,
                    method:'get'
                })
            }
    第二步写store
        store/detail.js中写三连环  在store/index.js中引入 模块合并
    第三步:拧开关
        在Detail/index.vue中
            <script>
              import {mapGetters} from "vuex";
              export default {
                name: 'Detail',
                data(){
                  return{
                    skuId:''
                  }
                },
                beforeMount() {
                  this.skuId=this.$route.params.skuId
                },
                mounted() {
                  this.getDetailListInfo()
                },
                methods:{
                  getDetailListInfo(skuId){
                    this.$store.dispatch('getDetailListInfo',this.skuId)
                  }
                },
                computed:{
                  ...mapGetters(['categoryView','skuInfo','spuSaleAttrList']) 
                }
              }
            </script>                
    第四步 从vuex中捞数据
    第五步 动态的展示数据
    第六步 动态交互
        1))销售属性高亮 (排它)
        2))轮播小图点击时变成红色小框
        3))轮播图
        4))放大镜
        5))购买数量
        6))加入购物车
            1))销售属性高亮 (排它)
                ischecked 1高亮 0不高亮 
                    所有数据遍历 都为0
                    当前为1
                第一步绑定事件dd 需要传参
                    <dd 
                        changepirce="0" 
                        @click="changeChecked(saleAttrValue,saleAttr.spuSaleAttrValueList)"
                        :class="{active:saleAttrValue.isChecked==='1'}"
                        v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" 
                        :key="saleAttrValue.id">
                    {{ saleAttrValue.saleAttrValueName }}
                    </dd>
                第二步
                    //点击销售按钮切换点中状态(排它)
                    changeChecked(saleAttrValue, spuSaleAttrValueList) {
                        spuSaleAttrValueList.forEach(item => {
                            return item.isChecked = "0"
                        })
                        saleAttrValue.isChecked = "1"
                    },
            2))轮播小图点击时变成红色小框
                在imagelist组件中   
                    第一步 绑定事件
                        <img :src="image.imgUrl" :class="{active:defaultIndex===index}" @click="changeImg(index)">
                    第二步methods:{
                        changeImg(index){
                            //点击图片切换图片的橘色框
                            this.defaultIndex=index
                            //通知兄弟组件zoom切换图片
                            this.$bus.$emit('changeDefaultIndex',index)
                        },
                    第三步 zoom组件中
                        data() {
                            return {
                                defaultIndex: 0//设置的参考值
                            }
                        },
                        props: ['imageList'],
                        mounted() {
                            this.$bus.$on('changeDefaultIndex', (index) => {
                                this.defaultIndex = index
                            })
                        },
            3))轮播图 在imageList组件中 需要引入js 其中css已经全局引用了(main.js写了)
                从轮播图组件复制一份watch里面的数据,把监视对象改成imageList id即ref改成imageSwiper 
                从轮播图swiper官网找api文档--sblidesgid(网格分布) 找到slidesPerView和slidesPerGroup复制过来添加到watch中
                watch: {
                    imageList: {
                        immediate: true,
                        handler(newVal, oldVal) {
                            this.$nextTick(() => {
                                new Swiper(this.$refs.imageSwiper, {
                                    slidesPerView:3,//每一屏需要3张
                                    slidesPerGroup:3, //切换几张
                                    // 如果需要前进后退按钮
                                    navigation: {
                                        nextEl: '.swiper-button-next',
                                        prevEl: '.swiper-button-prev',
                                    },
                                })
                            })
                        }
                    }
                }
            4))放大镜 思想 
                //鼠标动 蒙版动 
                //蒙版动 大图动
                //算鼠标的位置
                代码区:
                    methods:{
                        move(event){
                            //第一步 鼠标动 蒙版动
                            //计算蒙版的位置
                                let mask=this.$refs.mask //获取蒙版元素 在蒙版div处写ref 然后收集到$refs
                                let bigImg=this.$refs.bigImg //获取大图元素 在大图div处写ref 然后收集到$refs
                            //第二步 算鼠标的位置
                                let mouseX=event.offsetX //获取鼠标x轴坐标
                                let mouseY=event.offsetY//获取鼠标y轴坐标
                                let maskX=mouseX-mask.offsetWidth/2 //鼠标移动算下蒙版的位置x轴=鼠标x轴的坐标-蒙版宽度的一半
                                let maskY=mouseY-mask.offsetHeight/2 //鼠标移动算下蒙版的位置Y轴=鼠标Y轴的坐标-蒙版高度的一半
                            //在赋值之前计算一下边界
                                if (maskX<0){
                                    maskX=0
                                }else if (maskX>mask.offsetWidth){
                                    maskX=mask.offsetWidth
                                }
                                if (maskY<0){
                                    maskY=0
                                }else if (maskY>mask.offsetHeight){
                                    maskY=mask.offsetHeight
                                }
                                mask.style.left=maskX+'px'//赋值给蒙版绝对定位后的值
                                mask.style.top=maskY+'px'
                            //第三步 蒙版动 大图动
                                bigImg.style.left=-2*maskX+'px' //大图默认是蒙版的2倍,
                                bigImg.style.top=-2*maskY+'px'
                        }
                    }
            5))购买数量
                input框用到双向绑定v-model 可以和@change事件合用 这个在底层的源码分析中就@input事件和@change事件实现双向绑定
                需要考虑的情况 
                    点击+ 递增1 需要考虑从字符串转数字 
                    点击- 递减 最小值是1 只能递减到1
                    <input autocomplete="off" class="itxt" v-model="skuNum" @change="skuNum*1>1?skuNum=skuNum:skuNum=1">
                    <a href="javascript:;" class="plus" @click="skuNum++">+</a>
                    <a href="javascript:;" class="mins" @click="skuNum>1?skuNum--:skuNum=1">-</a>
            6))加入购物车
                第一步:复制静态组件添加购物车成功  放在pages/AddCartSuccess下
                第二步:写api 看接口文档 
                    请求地址:/api/cart/addToCart/{ skuId }/{ skuNum } 请求方式post
                    写接口函数的时候 需要携带参数,params参数
                        export const reqShopCart=(skuId,skuNum)=>{
                            return Ajax({
                                url:`/cart/addToCart/${ skuId }/${ skuNum }`,
                                method:'POST'
                            })
                        }
                    //也可以省略此步骤  此时可以测试下 请求函数是否成功 调用一下函数和在main.js中引入
                第三步 写store 增加store/shopcart.js 写三连环 然后再store/index.js中引入和模块合并
                
            
                
                
49.补充的知识点
    promise
    session
    cookie
    localStorage
    sessionStorage
    按下F12在application中能到