devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端项目(二) vue项目实战-尚品汇_尚品汇前端项目详细步骤

作者：你好赵伟 | 2024-02-08 15:46:55

赞

踩

尚品汇前端项目详细步骤

一、项目简介

此项目包括首页, 搜索列表, 商品详情, 购物车, 订单, 支付, 用户登陆/注册等多个子模块，使用 Vue 全家 桶+ES6++Webpack+Axios 等技术，采用模块化、组件化、工程化的模式开发。

大家刚学完vue需要项目练手可以参考这个项目，B站视频教程 尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili

二、开发过程

day01

前端核心

开发一个前端模块可以概括为以下几个步骤：

（1）写静态页面、拆分为静态组件

（2）发请求（API）

（3）vuex（actions、mutations、state三连操作）

（4）组件获取仓库数据，动态展示 

   Ⅰ 开发准备

    1. 在项目当前目录安装vue2脚手架(前提是已安装npm)

    2. 安装完毕后，我们进行一些配置

        (1) 在package.json中设置项目运行浏览器自动打开，在vue.config.js中设置浏览器打开的IP地址及端口号。

  1. //package.json
  2. "scripts": {
  3.     "serve": "vue-cli-service serve --open", //项目运行完自动打开浏览器
  4.     "build": "vue-cli-service build",
  5.     "lint": "vue-cli-service lint"
  6. }
  7.  
  8. //vue.config.js
  9. const { defineConfig } = require('@vue/cli-service')
  10. module.exports = defineConfig({
  11.   transpileDependencies: true,
  12.   lintOnSave:false,
  13.  // 设置浏览器打开的IP地址及端口号
  14.   devServer: {
  15.     open: true,
  16.     host: 'localhost',
  17.     //这里因为我tomcat所用端口也是8080，vue也是8080，所以这里我改成8088了
  18.     port: 8088
  19.   }
  20. })

        (2) vue.config.js中关闭eslint校验工具(不关闭会有各种规范，不按照规范就会报错,如变量定义未使用、命名规范等小问题)

  1. //vue.config.js
  2. const { defineConfig } = require('@vue/cli-service')
  3. module.exports = defineConfig({
  4.   transpileDependencies: true,
  5.   lintOnSave:false,  //关闭关闭eslint校验工具
  6.   devServer: {
  7.     open: true,
  8.     host: 'localhost',
  9.     port: 8080
  10.   }
  11. })

        (3) 若组件样式是用less书写的，需要下载相关依赖，因为浏览器不识别该样式

  1. npm install --save less@4.1.3
  2. npm install --save less-loader@11.1.0

        (4) 导入reset.css文件清除vue页面默认的样式，因为vue单页面开发，我们只需要修改public下的index.html文件

<link rel="stylesheet" href="reset.css">

   (4) 在src目录下面创建pages文件夹用于存放路由组件，非路由组件存放在components。在pages文件中创建路由组件，同时创建router文件夹，里面创建index.js进行路由配置，并在main.js中进行引入注册。

路由组件和非路由组件区别：

- 非路由组件放在components中，路由组件放在pages或views中

- 非路由组件通过标签使用，路由组件通过路由使用

- 在main.js注册完路由，所有的路由和非路由组件身上都会拥有$router $route属性

- $router：一般进行编程式导航进行路由跳转

- $route： 一般获取路由信息（name path params等）

  1. /* 在router的index.js中配置路由 */
  2. //引入vue、vue-router
  3. import vue from "vue";
  4. import vueRouer from 'vue-router'
  5. //使用路由
  6. vue.use(vueRouer)
  7.  
  8. import Home from '@/pages/Home/MyHome'
  9. import Login from '@/pages/Login/MyLogin'
  10. import Register from '@/pages/Register/MyRegister'
  11. import Search from '@/pages/Search/MySearch'
  12.  
  13.  
  14. export default new vueRouer({
  15.     routes:[
  16.         {
  17.             path:'/home',
  18.             component:Home,
  19.         },
  20.         {
  21.             path:'/login',
  22.             component:Login,
  23.         },
  24.         {
  25.             path:'/register',
  26.             component:Register,
  27.         },
  28.         {
  29.             path:'/search',
  30.             component:Search,
  31.         },
  32.         {
  33.             path:'*',
  34.             redirect:'/home', 
  35.         }
  36.     ]
  37. })
  38.  
  39. /* 在main.js中进行引入注册 */
  40. import Vue from 'vue'
  41. import App from './App.vue'
  42. import router from '@/router'
  43.  
  44. Vue.config.productionTip = false
  45.  
  46. new Vue({
  47.   render: h => h(App),
  48.   router
  49. }).$mount('#app')

到此，我们vue项目的前置准备工作都已完成，下面进入组件开发阶段！！！ 

Ⅱ 静态页面拆分成vue组件

