Vue —— mockjs 模拟数据、轮播图插件 Swiper

mockjs 的使用

项目安装 mockjs ： cnpm install mockjs
使用步骤

(1)在项目 src 下创建 mock 文件夹。
(2)mock 文件夹准备相应的 JSON 数据文件(一定要格式化，别留有空格，不然跑不起来)
(3)把 mock 数据所需要的图片放在 public 文件夹中【 public 文件夹在打包时，会把相应资源打包到 dist 文件夹中】

向服务器发请求的全过程

1、编写 mockAjax.js

//对 axios 进行二次封装
import axios from "axios";//引入进度条 nprogress 以及样式(可修改) 并在请求和响应拦截器中 调用 star 和 done 方法
import nprogress from 'nprogress';
import "nprogress/nprogress.css"//1.利用axios对象的create,去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests = axios.create({//配置对象//基础路径，发请求的时候，路径当中会出现apibaseURL:"/mock", ===> 前置路径这里一定要改，根据实际请求路径来改timeout:5000,
});//请求拦截器
requests.interceptors.request.use((config)=>{//config：配置对象，对象里面有一个属性很重要，headers请求头//进度条开始nprogress.start();return config;
});//响应拦截器
requests.interceptors.response.use((res)=>{//响应成功的回调函数//进度条结束nprogress.done();return res.data;},(error)=>{//响应失败的回调函数return Promise.reject(new Error('faile'));})//暴露export default requests;

2、在 api/index.js 中获取虚拟 mock 后端请求

......
import mockRequests from "./mockAjax";
......export const reqGetBannerList = () =>{//发请求：axios发请求返回结果 Promise 对象// 因为 api/request.js 中配置了 baseURL:"/api",所以下面不需要加 /apireturn mockRequests({url:'/banner',method:'get'});
}

3、在相应组件 mounted 中发起请求，获取数据

<script>
import {mapState} from 'vuex';
export default {name: "List",mounted(){//派发 action；通过 Vuex 发起 ajax 请求，将数据 存储 在 仓库中this.$store.dispatch('getBannerList'); },computed:{//获取请求得到的数据...mapState({bannerList:state=>state.home.bannerList})}
};
</script>

4、请求过程

//home 模块的小仓库//把封装的 api 引入进来
import {...,reqGetBannerList} from '@/api';const state = {//这里不能瞎几把写，要根据请求返回的数据格式（此请求返回数组）...bannerList:[]
}
const mutations = {......GETBANNERLIST(state,data){state.bannerList = data;//拿到数据，去对应的组件展示数据}
}
const actions = {//通过 API 里面的接口函数调用，向服务器发请求，获取服务器的数据......//获取首页轮播图的数据async getBannerList({commit}){let result = await reqGetBannerList();//如果请求成功，返回数据if(result.code == 200 ){commit('GETBANNERLIST',result.data)}}
}
......

5、展示数据

Swiper 轮播图插件

下载 swiper
使用方法【需要将 css、js 两个包放进项目中】：https://swiper.com.cn/usage/index.html

List 组件开发步骤

（0）项目安装 Swiper 插件 cnpm install --save swiper@5
（1）展示轮播图的组件中：引包（相应 JS | CSS）
- 在展示轮播图组件中引 JS
```
   <script>//引入轮播图插件包 swiperimport Swiper from 'swiper';</script>
```
- 在 main.js 引入CSS样式，因为轮播图要用到的样式都一样
```
  ......//引入swiper样式import 'swiper/css/swiper.css';new Vue({......})
```

（2）展示轮播图的组件中：页面中结构务必要有

  ......<!--banner轮播--><div class="swiper-container" id="mySwiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(carousel,index) in bannerList" :key="carousel.id"><img :src="carousel.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>......

（3）展示轮播图的组件中：在有页面中结构的前提下，在mounted中new Swiper实例【轮播图添加动态效果】

为什么 swiper实例在 mounted 直接写不可以，
因为结构还没完整，存在异步 和 ajax 发请求找数据，再放入 store 所导致结构不完整。

解决方式1：mounted 中延迟器

  mounted(){setTimeout(() => {var mySwiper = new Swiper ('.swiper-container', {loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',//点击小球也切换图片clickable: true},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},}) },2000)},......
}

完美解决方式 watch + nextTick

什么是 nextTick

Vue官方文档：https://cn.vuejs.org/v2/api/#vm-nextTick

用法：在下次 DOM 更新 v-for 循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

export default {name: "List",......watch: {//监听 bannerList 数据的变化：由空数组 ==> 四个元素的数组bannerList: {handler(newValue, oldValue) {//v-for 执行完毕，才有完整的结构//当前这个函数执行，只能保证 bannerList 数据已经有了，但是没办法保证 v-for 已经执行结束//当你执行这个回调的时候：保证服务器数据回来了， v-for 执行完毕了【轮播图结构一定有了】this.$nextTick(() => {var mySwiper = new Swiper(".swiper-container", {loop: true, // 循环模式选项// 如果需要分页器pagination: {el: ".swiper-pagination",//点击小球也切换图片clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});});},},},}

开发 Floor 组件（略）

提取全局公共组件 Carsousel 轮播图组件

components/Carsousel /index.vue

<template><div class="floorBanner"><div class="swiper-container" id="floor2Swiper"><div class="swiper-wrapper"><!-- 轮播图 --><divclass="swiper-slide"v-for="(carousel, index) in list":key="carousel.id"><img :src="carousel.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>
</template><script>
//引入轮播图插件包 swiper
import Swiper from "swiper";
export default {name: "Carsousel", //结束 List组件 和 Floor组件 传递过来的数据props: ['list'],watch: {//监听 bannerList 数据的变化：由空数组 ==> 四个元素的数组list: {//因为list是父组件给的，并不会出现数据变化现象，所以需要立即监听immediate: true,handler(newValue, oldValue) {//v-for 执行完毕，才有完整的结构//当前这个函数执行，只能保证 bannerList 数据已经有了，但是没办法保证 v-for 已经执行结束//当你执行这个回调的时候：保证服务器数据回来了， v-for 执行完毕了【轮播图结构一定有了】this.$nextTick(() => {var mySwiper = new Swiper(".swiper-container", {loop: true, // 循环模式选项// 如果需要分页器pagination: {el: ".swiper-pagination",//点击小球也切换图片clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});});},},},
};
</script><style>
</style>

main.js 入口文件中引入并注册全局组件Carsousel

//引入全局三级联动
import Carsousel from '@/components/Carsousel'
//注册全局组件 轮播图组件
Vue.component(Carsousel.name,Carsousel)

分别在 List 组件和 Floor 组件中使用 Carsousel 轮播图组件

<!--banner轮播-->
<Carsousel :list="bannerList"/>

<!-- Floor的轮播图 -->
<Carsousel :list="list.carouselList" />

Vue —— mockjs 模拟数据、轮播图插件 Swiper相关推荐

vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...
轮播图插件--swiper
轮播图插件swiper下载方式输入网址:https://www.swiper.com.cn/ 进入官网,点击 "获取Swiper" >点击 "下载Swiper&q ...
vue2使用轮播图插件swiper，vue-awesome-swiper
欢迎使用插件:swiper,vue-awesome-swiper 注释vue2使用方式: 1: npm install swiper vue-awesome-swiper -–save 2: npm ...
轮播图插件Swiper的使用（懒加载+异步加载数据）
效果 HTML 引入swiper-bundle.css.swiper-bundle.js <head><link rel="stylesheet" href=&q ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
轮播图插件（swiper）
今天给新手介绍一个轮播图插件--swiper 首先要引用swiper.min.css和swiper.min.js. 页面代码 <div class="swiper-container& ...
Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

Vue —— mockjs 模拟数据、轮播图插件 Swiper

mockjs 的使用

向服务器发请求的全过程

Swiper 轮播图插件

List 组件开发步骤

开发 Floor 组件（略）

提取全局公共组件 Carsousel 轮播图组件

Vue —— mockjs 模拟数据、轮播图插件 Swiper相关推荐

最新文章

热门文章

Vue —— mockjs 模拟数据、轮播图插件 Swiper

mockjs 的使用

向服务器发请求的全过程

Swiper 轮播图插件

List 组件 开发步骤

开发 Floor 组件（略）

提取全局公共组件 Carsousel 轮播图组件

Vue —— mockjs 模拟数据、轮播图插件 Swiper相关推荐

最新文章

热门文章

List 组件开发步骤