vue电商项目(二)——完成Home页面
目录
一、项目开发逻辑
二、拆分搭建Home页面组件
1、注册使用三级联动TypeNav组件（全局组件）
（1）注册全局组件
（2）使用全局组件
2、完成Home其余静态组件
（1）静态组件文件夹较少
（2）组件构建和使用
三、请求数据准备工作
1、POSTMAN测试接口是否正常
2、Axios二次封装
3、接口统一管理
4、开发过程中的跨域问题
5、nprogress进度条的使用
四、vuex状态管理库
1、仓库使用初始化
2、vuex模块化开发
五、ypeNav三级联动数据展示与业务逻辑晚膳
1、获取数据
（1）组件挂载完毕通知仓库发送数据
（2）在home仓库通过API发送请求获取数据进行保存
2、展示数据
（1）将仓库中数据引入到组件
（2）将数据动态展示到页面上
3、 给一级目录动态添加背景颜色
（1）通过css实现
（2）通过JS实现
3.JS控制二三级数据显示和隐藏
4.三级联动的防抖和节流
（1）防抖和节流是什么
（2）三级联动导航节流
5、三级联动路由组件的路由跳转与传递参数（目标search组件）
（1）采用router-link进行跳转
（2）编程式导航
6、typeNav组件在search组件中的显示与隐藏
（1）在不同组件的显示与隐藏
（2） 设置离开显示
（3）给菜单显示与隐藏添加过渡动画
7、优化商品分类三级列表
8.合并params与query参数
六、开发home首页当中的ListContainer与Floor组件
1、mock模拟服务器返回数据
2、获取banner数据
(1)准备好api接口
(2)组件获取数据
3、实现banner轮播图
4、获取floor组件
(1)获取数据
(2)父子组件传值
(3)将数据渲染到页面上
(4)封装carousel轮播图共用组件
一、项目开发逻辑
1、完成静态页面
2、拆分静态组件
3、获取服务器的数据进行展示
4、动态业务
经分析，Home首页可以拆分为7个组件，分别是：TypeNav三级联动导航，ListContainer，Recommend，Rank，Like，Floor，Brand
二、拆分搭建Home页面组件
1、注册使用三级联动TypeNav组件（全局组件）
----由于三级联动在Home、search、Derail，都有使用，所以将三级联动注册为全局组件，方便复用
（1）注册全局组件
（2）使用全局组件
在src/pages/Home/index.vue中直接使用即可
<template><!-- 使用全局组件TypeNav --><TypeNav></TypeNav>
</template>
2、完成Home其余静态组件
注意1：拆分静态组件的时候注意应用资源资源地址的变动
注意2：将使用到的静态资源也一并拿过来
（1）静态组件文件夹较少
index.vue放置组件的样式结构，images放置当前组件使用到的图片资源
（2）组件构建和使用
三、请求数据准备工作
1、POSTMAN测试接口是否正常
进入网址：https://www.apifox.cn/?utm_source=baidu&utm_medium=sem&utm_term=zizhanghao&bd_vid=9773636383745084172
使用步骤：点击使用web版——》选择全部分类中的ApiFox——》点击右上角加号——》点击快捷请求即可
然后输入对应的URL和地址即可
2、Axios二次封装
二次封装是为了添加请求拦截器和相应拦截器，从而可以处理一些业务需求。
安装axios:npm instal axios
在src文件夹下创建api/request.js文件，用于对axios的二次封装
//axios二次封装
import axios from "axios";const requests = axios.create({//配置对象//基础路径baseURL:"/api",//配置请求超时时间timeout:5000
});// 配置请求拦截器
requests.interceptors.request.use((config)=>{
// config 配置对象，里面有一个很重要的属性Header请求头
return config;
});//相应拦截器
requests.interceptors.response.use((res)=>{return res.data;
},(err)=>{//相应失败的回调函数//终止Promise链return Promise.reject(new Error('faile'));
})//对外暴露
export default requests;3、接口统一管理
项目很小：完全可以在组件的生命周期函数中发请求
项目大,有很多接口：axios.get(‘xxx’)
//当前这个模块Api接口进行统一管理
import request from './request'//三级联动请求
///api/product/getBaseCategoryList method:"GET" 参数：无
export default reqCategoryList = () => {//AXIOS发送请求 返回的是Promise对象return request({url: '/product/getBaseCategoryList',method: 'GET'});}可以在main.js中进行测试
import {reqCategoryList} from '@/api'
reqCategoryList();4、开发过程中的跨域问题
配置代理服务器即可解决开发过程中的跨域问题，但是在项目上线的时候需要直接解决这种问题，这种仅仅适用于开发中使用，在vue.config做如下配置即可
5、nprogress进度条的使用
安装：npm instal --save nprogress
进度条的结束颜色在node_modules/nprogress/nprogress.css文件下配置background即可
#nprogress .bar {background: rgb(221, 34, 115);position: fixed;z-index: 1031;top: 0;left: 0;width: 100%;height: 2px;
}四、vuex状态管理库
vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件共用的数据。
安装：npm instal vuex@3
1、仓库使用初始化
2、vuex模块化开发
五、ypeNav三级联动数据展示与业务逻辑晚膳
1、获取数据
（1）组件挂载完毕通知仓库发送数据
（2）在home仓库通过API发送请求获取数据进行保存
2、展示数据
（1）将仓库中数据引入到组件
（2）将数据动态展示到页面上
3、 给一级目录动态添加背景颜色
（1）通过css实现
.item:hover{background:skyblue;
}
（2）通过JS实现
给一级分类添加鼠标经过事件和鼠标离开事件，鼠标离开老师搞了个事件委托，我觉得没必要啊，把鼠标离开放到大div上（一级分类的div）就行吧，这样只要鼠标在二级和三级数据上，一级数据就会保持高亮。
1、先设置一个响应式属性，存储用户鼠标移上哪一个一级分类currentIndex = -1 ;代表鼠标谁都没有移上去。
<div class="item bo" v-for="(c1,index) in categoryList" :key="c1.categoryId"@mouseleave="leaveIndex"><h3 @mouseenter="changeIndex(index)" :class="{cur: currentIndex === index}"><a href="">{{c1.categoryName}}</a></h3>......</div>
2、然后鼠标移上去时触发回调，拿到当前index给currentIndex，这样的话添加的:class="{cur: currentIndex === index}就会变成true，从而cur样式生效（css去写个背景色）
data() {return {// 响应式属性，存储用户鼠标移上哪一个一级分类currentIndex: -1, // 代表鼠标谁都没有移上去};},methods: {// 鼠标进入修改响应式数据currentIndex属性changeIndex(index) {// index 鼠标移上某一个一级分类的元素的索引值this.currentIndex = index;},// 一级分类鼠标移出的事件回调leaveIndex(){// 鼠标移出currentIndex=-1this.currentIndex =-1;}},
3、鼠标离开后currentIndex置为-1，就不会触发样式cur了
3.JS控制二三级数据显示和隐藏
先把原来的css删掉（display:none和hover display:block）
然后用原生JS实现可以，用v-show实现也可以
4.三级联动的防抖和节流
正常：事件触发的非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而函数内部有计算，那么很可能出现浏览器卡顿）
（1）防抖和节流是什么
防抖：前面的所有的触发都被取消，最后一次执行在规定的事件之后才会触发，也就是说如果连续的快速触发，只会执行一次 ----------------------当事件被触发后，延迟 n 秒后再执行回调，返回的是一个函数
const result = _.debounce(function(){},1000)
节流：在规定的时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发，返回的是一个函数
const result = _.throttle(function(){},1000)
（2）三级联动导航节流
鼠标来回滑动的时候，把频繁触发变成少量触发，进行节流
// 这种引入的方式，是把lodash全部功能函数引入，使用时_.throttle
import _ from 'lodash';
// 最好的引入方式：按需加载
import throttle from 'lodash/throttle'
...methods:{// 鼠标进入修改响应式数据currentIndex属性//这里不能写简写形式，返回的结果就是一个函数嘛changeIndex:throttle(function(index){// index 鼠标移上某一个一级分类的元素的索引值this.currentIndex = index;},50),}
这里的throttle回调函数别用箭头函数，可能出现上下文this问题
5、三级联动路由组件的路由跳转与传递参数（目标search组件）
用户点击一级二级或者三级目录时home模块跳到search模块，并且会把用户选中的产品（名字和ID），在路由跳转的时候进行传递。
（1）采用router-link进行跳转
<router-link to="/search">{{ c1.categoryName }}</router-link>
使用这种方式进行跳转会出现卡顿现象，原因是router-link是一个组件，当服务器数据返回的时候，会循环出很多的router-link组件，一次性创建很多组件会出现卡顿现象，所以这里我们应该采用编程式导肮。
（2）编程式导航
为了标识点击的是否是a标签，所以给a标签添加自定义属性，data-.....,标识的时候要用驼峰式命名法，但是在通过event.target.dataset获取的时候会变成小写
这里的点击路由跳转用到了事件委派，但是为了区分是几级菜单，我们再次添加一个自定义属性category(1-3)Id。
合并参数与路由跳转
6、typeNav组件在search组件中的显示与隐藏
（1）在不同组件的显示与隐藏
给菜单添加一个v-show="show",在data中设定初始值为true。
在组件挂载完毕以后判断如果不是home组件，那么就改变show的值，从而让组件进行隐藏。
（2） 设置离开显示
依然采用事件委托，当鼠标离开二三级菜单都要隐藏，整体菜单如果是home组件则不隐藏，如果是其他组件则要隐藏
对应方法
（3）给菜单显示与隐藏添加过渡动画
过度动画前提：组件|元素有v-if|v-show指令
给需要添加动画的元素用transition包裹，并赋予名字
在css中定义动画
7、优化商品分类三级列表
原来是在typeNav中发送请求，所以当由home切换到search组件的时候还要再发送一次请求获取数据，所以我们将请求放在App根组件中。
所以当typeNav获取数据之前数据已经请求完成放在仓库中了，
【注意】请求不能放在main.js中，因为组件还没有挂载，this上面没有$route,此时的main.js中的thi是undefined
8.合并params与query参数
我们往Search组件跳转有两种方式，一种是通过搜索关键字跳转，另一种是点击三级导航的链接跳转，三级导航传的是query参数，搜索传的是params参数
但是这两种方式只能传一个地方的组件，如果先三级导航跳转再搜索的话，搜索传的params参数和空query参数会覆盖三级导航传的query参数和空params参数
所以我们可以两边都通过一个判断来实现参数的合并，就是params和query参数同时到url中。
六、开发home首页当中的ListContainer与Floor组件
服务器没有返回这两个组件的数据
1、mock模拟服务器返回数据
生成随机数据，拦截Ajax请求
安装指令npm install mockjs
（1）使用步骤：
1、在src下创建一个mock文件夹
2、准备JSON数据（要将所有空格删除干净）
3、将mock需要的图片资源放到puhlic文件夹下（public文件夹在打包的时候会将相应的数据原封不动地打包到dist文件夹当中）
4、创建mockServer.js通过mock.js插件实现模拟数据
webpack默认暴露的资源有图片、JSON格式数据
5、在main.js引入mockServer.js执行一次
2、获取banner数据
(1)准备好api接口
由于这一次开始地址变成了mock，所以得重新配置一个api
(2)组件获取数据
3、实现banner轮播图
在new Swiper之前，必须得有相应的页面结构
1引包、2页面结构必须有、3new Swiper实例
安装npm i swiper@5
因为下面的结构也需要用到Swiper样式，所以我们在入口文件引入样式
但是此时的js放在mountend中是不行的，因为v-for遍历的数据是异步操作，而mountend中的内容就已经开始执行了
完美解决方案：数据监视和$nextTick(会在结构渲染完毕以后才会执行回调函数)
4、获取floor组件
(1)获取数据
1、准备好api
2、仓库三连环
3、获取数据到组件遍历组件
因为需要根据返回的数据遍历floor组件，所以需要在home组件中派发请求。
(2)父子组件传值
这里用到的是props方法
(3)将数据渲染到页面上
根据数据通过v-for将数据渲染到页面上即可，需要注意的的是轮播图，
使用步骤：引入css、引入Swiper、有样式结构、new Swiper
我们在这里可以直接将new Swiper放在moutend执行，是因为数据是从父组件哪里拿来的，所以在该组件中就不存在异步操作，所以可以直接new Swiper的时候页面结构已经渲染完毕了
(4)封装carousel轮播图共用组件
为了让样式结构相同，所以我们改装一下Floor中的js样式和listContainer一样都是用数据监视和$nextTick
1、拆分样式、结构、js
在components下创建一个Carousel组件，
<template><div class="swiper-container" id="floor2Swiper"><div class="swiper-wrapper"><divclass="swiper-slide"v-for="(carousel, index) in list":key="index"><img :src="carousel.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>
</template><script>
import Swiper from "swiper";
export default {name: "Carousel",props:['list'],watch: {list: {// 无论数据是否发生变化，上来就先监听一次immediate: true,handler() {var mySwiper = new Swiper(".swiper-container", {loop: false, // 循环模式选项autoplay: true,// 如果需要分页器pagination: {el: ".swiper-pagination",},// 如果需要前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},// 如果需要滚动条scrollbar: {el: ".swiper-scrollbar",},});},},},
};
</script><style>
</style>2、在全局入口文件下进行注册
3、在组件中进行使用，通过props传入需要的值
vue电商项目(二)——完成Home页面相关推荐
- Vue电商项目—数据统计—数据报表模块-11
Vue电商项目-数据统计-数据报表模块-11 1.1 数据统计概述 数据统计模块主要用于统计电商平台运营过程的中的各种统计数据, 并通过直观的可视化方式展示出来, 方便相关运营和管理人员查看. 1.2 ...
- Vue 电商项目学习
Vue 电商项目学习 vue_cli脚手架[^1]初始化项目 项目文件夹 项目的其他配置 项目路由的分析 路由组件 非路由组件 使用组件的步骤(非路由组件) 路由组件的搭建 路由的跳转 组件显示与隐藏 ...
- 手把手教你SSM搭建Easymall电商项目 (二)
SSM搭建Easymall电商项目 (二) 目录 SSM搭建Easymall电商项目 (二) 一.Easymall需求代码实现 1.测试类测试请求地址路径IndexController.java ...
- Vue电商项目—订单管理—订单列表模块-10
Vue电商项目-订单管理-订单列表模块-10 1.1 订单管理概述 订单管理模块用于维护商品的订单信息, 可以查看订单的商品信息.物流信息, 并且可以根据实际的运营情况对订单做适当的调整. 1.2 订 ...
- SpringBoot+SpringCloud+Mybatis+Vue 电商项目实战，附视频+源码+文档，包含所有主流技术栈。...
大家好,我是树哥. 今天给大家分享一个电商项目--- 畅购商城.项目采用前后端分离的技术架构. 采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈,包括了大型商城的主 ...
- SpringBoot+SpringCloud+Mybatis+Vue电商项目实战，附视频+源码+文档，包含所有主流技术栈...
今天给大家分享一个电商项目--- 畅购商城.项目采用前后端分离的技术架构. 采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈,包括了大型商城的主要功能.难点功能以及 ...
- [Vue.js]实战 -- 电商项目(二)
主页布局 整体布局 主页布局开始 引入官网的框架时,首先要在element.js中添加 import { Container,Header,Aside,Main } from 'element-ui' ...
- 《菜狗商城》Springboot+Vue电商项目
菜狗商城 一 介绍 菜狗商城 一款Springboot+Vue前后端分离架构的网络电商平台购物系统,包括用户登录,商品推荐,商品搜索,用户评价,购物车,添加订单,收货地址及微信支付等功能. 涉及技术: ...
- vue电商项目(一)——项目搭建
目录 一.项目初始化 1.脚手架目录介绍 2.项目的其他配置 (1)项目运行的时候,让浏览器自动打开 (2)关闭语法检查工具 (3)src文件夹的简写形式,配置别名,方便以后访问. 二.项目路由搭建 ...
最新文章
- 会python可以从事什么工作-Python入门后，想要从事自由职业可以做哪方面工作？...
- java中的强制类型转换：int和byte
- VS2022 C28251 WinMain批注不一致的解决方法
- matlab怎么实现循环,matlab怎么实现直到型循环
- ios保存gif到相册_iOS相册中的GIF图片的读取与保存
- [LeetCode] Remove Duplicates from Sorted List - 链表问题
- SCM-SVN集成服务器
- ajax请求php返回的数据是整个页面的html,Ajax出错并返回整个页面html的问题
- php临时目录没有文件夹里,PHP上传 找不到临时文件夹的解决方法
- poj1789 Truck History（最小生成树）
- css3和jQuery实现一个简单的标签页效果
- 历史首次！中国联通、中国电信组队了，只为达成这个目的
- 在.Net中json应用测试整理
- puppet中anchor的作用
- $《第一行代码：Android》读书笔记——第5章 Broadcast
- 使用Movavi Photo Editor如何向视频中添加转场
- Rootkit之ntrootkit的配置使用
- 思科模拟器路由器常见问题及操作记录
- oracle px execute reply,（转）PX Deq: Execute Reply 案例说明
- CUDA学习：Windows下的CUDA环境配置