element-ui/pages分页/vue-swiper/axios请求头设置/nodejs/mockjs_element-ui中swiper左右滑动分页-优快云博客

本文链接：https://blog.youkuaiyun.com/Isabeldeng/article/details/109865377

本文介绍了如何在Vue项目中结合Element UI实现分页功能，利用Swiper创建轮播效果，并详细讲解了如何设置Axios的请求头。同时，还探讨了在Node.js环境中使用Mockjs进行模拟数据的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

App.vue

<template>
  <div id="app">
    <el-container>
      <div style="margin:20px 0">
        <swiper ref="mySwiper" :options="swiperOptions" style="height:100px;overflow: hidden;">
          <swiper-slide v-for="item in banner" :key="item.id">
            <img :src="item.src" width="100%" height="100%" />
          </swiper-slide>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev" slot="button-prev" @click="goprev"></div>
          <div class="swiper-button-next" slot="button-next" @click="gonext"></div>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <el-carousel height="250px"   trigger="click" indicator-position="outside" arrow="always" :autoplay="true">
        <el-carousel-item v-for="item in banner" :key="item.id">
          <img :src="item.src" height="100%" width="100%" />
        </el-carousel-item>
      </el-carousel>
      <el-header>
        <el-menu mode="horizontal" :default-active="$route.path" class="el-menu-demo">
          <el-menu-item index="/home">  
            <router-link to="/home">首页</router-link>
          </el-menu-item>
          <el-menu-item index="/login">
            <router-link to="/login">登录</router-link>
          </el-menu-item>
          <el-menu-item index="/reg">
            <router-link to="/reg">注册</router-link>
          </el-menu-item>
          <el-menu-item index="/brand">
            <router-link to="/brand">品牌</router-link>
          </el-menu-item>
          <el-menu-item index="/stu">
            <router-link to="/stu">学生信息</router-link>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>   
 //1)下载npm install swiper vue-awesome-swiper --save
import {
   
    Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";              //2)引入swiper和css插件
export default {
   
   
  components: {
   
                        //3)插入组件
    Swiper,
    SwiperSlide,
  },
  computed: {
   
      
  
           //4)swiper=>计算属性,之后可用slidePrev()..
    swiper() {
   
   
      return this.$refs.mySwiper.$swiper;  }, },
  methods: {
   
   //Swiper{}实例,之后下面的方法才可使用
    goprev() {
   
   
      this.swiper.slidePrev();}, 
    gonext() {
   
   
      this.swiper.slideNext();  },},
  data() {
   
   
    return {
   
   
      // activeIndex: "1",
      banner: [
        {
   
    id: 0, src: "https://source.unsplash.com/user/erondu/1600x900" },
        {
   
    id: 1, src: "https://source.unsplash.com/user/erondu/1600x900" },
        {
   
    id: 2, src: "https://source.unsplash.com/user/erondu/1600x900" },
        {
   
    id: 3, src: "https://source.unsplash.com/user/erondu/1600x900" },
      ]<