在拆分前，我们先分析下自己的页面，网页头部和尾部是每个页面的公共部分(除登录注册页面没有尾部),所以我们把他们弄成非路由组件，放在components文件夹中；而每个页面的中间内容部分都是不一样的，所以我们把这部分弄成路由组件，放在pages文件夹中，然后在router文件夹下对路由注册、配置。

        (1) 网页头部、尾部拆分成非路由组件

           1. 在src文件夹下创建好目录

            2. 在MyHeader.vue、MyFooter.vue中创建好模板(我用vscode，安装完插件后，<v，可以快速创建模板)，然后把静态页面的html、css、图片等资源都弄到对应组件中来

  1. /* MyHeader.vue组件 */
  2. <template>
  3.   <header class="header">
  4.     <!-- 头部的第一行 -->
  5.     <div class="top">
  6.       <div class="container">
  7.         <div class="loginList">
  8.           <p>尚品汇欢迎您！</p>
  9.           <p>
  10.             <span>请</span>
  11.             <a href="###">登录</a>
  12.             <a href="###" class="register">免费注册</a>
  13.           </p>
  14.         </div>
  15.         <div class="typeList">
  16.           <a href="###">我的订单</a>
  17.           <a href="###">我的购物车</a>
  18.           <a href="###">我的尚品汇</a>
  19.           <a href="###">尚品汇会员</a>
  20.           <a href="###">企业采购</a>
  21.           <a href="###">关注尚品汇</a>
  22.           <a href="###">合作招商</a>
  23.           <a href="###">商家后台</a>
  24.         </div>
  25.       </div>
  26.     </div>
  27.     <!--头部第二行 搜索区域-->
  28.     <div class="bottom">
  29.       <h1 class="logoArea">
  30.         <a class="logo" title="尚品汇" href="###" target="_blank">
  31.           <img src="./images/logo.png" alt="" />
  32.         </a>
  33.       </h1>
  34.       <div class="searchArea">
  35.         <form action="###" class="searchForm">
  36.           <input
  37.             type="text"
  38.             id="autocomplete"
  39.             class="input-error input-xxlarge"
  40.           />
  41.           <button class="sui-btn btn-xlarge btn-danger" type="button">
  42.             搜索
  43.           </button>
  44.         </form>
  45.       </div>
  46.     </div>
  47.   </header>
  48. </template>
  49.  
  50. <script>
  51. export default {};
  52. </script>
  53.  
  54. <style lang="less" scoped>
  55.         .header {
  56.         &>.top {
  57.             background-color: #eaeaea;
  58.             height: 30px;
  59.             line-height: 30px;
  60.  
  61.             .container {
  62.                 width: 1200px;
  63.                 margin: 0 auto;
  64.                 overflow: hidden;
  65.  
  66.                 .loginList {
  67.                     float: left;
  68.  
  69.                     p {
  70.                         float: left;
  71.                         margin-right: 10px;
  72.  
  73.                         .register {
  74.                             border-left: 1px solid #b3aeae;
  75.                             padding: 0 5px;
  76.                             margin-left: 5px;
  77.                         }
  78.                     }
  79.                 }
  80.  
  81.                 .typeList {
  82.                     float: right;
  83.  
  84.                     a {
  85.                         padding: 0 10px;
  86.  
  87.                         &+a {
  88.                             border-left: 1px solid #b3aeae;
  89.                         }
  90.                     }
  91.  
  92.                 }
  93.  
  94.             }
  95.         }
  96.  
  97.         &>.bottom {
  98.             width: 1200px;
  99.             margin: 0 auto;
  100.             overflow: hidden;
  101.  
  102.             .logoArea {
  103.                 float: left;
  104.  
  105.                 .logo {
  106.                     img {
  107.                         width: 175px;
  108.                         margin: 25px 45px;
  109.                     }
  110.                 }
  111.             }
  112.  
  113.             .searchArea {
  114.                 float: right;
  115.                 margin-top: 35px;
  116.  
  117.                 .searchForm {
  118.                     overflow: hidden;
  119.  
  120.                     input {
  121.                         box-sizing: border-box;
  122.                         width: 490px;
  123.                         height: 32px;
  124.                         padding: 0px 4px;
  125.                         border: 2px solid #ea4a36;
  126.                         float: left;
  127.  
  128.                         &:focus {
  129.                             outline: none;
  130.                         }
  131.                     }
  132.  
  133.                     button {
  134.                         height: 32px;
  135.                         width: 68px;
  136.                         background-color: #ea4a36;
  137.                         border: none;
  138.                         color: #fff;
  139.                         float: left;
  140.                         cursor: pointer;
  141.  
  142.                         &:focus {
  143.                             outline: none;
  144.                         }
  145.                     }
  146.                 }
  147.             }
  148.         }
  149.     }
  150. </style>
  1. /* MyFooter.vue 组件 */
  2. <template>
  3.   <div class="footer">
  4.     <div class="footer-container">
  5.       <div class="footerList">
  6.         <div class="footerItem">
  7.           <h4>购物指南</h4>
  8.           <ul class="footerItemCon">
  9.             <li>购物流程</li>
  10.             <li>会员介绍</li>
  11.             <li>生活旅行/团购</li>
  12.             <li>常见问题</li>
  13.             <li>购物指南</li>
  14.           </ul>
  15.         </div>
  16.         <div class="footerItem">
  17.           <h4>配送方式</h4>
  18.           <ul class="footerItemCon">
  19.             <li>上门自提</li>
  20.             <li>211限时达</li>
  21.             <li>配送服务查询</li>
  22.             <li>配送费收取标准</li>
  23.             <li>海外配送</li>
  24.           </ul>
  25.         </div>
  26.         <div class="footerItem">
  27.           <h4>支付方式</h4>
  28.           <ul class="footerItemCon">
  29.             <li>货到付款</li>
  30.             <li>在线支付</li>
  31.             <li>分期付款</li>
  32.             <li>邮局汇款</li>
  33.             <li>公司转账</li>
  34.           </ul>
  35.         </div>
  36.         <div class="footerItem">
  37.           <h4>售后服务</h4>
  38.           <ul class="footerItemCon">
  39.             <li>售后政策</li>
  40.             <li>价格保护</li>
  41.             <li>退款说明</li>
  42.             <li>返修/退换货</li>
  43.             <li>取消订单</li>
  44.           </ul>
  45.         </div>
  46.         <div class="footerItem">
  47.           <h4>特色服务</h4>
  48.           <ul class="footerItemCon">
  49.             <li>夺宝岛</li>
  50.             <li>DIY装机</li>
  51.             <li>延保服务</li>
  52.             <li>尚品汇E卡</li>
  53.             <li>尚品汇通信</li>
  54.           </ul>
  55.         </div>
  56.         <div class="footerItem">
  57.           <h4>帮助中心</h4>
  58.           <img src="./images/wx_cz.jpg" />
  59.         </div>
  60.       </div>
  61.       <div class="copyright">
  62.         <ul class="helpLink">
  63.           <li>
  64.             关于我们
  65.             <span class="space"></span>
  66.           </li>
  67.           <li>
  68.             联系我们
  69.             <span class="space"></span>
  70.           </li>
  71.           <li>
  72.             关于我们
  73.             <span class="space"></span>
  74.           </li>
  75.           <li>
  76.             商家入驻
  77.             <span class="space"></span>
  78.           </li>
  79.           <li>
  80.             营销中心
  81.             <span class="space"></span>
  82.           </li>
  83.           <li>
  84.             友情链接
  85.             <span class="space"></span>
  86.           </li>
  87.           <li>
  88.             关于我们
  89.             <span class="space"></span>
  90.           </li>
  91.           <li>
  92.             营销中心
  93.             <span class="space"></span>
  94.           </li>
  95.           <li>
  96.             友情链接
  97.             <span class="space"></span>
  98.           </li>
  99.           <li>关于我们</li>
  100.         </ul>
  101.         <p>地址：北京市昌平区宏福科技园综合楼6层</p>
  102.         <p>京ICP备19006430号</p>
  103.       </div>
  104.     </div>
  105.   </div>
  106. </template>
  107.  
  108. <script>
  109. export default {};
  110. </script>
  111.  
  112. <style lang="less" scoped>
  113.         .footer {
  114.         background-color: #eaeaea;
  115.  
  116.         .footer-container {
  117.             width: 1200px;
  118.             margin: 0 auto;
  119.             padding: 0 15px;
  120.  
  121.             .footerList {
  122.                 padding: 20px;
  123.                 border-bottom: 1px solid #e4e1e1;
  124.                 border-top: 1px solid #e4e1e1;
  125.                 overflow: hidden;
  126.                 padding-left: 40px;
  127.  
  128.                 .footerItem {
  129.                     width: 16.6666667%;
  130.                     float: left;
  131.  
  132.                     h4 {
  133.                         font-size: 14px;
  134.                     }
  135.  
  136.                     .footerItemCon {
  137.                         li {
  138.                             line-height: 18px;
  139.                         }
  140.                     }
  141.  
  142.                     &:last-child img {
  143.                         width: 121px;
  144.                     }
  145.                 }
  146.             }
  147.  
  148.             .copyright {
  149.                 padding: 20px;
  150.  
  151.                 .helpLink {
  152.                     text-align: center;
  153.  
  154.                     li {
  155.                         display: inline;
  156.  
  157.                         .space {
  158.                             border-left: 1px solid #666;
  159.                             width: 1px;
  160.                             height: 13px;
  161.                             background: #666;
  162.                             margin: 8px 10px;
  163.                         }
  164.                     }
  165.                 }
  166.  
  167.                 p {
  168.                     margin: 10px 0;
  169.                     text-align: center;
  170.                 }
  171.             }
  172.         }
  173.     }
  174. </style>

           3. 这时，我们已经完成了网页头部、尾部组件，然后在App.vue组件中引入、注册使用

  1. <template>
  2.   <div id="app">
  3.     <MyHeaderVue></MyHeaderVue>
  4.  
  5.  
  6.     <MyFooterVue></MyFooterVue>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11. import MyHeaderVue from './components/Header/MyHeader.vue'
  12. import MyFooterVue from './components/Footer/MyFooter.vue'
  13.  
  14. export default {
  15.   name: 'App',
  16.   components: {
  17.     MyHeaderVue,
  18.     MyFooterVue,
  19.  
  20.   }
  21. }
  22. </script>
  23.  
  24. <style>
  25.  
  26. </style>

            4. 此时我们在终端npm run serve启动脚手架，打开网页后看到了基本效果

         (2) 将每个页面的中间内容部分都弄成路由组件，并实现search页面路由跳转

           1. 将页面中间部分弄成路由组件(在前面我们已完成)

           2. 实现首页的搜索按钮点击路由跳转

路由跳转方式：  

- 声明式导航router-link标签 <router-link to=“path”>,可以把router-link理解为一个a标签，它 也可以加class修饰

- 编程式导航 ：声明式导航能做的编程式都能做，而且还可以处理一些业务

            这里我们用编程式导航来实现，首先需要v-model进行双向绑定获取搜索框输入的内容，然后为搜索按钮添加goSearch方法，实现路由跳转并传参。

传参方法

- 字符串形式    

this.$router.push("/search/"+this.params传参+"?k="+this.query传参)

- 模板字符串  

this.$router.push("/search/+${this.params传参}?k=${this.query传参}")  

**注意**： 上面字符串的传参方法可以看出params参数和'/'结合，query参数和？结合

`http://localhost:8080/#/search/asd?keyword=asd`  

上面url中asd为params的值，keyword=asd为query传递的值。

- 对象（常用）  

