视频弹幕设计网站06--------home样式_1，WebConfig配置，如何获取路径前部分的内容

<template>
  <div>
    <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in videoList" :key="item.id">
      <img :src=getImgURL(item.id) style="width: 100%;height: 100%">
    </el-carousel-item>
  </el-carousel>
  </div>
</template>
 
<script>
import axios from "axios";
export default {
  data(){
    return {
      videoList:[]
    }
  },
  methods:{
    getVideoList(){
      axios.get("/videolist").then((res)=>{
        this.videoList = res.data
        console.log(this.videoList)
      })
    },
    // getImgURL(imgId){
    //   return "http://localhost:"
    // }
    getImgURL(imgId){
    return "http://localhost:9090/static/img/"+ imgId + ".jpg"
  }
  },
  created(){
    this.getVideoList();
  }
}
</script>
<style scoped lang="less">
// 走马灯样式  指示器按钮
/deep/ .el-carousel__button {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}
// 指示器激活按钮
/deep/ .is-active .el-carousel__button {
  background: #3f8ec8;
}
</style>

<template>
  <div>
    <el-carousel :interval="4000" type="card" height="400px" style="margin-bottom: 15px;">
    <el-carousel-item v-for="item in videoList" :key="item.id">
      <img :src=getImgURL(item.id) style="width: 100%;height: 100%">
    </el-carousel-item>
  </el-carousel>
  <div style="margin-right: 4%;display: flex;flex-wrap:wrap;align-content:space-between;">
      <el-col :span="5" v-for="item in videoList" :key="item.id" :offset="1" style="margin-bottom: 25px;">
        <el-card :body-style="{ padding: '0px' }" style="padding-bottom: 17px">
          <router-link :to="'/video?video=' + item.id" style="line-height: 0;color: black;text-decoration:none;">
          <img :src="getImgURL(item.id)" style="margin-bottom: 7px;">
          <!-- <template #footer>{{ item.name }}</template> -->
          <!-- <p>{{ item.name }}</p> -->
          <!-- <template #footer>Footer content</template> -->
          <span style="line-height: 17px;">{{item.name}}</span>
          </router-link>
        </el-card>
      </el-col> 
    </div>
    <!-- <el-card style="max-width: 480px;max-height: 120px">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
      </div>
    </template>
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
    <template #footer>Footer content</template>
  </el-card> -->
 
  </div>
</template>
 
<script>
import axios from "axios";
export default {
  data(){
    return {
      videoList:[]
    }
  },
  methods:{
    getVideoList(){
      axios.get("/videolist").then((res)=>{
        this.videoList = res.data
        console.log(this.videoList)
      })
    },
    // getImgURL(imgId){
    //   return "http://localhost:"
    // }
    getImgURL(imgId){
    return "http://localhost:9090/static/img/"+ imgId + ".jpg"
  }
  },
  created(){
    this.getVideoList();
  }
}
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
// 走马灯样式  指示器按钮
/deep/ .el-carousel__button {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}
// 指示器激活按钮
/deep/ .is-active .el-carousel__button {
  background: #3f8ec8;
}
.el-main{
  line-height: 0px !important;
}
</style>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width: 100%;padding-left: 40px;"
    :router="true"
    >
    <el-menu-item index="/home">首页</el-menu-item>
    <el-sub-menu index="2">
      <template #title>分类</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>选项4</template>
        <el-menu-item index="2-4-1">选项1</el-menu-item>
        <el-menu-item index="2-4-2">选项2</el-menu-item>
        <el-menu-item index="2-4-3">选项3</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="" style="width: 36%">
            <el-input @keydown.enter="mySearch()" placeholder="请输入您想看的视频">
            <template #append>  
                <el-button @click="mySearch()">搜索</el-button>
            </template>
        </el-input>
        
    </el-menu-item>
  </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
    data(){
        return{
            activeIndex: '/home'
        }
    },
    methods: {
        mySearch(){
            console.log("您已经点击了")
        }
    }
};
</script>
 
<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
</style>