VUE 笔记 ilovecoding 155、156 首页开发-请求首页的多个数据、轮播图的展示
内容来自 B站 ilovecoding 《最全最新Vue、Vuejs教程，从入门到精通》
1. 安装axios
npm install axios
2. network 目录下增加 request.js
import axios from 'axios'
export const request = config => {
const instance = axios.create({
baseURL: 'http://localhost',
timeout: 5000
})
instance.interceptors.request.use(config => {
console.log("请求成功进行拦截", config);
return config
}, err => {
console.log("请求失败进行拦截", err)
})
instance.interceptors.response.use(res => {
console.log("响应成功进行拦截", res);
return res.data
}, err => {
console.log("响应失败进行拦截", err);
})
return instance(config)
}
3. network 目录下增加 home.js
import {request} from './request'
export function getHomeMultiData() {
return request({
url: '/home/multidata'
})
}
4. 在 Home.vue 中导入 home.js
import {getHomeMultiData} from 'network/home'
5. 在 Home.vue 中增加 data()
data() {
return {
banners: [],
recommends: []
}
},
6. Home.vue 中增加 created()
created() {
// 1. 请求多个数据
getHomeMultiData().then(res => {
this.banners = res.data.banner.list
// this.recommends = res.data.recommend.list
})
}
7. 在 components/common 下增加目录 swiper 实现轮播图
7.1 Swiper.vue
<template>
<div id="hy-swiper">
<div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
<slot></slot>
</div>
<slot name="indicator"></slot>
<div class="indicator">
<slot name="indicator" v-if="showIndicator && slideCount > 1">
<div v-for="(item, index) in slideCount" :key="index" class="indi-item" :class="{active: index === currentIndex - 1}"></div>
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'Swiper',
props: {
interval: {
type: Number,
default: 3000
},
animDuration: {
type: Number,
default: 300
},
moveRatio: {
type: Number,
default: 0.25
},
showIndicator: {
type: Boolean,
default: true
}
},
data() {
return {
slideCount: 0, // 元素个数
totalWidth: 0, // swiper的宽度
swiperStyle: {}, // swiper的样式
currentIndex: 1, // 当前的index
scrolling: false // 是否正在滚动
}
},
methods: {
/**
* 设置滚动的位置
*/
setTransform(position) {
this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`
this.swiperStyle['-webkit-transform'] = `translate3d(${position}px, 0, 0)`
this.swiperStyle['-ms-transform'] = `translate3d(${position}px, 0, 0)`
},
/**
* 校验正确的位置
*/
checkPosition() {
window.setTimeout(() => {
// 1.校验正确的位置
this.swiperStyle.transition = '0ms'
if (this.currentIndex >= this.slideCount + 1) {
this.currentIndex = 1
this.setTransform(-this.currentIndex * this.totalWidth)
} else if (this.currentIndex <= 0) {
this.currentIndex = this.slideCount
this.setTransform(-this.currentIndex * this.totalWidth)
}
// 2.结束移动后的回调
this.$emit('transitionEnd', this.currentIndex - 1)
}, this.animDuration)
},
/**
* 滚动到正确的位置
*/
scrollContent(currentPosition) {
// 1.设置正在滚动
this.scrolling = true
// 2.开始滚动动画
this.swiperStyle.transition = 'transform ' + this.animDuration + 'ms'
this.setTransform(currentPosition)
// 3.判断滚动到的位置
this.checkPosition()
// 4.滚动完成
this.scrolling = false
},
/**
* 定时器操作
*/
startTimer() {
this.playTimer = window.setInterval(() => {
this.currentIndex++
this.scrollContent(-this.currentIndex * this.totalWidth)
}, this.interval)
},
stopTimer() {
window.clearInterval(this.playTimer)
},
/**
* 操作DOM, 在DOM前后添加Slide
*/
handleDom() {
// 1.获取要操作的元素
let swiperEl = document.querySelector('.swiper')
let slidesEls = swiperEl.getElementsByClassName('slide')
// 2.保存个数
this.slideCount = slidesEls.length
// 3.如果大于1个, 那么在前后分别添加一个slide
if (this.slideCount > 1) {
let cloneFirst = slidesEls[0].cloneNode(true)
let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true)
swiperEl.insertBefore(cloneLast, slidesEls[0])
swiperEl.appendChild(cloneFirst)
this.totalWidth = swiperEl.offsetWidth
this.swiperStyle = swiperEl.style
}
// 4.让swiper元素, 显示第一个(目前是显示前面添加的最后一个元素)
this.setTransform(-this.totalWidth)
},
/**
* 拖动事件的处理
*/
touchStart(e) {
// 1.如果正在滚动, 不可以拖动
if (this.scrolling) {
return
}
// 2.停止定时器
this.stopTimer()
// 3.保存开始滚动的位置
this.startX = e.touches[0].pageX
},
touchMove(e) {
// 1.计算出用户拖动的距离
this.currentX = e.touches[0].pageX
this.distance = this.currentX - this.startX
let currentPosition = -this.currentIndex * this.totalWidth
let moveDistance = this.distance + currentPosition
// 2.设置当前的位置
this.setTransform(moveDistance)
},
touchEnd(e) {
// 1.获取移动的距离
let currentMove = Math.abs(this.distance)
// 2.判断最终的距离
if (this.distance === 0) {
return
} else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) {// 右边移动超过0.25
this.currentIndex--
} else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) {// 向左移动超过0.25
this.currentIndex++
}
// 3.移动到正确的位置
this.setTransform(-this.currentIndex * this.totalWidth)
// 4.移动完成后重新开启定时器
this.startTimer()
},
changeItem(num) {
// 1.移除定时器
this.stopTimer()
// 2.修改index和位置
this.currentIndex += num
this.scrollContent(-this.currentIndex * this.totalWidth)
// 3.添加定时器
this.startTimer()
},
/**
* 控制上一个, 下一个
*/
previous() {
this.changeItem(-1)
},
next() {
this.changeItem(1)
}
},
mounted() {
// 1.操作DOM, 在前后添加Slide
setTimeout(() => {
this.handleDom()
// 2.开启定时器
this.startTimer()
}, 3000)
}
}
</script>
<style>
#hy-swiper {
overflow: hidden;
position: relative
}
.swiper {
display: flex
}
.indicator {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
bottom: 8px
}
.indi-item {
box-sizing: border-box;
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #fff;
line-height: 8px;
text-align: center;
font-size: 12px;
margin: 0 5px
}
.indi-item.active {
background-color: rgba(212, 62, 46, 1.0)
}
</style>
7.2 SwiperItem.vue
<template>
<div class="slide">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Slide'
}
</script>
<style>
.slide {
width: 100%;
flex-shrink: 0;
}
.slide img {
width: 100%;
}
</style>
7.3 index.js
import Swiper from './Swiper'
import SwiperItem from './SwiperItem'
export {
Swiper, SwiperItem
}
8. 在 view/home 下新建目录 childComps，创建组件 HomeSwiper.vue
<template>
<swiper>
<swiper-item v-for="(item, index) in banners" :key="index">
<a :href="item.link">
<img :src="item.image" alt=""/>
</a>
</swiper-item>
</swiper>
</template>
<script>
import {Swiper, SwiperItem} from 'components/common/swiper'
export default {
name: 'HomeSwiper',
props: {
banners: {
type: Array,
default() {
return []
}
}
},
components: {
Swiper,
SwiperItem
}
}
</script>
9. Home.vue 中引用 HomeSwiper 组件
<template>
<div id="home">
<nav-bar class="home-nav">
<template v-slot:center>
<div>购物街</div>
</template>
</nav-bar>
<home-swiper :banners="banners"/>
</div>
</template>
<script>
import HomeSwiper from './childComps/HomeSwiper'
</script>
10. 后端
package net.biancheng.www.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@CrossOrigin
@RestController
public class HomeController {
@GetMapping("/home/multidata")
public Map<String, Object> multidata() {
Map<String, Object> res = new HashMap<>();
Map<String, Object> data = new HashMap<>();
Map<String, Object> banner = new HashMap<>();
List<Map<String, Object>> list = new ArrayList<>();
Map<String, Object> listItem1 = new HashMap<>();
listItem1.put("link", "");
listItem1.put("image", "http://localhost:8080/img/home/swiper/1.jpg");
list.add(listItem1);
Map<String, Object> listItem2 = new HashMap<>();
listItem2.put("link", "");
listItem2.put("image", "http://localhost:8080/img/home/swiper/2.jpg");
list.add(listItem2);
Map<String, Object> listItem3 = new HashMap<>();
listItem3.put("link", "");
listItem3.put("image", "http://localhost:8080/img/home/swiper/3.jpg");
list.add(listItem3);
Map<String, Object> listItem4 = new HashMap<>();
listItem4.put("link", "");
listItem4.put("image", "http://localhost:8080/img/home/swiper/4.jpg");
list.add(listItem4);
res.put("data", data);
data.put("banner", banner);
banner.put("list", list);
return res;
}
}
浙公网安备 33010602011771号