this.$router.push({name:"路由名字",params:{传参},query:{传参})。  

以对象方式传参时，如果我们传参中使用了params，只能使用name，不能使用path，如果只是使用query传参，可以使用path  。

  1. <input
  2.     v-model="keyword"  //双向绑定事件
  3.     type="text"
  4.     id="autocomplete"
  5.     class="input-error input-xxlarge"
  6.     />
  7. //goSearach路由跳转
  8. <button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
  9.    搜索
  10. </button>
  11.  
  12. //goSearch方法
  13.  goSearch(){
  14.       /* name这需要在router中index.js路由进行配置，这里传参我选择的是query参数,
  15.       若使用params则需要，在路由的path中占位，如：path：'/search/:keyword',同时还需要注意传递参 
  16.       数为空的情况，需要这么处理，params:{name:search,this.keyword || params: 
  17.       {keyword:this.keyword || undefined}}  */
  18.       this.$router.push({name:'MySearch',query:{keyword:this.keyword}})
  19.     }

            3. 此时我们注意一个小问题，当我们多次点击搜索按钮的时候，控制台会出现报错，这是因为我们实现路由跳转用的是$router.push()方法，他的返回值是一个promise，当传递参数多次且重复，会抛出异常。在router文件夹下的index.js文件中修改即可(重写push、replace方法)

  1. //需要重写VueRouter.prototype原型对象身上的push|replace方法
  2.  
  3. //这里我们先把VueRouter.prototype身上的push|replace方法进行保存一份
  4. let originPush = VueRouter.prototype.push
  5. let originReplace = VueRouter.prototype.push
  6.  
  7. //随后重写VueRouter.prototype身上的push方法
  8. VueRouter.prototype.push = function (location, resolve, reject) {
  9.   if (resolve && reject) {
  10.     originPush.call(this, location, resolve, reject);
  11.   } else {
  12.     //push方法没有产生第二个参数|第三个参数
  13.     originPush.call(
  14.       this,
  15.       location,
  16.       () => { },
  17.       () => { }
  18.     )
  19.   }
  20. }
  21.  
  22. //重写VueRouter.prototype身上的replace方法
  23. VueRouter.prototype.replace = function (location, resolve, reject) {
  24.   if (resolve && reject) {
  25.     originReplace.call(this, location, resolve, reject);
  26.   } else {
  27.     originReplace.call(
  28.       this,
  29.       location,
  30.       () => { },
  31.       () => { }
  32.     );
  33.   }
  34. };

         (3) 定义全局组件

             首页的三级联动组件在其他页面也有用到，所以这里我们把TypeNav注册为全局组件，全局的配置需要在main.js中进行配置

  1. //main.js中引入TypeNav全局组件
  2. import TypeNav from '@/components/TypeNav/TypeNav'
  3. //TypeNav全局组件注册,第一个参数全局的名字(组件名字一定要在TypeNav中定义上)，第二个参数哪一个组件
  4. Vue.component(TypeNav.name,TypeNav)

            全局组件定义注册完后，就可以在其他地方直接使用了

        (4) 完成首页内容的其他组件搭建，同样是html、css、图片等资源搭建，最后统一在MyHome.vue组件中进行引入、注册、使用 

  1. // 在MyHome.vue组件中完成其他中间内容组件的引入、注册、使用
  2.  
  3. <template>
  4.   <div>
  5.     <TypeNav></TypeNav>
  6.  
  7.     <ListContainerVue></ListContainerVue>
  8.     <TodayRecommendVue></TodayRecommendVue>
  9.     <MyRankVue></MyRankVue>
  10.     <MyLikeVue></MyLikeVue>
  11.     <MyFloorVue></MyFloorVue>
  12.     <MyFloorVue></MyFloorVue>
  13.     <MyBrandVue></MyBrandVue>
  14.   </div>
  15. </template>
  16.  
  17. <script>
  18. import MyBrandVue from "./Brand/MyBrand.vue";
  19. import MyFloorVue from "./Floor/MyFloor.vue";
  20. import MyLikeVue from "./Like/MyLike.vue";
  21. import ListContainerVue from "./ListContainer/ListContainer.vue";
  22. import MyRankVue from "./Rank/MyRank.vue";
  23. import TodayRecommendVue from "./TodayRecommend/TodayRecommend.vue";
  24.  
  25. export default {
  26.   name: "MyHome",
  27.   components: {
  28.     MyBrandVue,
  29.     MyFloorVue,
  30.     MyLikeVue,
  31.     ListContainerVue,
  32.     MyRankVue,
  33.     TodayRecommendVue,
  34.   },
  35. };
  36. </script>
  37.  
  38. <style>
  39. </style>

 至此，我们已经成功完成了首页静态页面的搭建！下图是day01的成果

day02

完成API请求

       我们网页的一些数据是需要动态获取的，当前页面三级联动的数据内容是写死的，我们要完成动态获取的需要，下面我们一起来看看怎么完成。

Ⅰ 向API发送请求，获取数据，动态三级联动

        (1) 二次封装axios(主要是为了使用请求、响应拦截器)

npm i -S axios  //安装axios 
  1. /* api文件夹下的request.js文件 */
  2.  
  3. //对axios进行二次封装
  4. import axios from 'axios'
  5.  
  6. //1.利用axios对象的方法create，去创建一个axios实例
  7. //2.request就是axios，只是就行了一些配置
  8. const requests = axios.create({
  9.     //配置对象
  10.     //基础路径，发请求的时候，路径中会出现api
  11.     baseURL: '/api',
  12.     timeout: 5000
  13. })
  14.  
  15. //请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些处理
  16. requests.interceptors.request.use((config) => {
  17.     //config:配置对象，对象里面有一个属性很重要，headers请求头
  18.     return config;
  19. })
  20.  
  21. //响应拦截器
  22. requests.interceptors.response.use((res) => {
  23.     //响应成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
  24.     return res.data
  25. }, (error) => {
  26.  
  27.     //响应失败的回调函数
  28.     return Promise.reject(new Error(error))
  29. })
  30.  
  31. //对外暴露
  32. export default requests

        (2) 准备向服务器发送请求，获取数据

  1. //当前模块将所有的API进行统一管理
  2. import requests from "@/api/request";
  3.  
  4. //三级联动接口 /api/product/getBaseCategoryList  get    无参数
  5.  
  6. //发请求,axios发请求返回结果是promise对象
  7.  
  8. //下面是axios发送对象请求的方式(三级联动发送数据请求)
  9. export const reqCategoryList = () => requests({url:'/product/getBaseCategoryList',method:'get'})
  10.

跨域问题： 

此时我们向服务器发请求获取数据，浏览器会报错，可能是因为跨域问题。跨域问题是指

浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制，即域名、协议、端口有一个不相同就是跨域。

这里我们采用代理服务器办法来解决跨域问题

  1. const { defineConfig } = require('@vue/cli-service')
  2. module.exports = defineConfig({
  3.   transpileDependencies: true,
  4.   lintOnSave:false,
  5.   //设置浏览器打开的IP地址及端口号
  6.   devServer:{
  7.     open:true,
  8.     host:'localhost',
  9.     port:8088,
  10.     //代理服务器解决跨域问题(协议、域名、端口号不同)
  11.     proxy:{
  12.       'api':{
  13.         target:'http://39.98.123.211:8510'
  14.       }
  15.     }
  16.   }
  17. })

        (3) 将获取到的数据存储到vuex中

在项目比较大的时候，组件多，数据多，这时候需要用到vuex来存储数据。首先我们在src下创建store文件夹，再创建index.js，在index.js中引入vuex；在main.js注册store；

当项目较大时，我们需要使用vuex模块化来存储数据，在src的store文件夹下创建home、search文件夹，这两个文件夹的index.js是两个小仓库，最后需要在store的index.js大仓库中引入这两个小仓库，这时我们成功搭建了vuex的store仓库

            1. 创建好store及其子目录，并完成配置在main.js中注册

  1. /*home小仓库*/
  2. const state = {}
  3. const mutations = {}
  4. const actions = {}
  5. const getters = {}
  6.  
  7. export default {
  8.     state,
  9.     mutations,
  10.     actions,
  11.     getters
  12. }
  13.  
  14. /*search小仓库*/
  15. const state = {}
  16. const mutations = {}
  17. const actions = {}
  18. const getters = {}
  19.  
  20.  
  21.  
  22. export default {
  23.     state,
  24.     mutations,
  25.     actions,
  26.     getters
  27. }
  28.  
  29. /*store大仓库*/
  30. import Vue from "vue";
  31. import Vuex from 'vuex'
  32. Vue.use(Vuex)
  33.  
  34. //引入小仓库
  35. import home from './Home'
  36. import search from './Search'
  37.  
  38.  
  39. //对外暴露Store类的一个实例
  40. export default new Vuex.Store({
  41.     modules:{
  42.         home,
  43.         search
  44.     }
  45. })
  46.  
  47. /*在main.js中完成注册*/
  48. import Vue from 'vue'
  49. import App from './App.vue'
  50. import router from '@/router'
  51. import store from '@/store'
  52.  
  53. //引入TypeNav全局组件
  54. import TypeNav from '@/components/TypeNav/TypeNav'
  55. //TypeNav全局组件注册,第一个参数全局的名字，第二个参数哪一个组件
  56. Vue.component(TypeNav.name,TypeNav)
  57.  
  58. Vue.config.productionTip = false
  59.  
  60. new Vue({
  61.   render: h => h(App),
  62.   //注册路由：当这里写上router时，组件实例身上都拥有了$route,&router属性
  63.   router,
  64.   //注册全局组件
  65.   TypeNav,
  66.   //注册仓库：组件实例的身上会多一个$store属性
  67.   store,
  68. }).$mount('#app')

            2. 我们需要向服务器请求数据，然后保存到vuex中

我们需要获取的是TypeNav.vue组件三级联动的一些商品信息。当TypeNav组件挂载完毕时，我们需要向服务器请求数据，将获取到的数据用vuex的"三连环"存储到home小仓库中

npm i -S vuex@3.6.2 //安装vuex
  1. /* TypeNav.vue */
  2. <script>
  3. export default {
  4.   name: "TypeNav",
  5.   //当组件挂载完毕，可以向服务器发送请求
  6.   mounted() {
  7.     //通知vuex发送请求，将获取到的数据存储到仓库当中
  8.     this.$store.dispatch('categoryList')
  9.   },
  10.   
  11. };
  12. </script>
  13.  
  14. /* home小仓库完成数据获取、存储 */
  15. /* home的小仓库 */
  16. import { reqCategoryList } from '@/api'
  17.  
  18.  
  19. //state:仓库存储数据的地方
  20. //mutations:修改state的唯一手段
  21. //action:处理action，可以书写自己的业务逻辑，也可以处理异步
  22. //通过API里面的接口函数调用，向服务器发送请求，获取服务器数据
  23. //getters:理解为计算属性，用于简化仓库数据，让组件获取仓科的数据更加方便
  24.  
  25. const state = {
  26.     categoryList:[]
  27. }
  28. const mutations = {
  29.     CATEGORYLIST(state,categoryList){
  30.         state.categoryList = categoryList
  31.     }
  32. }
  33. const actions = {
  34.     //通过API里面的接口函数调用，向服务器发送请求获取数据
  35.     async categoryList({ commit }) {
  36.         let result = await reqCategoryList()
  37.         if(result.code == 200){
  38.             commit("CATEGORYLIST",result.data)
  39.         }
  40.     }
  41. }
  42.  
  43. const getters = {}
  44.  
  45. export default {
  46.     state,
  47.     mutations,
  48.     actions,
  49.     getters
  50. }

           此时我们打开浏览器vue插件，会发现home组件下state下完成了数据的存储

        (4). 将TypeNav.vue组件的三级联动动态实现

           1. 在TypeNav.vue组件中获取到vuex中数据，在TypeNav组件下可查看到categoryList数据

  1. /* TypeNav.vue组件 */
  2. <script>
  3. import {mapState} from 'vuex'
  4. export default {
  5.   name: "TypeNav",
  6.   //当组件挂载完毕，可以向服务器发送请求
  7.   mounted() {
  8.     //通知vuex发送请求，将获取到的数据存储到仓库当中
  9.     this.$store.dispatch('categoryList')
  10.   },
  11.   computed:{
  12.     ...mapState({
  13.       //对象写法，右侧是一个函数，当使用计算属性的时候，右侧函数会立即执行
  14.       //state参数是大仓库中的数据
  15.       categoryList:state => state.home.categoryList
  16.     })
  17.   }
  18.   
  19. };
  20. </script>

           2. 将静态数据删除，v-for动态实现三级联动

  1. <template>
  2.   <div class="type-nav">
  3.     <div class="container">
  4.       <h2 class="all">全部商品分类</h2>
  5.       <nav class="nav">
  6.         <a href="###">服装城</a>
  7.         <a href="###">美妆馆</a>
  8.         <a href="###">尚品汇超市</a>
  9.         <a href="###">全球购</a>
  10.         <a href="###">闪购</a>
  11.         <a href="###">团购</a>
  12.         <a href="###">有趣</a>
  13.         <a href="###">秒杀</a>
  14.       </nav>
  15.       <div class="sort">
  16.         <div class="all-sort-list2">
  17.           <div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId">
  18.             <h3>
  19.               <a href="">{{c1.categoryName}}</a>
  20.             </h3>
  21.             <div class="item-list clearfix">
  22.               <div class="subitem" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
  23.                 <dl class="fore">
  24.                   <dt>
  25.                     <a href="">{{c2.categoryName}}</a>
  26.                   </dt>
  27.                   <dd>
  28.                     <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
  29.                       <a href="">{{c3.categoryName}}</a>
  30.                     </em>
  31.                   </dd>
  32.                 </dl>
  33.               </div>
  34.             </div>
  35.           </div>
  36.         </div>
  37.       </div>
  38.     </div>
  39.   </div>
  40. </template>

此时我们已经完成了从服务器API请求数据，保存到vuex中，最后再动态地渲染页面！

Ⅱ 为三级联动菜单动态添加背景颜色

当鼠标移动到一级菜单时，此菜单会有背景颜色出现。当然，此效果我们可以用css的:hover伪类实现，但是为了练习js，此效果我们采用js来动态添加。

首先为一级菜单h2标题添加鼠标移入、移出事件，当鼠标移入出现背景颜色，鼠标移出背景颜色消失。如何准确地为当前菜单添加上背景颜色呢？这里，我们可以获取到每一个菜单的索引值，创建一个变量当前的索引，当它和鼠标所在菜单的索引相同时，为此菜单添加类名，即添加上背景颜色，鼠标离开，则将索引值置为-1，取消类名

  1. <template>
  2.   <div class="type-nav">
  3.     <div class="container">
  4.       <div @mouseleave="leaveStyle">
  5.         <h2 class="all">全部商品分类</h2>
  6.         <div class="sort">
  7.           <div class="all-sort-list2">
  8.             <div
  9.               class="item"
  10.               v-for="(c1, index) in categoryList"
  11.               :key="c1.categoryId"
  12.             >
  13.               <h3
  14.                 @mouseenter="enterStyle(index)"
  15.                 :class="{ cur: currentIndex == index }"
  16.               >
  17.                 <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
  18.               </h3>
  19.               <div class="item-list clearfix" :style="{display:currentIndex == index ?'block':'none'}">
  20.                 <div
  21.                   class="subitem"
  22.                   v-for="(c2, index) in c1.categoryChild"
  23.                   :key="c2.categoryId"
  24.                 >
  25.                   <dl class="fore">
  26.                     <dt>
  27.                       <a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId">{{ c2.categoryName }}</a>
  28.                     </dt>
  29.                     <dd>
  30.                       <em
  31.                         v-for="(c3, index) in c2.categoryChild"
  32.                         :key="c3.categoryId"
  33.                       >
  34.                         <a  :data-categoryName="c3.categoryName"  :data-category3Id="c3.categoryId">{{ c3.categoryName }}</a>
  35.                       </em>
  36.                     </dd>
  37.                   </dl>
  38.                 </div>
  39.               </div>
  40.             </div>
  41.           </div>
  42.         </div>
  43.       </div>
  44.       <nav class="nav">
  45.         <a href="###">服装城</a>
  46.         <a href="###">美妆馆</a>
  47.         <a href="###">尚品汇超市</a>
  48.         <a href="###">全球购</a>
  49.         <a href="###">闪购</a>
  50.         <a href="###">团购</a>
  51.         <a href="###">有趣</a>
  52.         <a href="###">秒杀</a>
  53.       </nav>
  54.     </div>
  55.   </div>
  56. </template>
  57.  
  58. <script>
  59. import { mapState } from "vuex";
  60. //import _ from 'lodash'
  61. import throttle from 'lodash/throttle'
  62. export default {
  63.   name: "TypeNav",
  64.   //当组件挂载完毕，可以向服务器发送请求
  65.   data() {
  66.     return {
  67.       //存储用户鼠标移上哪一个一级分类
  68.       currentIndex: -1,
  69.     };
  70.   },
  71.   mounted() {
  72.     //通知vuex发送请求，将获取到的数据存储到仓库当中
  73.     this.$store.dispatch("categoryList");
  74.   },
  75.   computed: {
  76.     ...mapState({
  77.       //对象写法，右侧是一个函数，当使用计算属性的时候，右侧函数会立即执行
  78.       //state参数是大仓库中的数据
  79.       categoryList: (state) => state.home.categoryList,
  80.     }),
  81.   },
  82.   methods: {
  83.     enterStyle:throttle(function (index){
  84.       this.currentIndex = index
  85.  
  86.     },50),
  87.     leaveStyle() {
  88.       this.currentIndex = -1;
  89.     },
  90.   },
  91. };
  92. </script>

防抖和节流: 

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

我们的三级联动，当鼠标从上到下滑动过快，会加重浏览器负担，需要采用节流

  1. <script>
  2. import { mapState } from "vuex";
  3. //import _ from 'lodash'
  4. import throttle from 'lodash/throttle'
  5. export default {
  6.   name: "TypeNav",
  7.   methods: {
  8.     /* 节流操作 */
  9.     enterStyle:throttle(function (index){
  10.       this.currentIndex = index
  11.     },50)
  12. };
  13. </script>

Ⅲ 三级联动菜单的路由跳转及传参

当我们点击三级联动的一级、二级、三级菜单的时候，跳转到对应页面，且在地址栏正确完成参数传递。

我们选择编程式导航跳转+事件委托的方法实现跳转，如果不用事件委托的话，每个a标签都有自己的回调，会一直for循环执行方法，大大降低效率；但是采用事件委托后，当我们点击非a标签也会完成跳转，传递参数也是个问题。

此时，我们为a标签添加上自定义属性，:data-categoryName="c1.categoryName"  :data-category1Id="c1.categoryId"，这样我们利用event.target.dataset可以识别点击的是不是a，同时也可以获取到id值，也能完成传参工作

  1. <template>
  2.   <div class="type-nav">
  3.     <div class="container">
  4.       <div @mouseleave="leaveStyle">
  5.         <h2 class="all">全部商品分类</h2>
  6.         <div class="sort">
  7.           <div class="all-sort-list2" @click="goSearch">
  8.             <div
  9.               class="item"
  10.               v-for="(c1, index) in categoryList"
  11.               :key="c1.categoryId"
  12.             >
  13.               <h3
  14.                 @mouseenter="enterStyle(index)"
  15.                 :class="{ cur: currentIndex == index }"
  16.               >
  17.                 <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
  18.               </h3>
  19.               <div class="item-list clearfix" :style="{display:currentIndex == index ?'block':'none'}">
  20.                 <div
  21.                   class="subitem"
  22.                   v-for="(c2, index) in c1.categoryChild"
  23.                   :key="c2.categoryId"
  24.                 >
  25.                   <dl class="fore">
  26.                     <dt>
  27.                       <a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId">{{ c2.categoryName }}</a>
  28.                     </dt>
  29.                     <dd>
  30.                       <em
  31.                         v-for="(c3, index) in c2.categoryChild"
  32.                         :key="c3.categoryId"
  33.                       >
  34.                         <a  :data-categoryName="c3.categoryName"  :data-category3Id="c3.categoryId">{{ c3.categoryName }}</a>
  35.                       </em>
  36.                     </dd>
  37.                   </dl>
  38.                 </div>
  39.               </div>
  40.             </div>
  41.           </div>
  42.         </div>
  43.       </div>
  44.       <nav class="nav">
  45.         <a href="###">服装城</a>
  46.         <a href="###">美妆馆</a>
  47.         <a href="###">尚品汇超市</a>
  48.         <a href="###">全球购</a>
  49.         <a href="###">闪购</a>
  50.         <a href="###">团购</a>
  51.         <a href="###">有趣</a>
  52.         <a href="###">秒杀</a>
  53.       </nav>
  54.     </div>
  55.   </div>
  56. </template>
  57.  
  58. <script>
  59. import { mapState } from "vuex";
  60. //import _ from 'lodash'
  61. import throttle from 'lodash/throttle'
  62. export default {
  63.   name: "TypeNav",
  64.   //当组件挂载完毕，可以向服务器发送请求
  65.   data() {
  66.     return {
  67.       //存储用户鼠标移上哪一个一级分类
  68.       currentIndex: -1,
  69.     };
  70.   },
  71.   mounted() {
  72.     //通知vuex发送请求，将获取到的数据存储到仓库当中
  73.     this.$store.dispatch("categoryList");
  74.   },
  75.   computed: {
  76.     ...mapState({
  77.       //对象写法，右侧是一个函数，当使用计算属性的时候，右侧函数会立即执行
  78.       //state参数是大仓库中的数据
  79.       categoryList: (state) => state.home.categoryList,
  80.     }),
  81.   },
  82.   methods: {
  83.     enterStyle:throttle(function (index){
  84.       this.currentIndex = index
  85.  
  86.     },50),
  87.     leaveStyle() {
  88.       this.currentIndex = -1;
  89.     },
  90.     goSearch(event){
  91.       let element = event.target
  92.       let {categoryname,category1id,category2id,category3id} = element.dataset
  93.  
  94.       if(categoryname){
  95.         //路由跳转的参数
  96.         let location = {name:'MySearch'}
  97.         let query = {categoryName:categoryname}
  98.         if(category1id){
  99.           query.category1Id = category1id
  100.         }else if(category2id){
  101.           query.category2Id = category2id
  102.         }else{
  103.           query.category3Id = category3id
  104.         }
  105.         location.query = query
  106.         this.$router.push(location)
  107.       }
  108.     },
  109.   },
  110. };
  111. </script>

但是这里我们注意个问题：路由销毁，Vue在路由切换的时候会销毁旧路由。

在上面的三级列表全局组件TypeNav中的mounted进行了请求一次商品分类列表数据，但是由于路由销毁问题，当我们再次使用三级列表全局组件时还会发一次请求。当我们在包含三级列表全局组件的不同组件之间进行切换时，都会进行一次信息请求。
由于每次请求的信息都是一样的，出于性能的考虑我们希望该数据只请求一次，所以我们把这次请求放在App.vue的mounted中。（根组件App.vue的mounted只会执行一次）

注意：虽然main.js也是只执行一次，但是不可以放在main.js中。因为只有组件的身上才会有$store属性。

  1. <script>
  2. import MyHeader from './components/Header/MyHeader'
  3. import MyFooter from './components/Footer/MyFooter.vue'
  4. export default {
  5.   name: 'App',
  6.   components: {
  7.       MyHeader,
  8.       MyFooter,
  9.   },
  10.   mounted() {
  11.     //通知vuex发请求，获取数据，存储于仓库中
  12.     this.$store.dispatch("categoryList");
  13.   },
  14. }
  15. </script>

 Ⅳ 合并参数(三级联动和搜索框

    完成效果，搜索框我搜索的是华为，三级联动我点的是图书、音像、电子书

    我们会先判断当前路由的参数，如果是params参数，判断它有没有query参数；如果是query，判断它有没有params参数，如果有的话，会在它当前路径location对象上面添加上另一个参数，这样它就能带两个参数了。

  1. goSearch(){
  2.       if(this.$route.query){
  3.         let location = {name:'MySearch',params:{keyword:this.keyword || undefined}}
  4.         location.query = this.$route.query
  5.         this.$router.push(location)
  6. }
  7.  
  8. goSearch(event){
  9.       let element = event.target
  10.       let {categoryname,category1id,category2id,category3id} = element.dataset
  11.  
  12.       if(categoryname){
  13.         //路由跳转的参数
  14.         let location = {name:'MySearch'}
  15.         let query = {categoryName:categoryname}
  16.         if(category1id){
  17.           query.category1Id = category1id
  18.         }else if(category2id){
  19.           query.category2Id = category2id
  20.         }else{
  21.           query.category3Id = category3id
  22.         }
  23.         if(this.$route.params){
  24.           location.params = this.$route.params
  25.           location.query = query
  26.           this.$router.push(location)
  27.         }
  28.         
  29.       }
  30.     }

day03

mock插件模拟后端数据

mock用来拦截前端ajax请求，返回我们自定义的数据用于测试前端接口，即我们自己可以模拟前后端分离项目。

Ⅰ 搭建好mock数据及mockServe.js

在mock文件夹下创建banner.json、floor.json数据，同时mockServe.js配置好数据，当前端发送数据请求时，mock拦截前端ajax请求，及时做出响应。

  1. import Mock from "mockjs";
  2. import banner from './banner.json';
  3. import floor from './floor.json'
  4.  
  5. //参数：请求地址  请求数据
  6. Mock.mock("/mock/banner",{code:200,data:banner})
  7. Mock.mock("/mock/floor",{code:200,data:floor})

Ⅱ 向mock发送数据请求实现动态轮播

        (1) 封装ajax，得到mockAjax.js

  1. //对axios进行二次封装
  2. import axios from 'axios'
  3. //引入进度条
  4. import nProgress from 'nprogress'
  5. import "nprogress/nprogress.css"
  6. //1.利用axios对象的方法create，去创建一个axios实例
  7. //2.request就是axios，只是就行了一些配置
  8. const requests = axios.create({
  9.     //配置对象
  10.     //基础路径，发请求的时候，路径中会出现mock
  11.     baseURL: '/mock',
  12.     timeout: 5000
  13. })
  14.  
  15. //请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些处理
  16. requests.interceptors.request.use((config) => {
  17.     //config:配置对象，对象里面有一个属性很重要，headers请求头
  18.     nProgress.start()
  19.     return config;
  20. })
  21.  
  22. //响应拦截器
  23. requests.interceptors.response.use((res) => {
  24.     //响应成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
  25.     nProgress.done()
  26.     return res.data
  27. }, (error) => {
  28.  
  29.     //响应失败的回调函数
  30.     return Promise.reject(new Error(error))
  31. })
  32.  
  33.  
  34.  
  35. //对外暴露
  36. export default requests

         (2) ajax发送请求，获取轮播图数据

  1. //当前模块将所有的API进行统一管理
  2. import requests from "@/api/request";
  3. import mockRequests from "@/api/mockAjax";
  4.  
  5. //三级联动接口 /api/product/getBaseCategoryList  get    无参数
  6.  
  7. //发请求,axios发请求返回结果是promise对象
  8.  
  9. //下面是axios发送对象请求的方式(三级联动发送数据请求)
  10. export const reqCategoryList = () => requests({url:'/product/getBaseCategoryList',method:'get'})
  11.  
  12. export const reqGetBannerList = () => mockRequests.get('/banner')

        (3)  将获取到的数据存储到vuex中

        (4)  获取vuex中存储的数据，实现轮播图效果

这里我们需要注意一个问题，就是我们是在什么时候调用接口函数实现动态轮播图？当挂载完毕后发送请求我们在mounted中先去异步请求了轮播图数据，然后又创建的swiper实例。由于请求数据是异步的，所以浏览器不会等待该请求执行(获取完数据并且v-for已执行完毕)完再去创建swiper，而是先创建了swiper实例，但是此时我们的轮播图数据还没有获得，就导致了轮播图展示失败。

使用watch+[this.$nextTick()]解决此问题，this. $nextTick它会将回调延迟到下次 DOM更新循环之后执行（循环就是这里的v-for），即nextTick函数会等浏览器执行完请求(获取到数据、v-for执行完毕后)，再创建swiper实列，无非是等我们页面中的结构都有了再去执行回调函数，这样就不会出现轮播图不显示的问题了。

我们这可以更加完善点将轮播图组件封装成全局组件进行调用。

  1. <script>
  2. import Swiper from "swiper";
  3. export default {
  4.   name: "MyCarousel",
  5.   props: ["list"],
  6.   watch: {
  7.     list: {
  8.       immediate: true,
  9.       handler() {
  10.         this.$nextTick(() => {
  11.           new Swiper(this.$refs.cur, {
  12.             loop: true,
  13.             pagination: {
  14.               el: ".swiper-pagination",
  15.               clickable: true,
  16.             },
  17.             // 如果需要前进后退按钮
  18.             navigation: {
  19.               nextEl: ".swiper-button-next",
  20.               prevEl: ".swiper-button-prev",
  21.             },
  22.             // 如果需要滚动条
  23.             scrollbar: {
  24.               el: ".swiper-scrollbar",
  25.             },
  26.           });
  27.         });
  28.       },
  29.     },
  30.   },
  31. };
  32. </script>

 此时我们已经完成了home组件的开发！

day04

完成search组件的开发

（1）将search模块拆分为静态组件

（2）发请求（API）获取商品数据

（3）vuex（actions、mutations、state三连操作）

（4）组件获取仓库数据，动态展示商品 

（5）组件获取仓库数据，动态展示商品 

Ⅰ 将search模块拆分为静态组件

        此过程我们在前面已经详细说过了，在此处省略。。。。。

Ⅱ 发请求（API）获取商品数据

        (1) 向服务器发送数据

        在api下的index.js向服务器发送请求,此处发送的请求是需要带有参数的。当我们在搜索框输入数据或者点三级联动的数据时，会向服务器发送请求获取商品数据。

export const reqGetSearchInfo = (params) => requests({url:"/list",method:"post",data:params})

        (2) 获取服务器返回的数据

        我们此处使用getters来传递数据，如果不使用getters属性，我们在组件获取state中的数据表达式为：`this.$store.state.子模块.属性`，如果有多个组件需要用到此属性，我们要么复制这个表达式，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。而getters将获取store中的数据封装为函数，代码维护变得更简单（和我们将请求封装为api一样），而且getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。仓库中的getters是全局属性，是不分模块的，即store中所有模块的getter内的函数都可以通过`$store.getters.函数名`获取。 

在这里注意：我们这个请求是需要参数的，我第一次默写的时候发现了错误，后来才知道这里忘了传递参数，让我检查了半小时。。。

  1. /*serach小仓库文件下的index.js*/
  2. import { reqGetSearchInfo } from "@/api"
  3.  
  4. const state = {
  5.     searchList:{},
  6.     
  7. }
  8. const mutations = {
  9.     GETSEARCHLIST(state,searchList){
  10.         state.searchList = searchList
  11.     }
  12. }
  13. const actions = {
  14.     //获取search模块数据
  15.     async getSearchList({commit},params={}){
  16.        let result = await reqGetSearchInfo(params)
  17.        if(result.code == 200){
  18.         commit("GETSEARCHLIST",result.data)
  19.        }
  20.     }
  21.  
  22. }
  23. const getters = {
  24.     goodsList(state){
  25.         return state.searchList.goodsList || []
  26.     },
  27.     trademarkList(state){
  28.         return state.searchList.trademarkList || []
  29.     },
  30.     attrsList(state){
  31.         return state.searchList.attrsList || []
  32.     }
  33. }
  34.  
  35. export default {
  36.     state,
  37.     mutations,
  38.     actions,
  39.     getters
  40. }
  41.  
  42. /* serach组件下的index.vue */
  43. <script>
  44. import SearchSelector from "./SearchSelector/SearchSelector";
  45. import { mapGetters } from "vuex";
  46. export default {
  47.   name: "MySearch",
  48.   beforeMount() {
  49.     Object.assign(this.searchParams, this.$route.query, this.$route.params);
  50.   },
  51.   mounted() {
  52.     this.getData();
  53.   },
  54.  
  55.   components: {
  56.     SearchSelector,
  57.   },
  58.   data() {
  59.     return {
  60.       searchParams: {
  61.         category1Id: "",
  62.         category2Id: "",
  63.         category3Id: "",
  64.         categoryName: "",
  65.         keyword: "",
  66.         order: "",
  67.         pageNo: 1,
  68.         pageSize: 10,
  69.         props: [""],
  70.         trademark: "",
  71.       },
  72.     };
  73.   },
  74.   methods: {
  75.     //根据参数不同获取发请求数据
  76.     getData() {
  77.       this.$store.dispatch("getSelectList", this.searchParams);
  78.     },
  79.   },
  80.   computed: {
  81.     ...mapGetters(["goodsList"]),
  82.   },
  83. };
  84. </script>

        现在我们用getters传递了goodlist数据，并v-for动态地渲染了出来。

         (3)  动态的实现商品搜索功能

当我们点击三级联动的其他地方或搜索框内容变化的时候，即地址栏参数变了，这时候下面的数据也需要变化，即重现向服务发送数据请求，重新遍历。

  1. <script>
  2. import SearchSelector from "./SearchSelector/SearchSelector";
  3. import { mapGetters } from "vuex";
  4. export default {
  5.   name: "MySearch",
  6.   beforeMount() {
  7.     Object.assign(this.searchParams, this.$route.query, this.$route.params);
  8.   },
  9.   mounted() {
  10.     this.getData();
  11.   },
  12.  
  13.   components: {
  14.     SearchSelector,
  15.   },
  16.   data() {
  17.     return {
  18.       searchParams: {
  19.         category1Id: "",
  20.         category2Id: "",
  21.         category3Id: "",
  22.         categoryName: "",
  23.         keyword: "",
  24.         order: "",
  25.         pageNo: 1,
  26.         pageSize: 10,
  27.         props: [""],
  28.         trademark: "",
  29.       },
  30.     };
  31.   },
  32.   methods: {
  33.     //根据参数不同获取发请求数据
  34.     getData() {
  35.       this.$store.dispatch("getSelectList", this.searchParams);
  36.     },
  37.   },
  38.   computed: {
  39.     ...mapGetters(["goodsList"]),
  40.   },
  41. };
  42. </script>

核心的地方： 

如何实时更新请求参数？

这里我们在data下创建SearchSelector对象来存储所有的参数，当参数发生变化后，会对参数重新赋值，然后根据最新的参数重新发送请求。

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

此时，当我们点击三级联动的数据或在搜索框内容输入数据的时候，可以动态的筛选跳转到指定条件的商品，实现了search模块根据不同参数获取数据展示。

        (4) search模块中子组件动态开发

        此组件所需的数据，我们此前已经存储在了vuex中，我们只需获取vuex中数据即可，然后v-for实现动态开发。

  1. <template>
  2.   <div class="clearfix selector">
  3.     <div class="type-wrap logo">
  4.       <div class="fl key brand">品牌</div>
  5.       <div class="value logos">
  6.         <ul class="logo-list" v-for="trademark in trademarkList" :key="trademark.tmId">
  7.           <li>{{trademark.tmName}} </li>
  8.         </ul>
  9.       </div>
  10.       <div class="ext">
  11.         <a href="javascript:void(0);" class="sui-btn">多选</a>
  12.         <a href="javascript:void(0);">更多</a>
  13.       </div>
  14.     </div>
  15.     <div class="type-wrap" v-for="(attr) in attrsList" :key="attr.attrId">
  16.       <div class="fl key">{{attr.attrName}}</div>
  17.       <div class="fl value">
  18.         <ul class="type-list">
  19.           <li v-for="(attrValue,index) in attr.attrValueList" :key="index">
  20.             <a>{{attrValue}} </a>
  21.           </li>
  22.         </ul>
  23.       </div>
  24.       <div class="fl ext"></div>
  25.     </div>
  26.   </div>
  27. </template>
  28.  
  29. <script>
  30. import {mapGetters} from 'vuex'
  31.   export default {
  32.     name: 'SearchSelector',
  33.     computed:{
  34.       ...mapGetters(['trademarkList','attrsList'])
  35.     }
  36.   }
  37. </script>

        (6) 监听路由，当参数变化的时候再次发送请求

        当我们来到搜索页面的时候，搜索完一个商品想在搜索一个商品的时候这时候地址栏参数发生了变化，此时我们需要再次向服务器发请求获取新数据。这时我们可以监听路由$router,当参数发生变化就向服务器发请求。

        同时注意一个问题：categoryId在请求完需要置空。当我们点击1Id发请求后没置空，在点2Id这时候会残留上次请求的1Id。

  1. <script>
  2. import SearchSelector from "./SearchSelector/SearchSelector";
  3. import { mapGetters } from "vuex";
  4. export default {
  5.   name: "MySearch",
  6.   beforeMount() {
  7.     Object.assign(this.searchParams, this.$route.query, this.$route.params);
  8.   },
  9.   mounted() {
  10.     this.getData();
  11.   },
  12.  
  13.   components: {
  14.     SearchSelector,
  15.   },
  16.   data() {
  17.     return {
  18.       searchParams: {
  19.         category1Id: "",
  20.         category2Id: "",
  21.         category3Id: "",
  22.         categoryName: "",
  23.         keyword: "",
  24.         order: "",
  25.         pageNo: 1,
  26.         pageSize: 10,
  27.         props: [""],
  28.         trademark: "",
  29.       },
  30.     };
  31.   },
  32.   methods: {
  33.     //根据参数不同获取发请求数据
  34.     getData() {
  35.       this.$store.dispatch("getSelectList", this.searchParams);
  36.     },
  37.   },
  38.   computed: {
  39.     ...mapGetters(["goodsList"]),
  40.   },
  41.   watch: {
  42.     $route() {
  43.       Object.assign(this.searchParams, this.$route.query, this.$route.params);
  44.       this.getData()
  45.       this.searchParams.category1Id = ''
  46.       this.searchParams.category2Id = ''
  47.       this.searchParams.category3Id = ''
  48.     },
  49.   },
  50. };
  51. </script>

         (7) 面包屑处理分类的操作

        1. 当我们点击三级联动标签时，会动态的创建出对应的面包屑标签，这里使用v-if语句来判断,当searchParams.categoryName存在时，即显示标签

<li class="with-x" v-if="searchParams.categoryName">{{searchParams.categoryName}}<i @click="removeCategoryName">×</i></li>

        2. 点击x后，面包屑标签会消失，即把searchParams.categoryName置为空，但此时要注意需要向服务器重新发送请求，并且将Id置为空。除了面包屑消失外，还要注意地址栏的参数，x会将query参数删除，而保留params参数，这里用路由自己跳自己实现

  1. removeCategoryName(){
  2.       this.searchParams.categoryName = undefined
  3.       this.getData
  4.       this.searchParams.category1Id = undefined
  5.       this.searchParams.category2Id = undefined
  6.       this.searchParams.category3Id = undefined
  7.       //点击x，删除query参数
  8.       if(this.$route.params){
  9.         this.$router.push({name:"search",params:this.$route.params})
  10.       }
  11.     }

此外还需要注意，将值置为 " " 空字符串后，但" "仍会向服务器发送数据，浪费网络资源，我们可以选择将其置为undefined，这样这个字段不会带给服务器。        

        (8) 面包屑处理关键字

        当我们再搜索框输入内容搜索数据时，也会为他动态创建一个面包屑，当然我们点击x同样可以将此标签隐藏起来，同时搜索框的数据也应该被清空，地址栏的params参数也随之消失。

1. 动态创建面包屑，对li标签使用v-if语句来判断

2. 点击x后，我们将v-if()里的值置为空即为flase

3. 搜索框的内容清空，这时我们需要用到兄弟组件间通信，search组件通知header组件，x号被点击了，搜索框内容该被清空了，这里用到了全局事件总线bus

4. 地址栏的参数需要我们使用路由自己跳自己来实现了

  1. <script>
  2. import SearchSelector from "./SearchSelector/SearchSelector";
  3. import { mapGetters } from "vuex";
  4.  
  5. export default {
  6.   name: "MySearch",
  7.   beforeMount() {
  8.     Object.assign(this.searchParams, this.$route.query, this.$route.params);
  9.   },
  10.   mounted() {
  11.     this.getData();
  12.   },
  13.   components: {
  14.     SearchSelector,
  15.   },
  16.   computed: {
  17.     ...mapGetters(["goodsList"]),
  18.   },
  19.   data() {
  20.     return {
  21.       searchParams: {
  22.         category1Id: "",
  23.         category2Id: "",
  24.         category3Id: "",
  25.         categoryName: "",
  26.         keyword: "",
  27.         order: "",
  28.         pageNo: 1,
  29.         pageSize: 10,
  30.         props: [""],
  31.         trademark: "",
  32.       },
  33.     };
  34.   },
  35.   watch: {
  36.     $route() {
  37.       Object.assign(this.searchParams, this.$route.query, this.$route.params);
  38.  
  39.       this.getData();
  40.       this.searchParams.category1Id = undefined
  41.       this.searchParams.category2Id = undefined
  42.       this.searchParams.category3Id = undefined
  43.     },
  44.   },
  45.   methods: {
  46.     getData() {
  47.       this.$store.dispatch("getSearchList", this.searchParams);
  48.     },
  49.     removeCategoryName(){
  50.       this.searchParams.categoryName = undefined
  51.       this.searchParams.category1Id = undefined
  52.       this.searchParams.category2Id = undefined
  53.       this.searchParams.category3Id = undefined
  54.       this.getData()
  55.       if(this.$route.params){
  56.         this.$router.push({name:"MySearch",params:this.$route.params})
  57.  
  58.       }
  59.     },
  60.     removeKeyword(){
  61.       this.searchParams.keyword = undefined
  62.       this.getData()
  63.       this.$emit("clear")
  64.       if(this.$route.query){
  65.         this.$router.push({name:"MySearch",query:this.$route.query})
  66.       }
  67.     },
  68.     trademarkInfo(trademark){
  69.       this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
  70.       this.getData()
  71.     },
  72.     removeTradeMark(){
  73.       this.searchParams.trademark = undefined
  74.       this.getData()
  75.     }
  76.   },
  77. };
  78. </script>

        (9) 面包屑处理品牌信息

        当我们点击品牌信息时要重新获取参数，再次向服务器发送请求获取数据；但是品牌信息在子组件中，而我们更新参数只能在父组件中，所以这时候又需要组件间通信了，自定义事件子组件向父组件传递数据，接收到数据后开始用v-if来创建面包屑，同时还有x号的点击事件

  1. <script>
  2. import SearchSelector from "./SearchSelector/SearchSelector";
  3. import { mapGetters } from "vuex";
  4. export default {
  5.   name: "MySearch",
  6.   beforeMount() {
  7.     Object.assign(this.searchParams, this.$route.query, this.$route.params);
  8.   },
  9.   mounted() {
  10.     this.getData();
  11.   },
  12.  
  13.   components: {
  14.     SearchSelector,
  15.   },
  16.   data() {
  17.     return {
  18.       searchParams: {
  19.         category1Id: "",
  20.         category2Id: "",
  21.         category3Id: "",
  22.         categoryName: "",
  23.         keyword: "",
  24.         order: "",
  25.         pageNo: 1,
  26.         pageSize: 10,
  27.         props: [""],
  28.         trademark: "",
  29.       },
  30.     };
  31.   },
  32.   methods: {
  33.     //根据参数不同获取发请求数据
  34.     getData() {
  35.       this.$store.dispatch("getSelectList", this.searchParams);
  36.     },
  37.     removeCategoryName() {
  38.       this.searchParams.categoryName = undefined;
  39.       this.getData();
  40.       this.searchParams.category1Id = undefined;
  41.       this.searchParams.category2Id = undefined;
  42.       this.searchParams.category3Id = undefined;
  43.       //点击x，删除query参数
  44.       if (this.$route.params) {
  45.         this.$router.push({ name: "search", params: this.$route.params });
  46.       }
  47.     },
  48.     removeKeyword() {
  49.       this.searchParams.keyword = undefined;
  50.       this.getData();
  51.       this.$bus.$emit("clear");
  52.       console.log(this.$route.query);
  53.       if (this.$route.query) {
  54.         this.$router.push({ name: "search", query: this.$route.query });
  55.       }
  56.       this.$router.push({ name: "search" });
  57.     },
  58.     trademark(tm){
  59.       this.searchParams.trademark = `${tm.tmId}:${tm.tmName}`
  60.       this.getData()
  61.     },
  62.     removeTrademark(){
  63.       this.searchParams.trademark = undefined
  64.       this.getData()
  65.  
  66.     },
  67.   },
  68.   computed: {
  69.     ...mapGetters(["goodsList"]),
  70.   },
  71.   watch: {
  72.     $route() {
  73.       Object.assign(this.searchParams, this.$route.query, this.$route.params);
  74.       this.getData();
  75.       this.searchParams.category1Id = undefined;
  76.       this.searchParams.category2Id = undefined;
  77.       this.searchParams.category3Id = undefined;
  78.     },
  79.   },
  80. };
  81. </script>

    (10) 平台售卖属性

        每一个商品都有着自己许多的属性，当我们点击商品属性进行商品筛选，这时会再次向服务器请求数据。但是这时我们注意下，因为商品的属性数据是存储在子组件中，但是参数信息是存储在父组件中，这时我们又需要用到了自定义属性来通信，将子组件的数据传到父组件中，创建好标签，发送请求。同时我们的props参数是一个数据，我们需要将新点击数据获取到并用push方法加入到数组中，但是不能一个数据重复加入，需要用indeOf判断他是不是重复数据，点击x后，根据点击数据的索引值，用splice将数据移出数组，然后再次向服务器发请求

  1. <script>
  2. import SearchSelector from "./SearchSelector/SearchSelector";
  3. import { mapGetters } from "vuex";
  4.  
  5. export default {
  6.   name: "MySearch",
  7.   beforeMount() {
  8.     Object.assign(this.searchParams, this.$route.query, this.$route.params);
  9.   },
  10.   mounted() {
  11.     this.getData();
  12.   },
  13.   components: {
  14.     SearchSelector,
  15.   },
  16.   computed: {
  17.     ...mapGetters(["goodsList"]),
  18.   },
  19.   data() {
  20.     return {
  21.       searchParams: {
  22.         category1Id: "",
  23.         category2Id: "",
  24.         category3Id: "",
  25.         categoryName: "",
  26.         keyword: "",
  27.         order: "",
  28.         pageNo: 1,
  29.         pageSize: 10,
  30.         props: [],
  31.         trademark: "",
  32.       },
  33.     };
  34.   },
  35.   watch: {
  36.     $route() {
  37.       Object.assign(this.searchParams, this.$route.query, this.$route.params);
  38.  
  39.       this.getData();
  40.       this.searchParams.category1Id = undefined;
  41.       this.searchParams.category2Id = undefined;
  42.       this.searchParams.category3Id = undefined;
  43.     },
  44.   },
  45.   methods: {
  46.     getData() {
  47.       this.$store.dispatch("getSearchList", this.searchParams);
  48.     },
  49.     removeCategoryName() {
  50.       this.searchParams.categoryName = undefined;
  51.       this.searchParams.category1Id = undefined;
  52.       this.searchParams.category2Id = undefined;
  53.       this.searchParams.category3Id = undefined;
  54.       this.getData();
  55.       if (this.$route.params) {
  56.         this.$router.push({ name: "MySearch", params: this.$route.params });
  57.       }
  58.     },
  59.     removeKeyword() {
  60.       this.searchParams.keyword = undefined;
  61.       this.getData();
  62.       this.$emit("clear");
  63.       if (this.$route.query) {
  64.         this.$router.push({ name: "MySearch", query: this.$route.query });
  65.       }
  66.     },
  67.     trademarkInfo(trademark) {
  68.       this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;
  69.       this.getData();
  70.     },
  71.     removeTradeMark() {
  72.       this.searchParams.trademark = undefined;
  73.       this.getData();
  74.     },
  75.     attrInfo(attr, attrValue) {
  76.       let props = `${attr.attrId}:${attrValue}:${attr.attrName}`;
  77.       if (this.searchParams.props.indexOf(props) == -1) {
  78.         this.searchParams.props.push(props);
  79.       }
  80.       this.getData();
  81.     },
  82.     removeAttr(index){
  83.       this.searchParams.props.splice(index,1)
  84.       this.getData()
  85.     },
  86.   },
  87. };
  88. </script>

  (10) 商品排序

      商品对应着综合和价格两个排序规则，点击综合、价格会对商品进行升序降序排序的。我们只需要将参数order配置好就行，还有箭头升序降序(阿里巴巴矢量图)，动态地判断当前类名是不是active,动态地为order参数赋值，再重新发请求

  1. changeOrder(flag) {
  2.       let originFlag = this.searchParams.order.split(":")[0]
  3.       let originSort = this.searchParams.order.split(":")[1]
  4.  
  5.       let newOrder = ""
  6.       if(flag == originFlag){
  7.         newOrder = `${originFlag}:${originSort == 'desc'?"asc":"desc"}`
  8.       }else{
  9.         newOrder = `${flag}:${"desc"}`
  10.       }
  11.       this.searchParams.order = newOrder
  12.       this.getData()
  13. },

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号