user首页的实现(welcome)vue_vue 好看的欢迎页源码-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61504367/article/details/125104716

本文介绍了如何使用 Vue Router 实现网站的路径导航，包括首页、电影模块（热映、即将上映、经典）、用户菜单、搜索功能、排行榜和关于页面的详细配置。还展示了如何通过组件和路由视图实现页面跳转和局部刷新。

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

展示

在这里插入图片描述

路由

 {
    path: '/welcome',
    component: Welcome,
    redirect: { name: 'home'},
    children: [
      { path: '/home/', name: 'home', component: Home },
      {
        path: '/userMenu',
        name: 'userMenu',
        component: UserMenu,
        redirect: {name: 'userInfo'},
        children:[
          {path: '/user', component: UserInfo,name:'userInfo'}
        ]
      },
      {
        path: '/movie/',
        component: Movie,
        name: 'movie',
        redirect: {name: '正在热映'},
        children: [
          { path: 'movieOngoing', name:'正在热映', component: MovieOngoing },
          { path: 'movieUpcoming', name: '即将上映', component: MovieUpcoming },
          { path: 'movieClassics', name: '经典影片', component: MovieClassics }
          ]
      },
      {
        path: '/movieInfo/:movieId',
        name: '电影详细信息',
        component: MovieInfo
      },

      {
        path: '/test',
        name: '电影ces',
        component: Test
      },
      {
        path: '/watchMovie/:movieId',
        name: '影院详细信息',
        component: WatchMovie
      },



      {
        path: '/aboutUs/',
        name: '关于我们',
        component: AboutUs
      },
      //  排名
      {
        path: '/rankingList/',
        component: RankingList,
        name: 'rankingList',
        redirect: '/rankingList/totalBoxOfficeList',
        children: [
          { path: 'totalBoxOfficeList', name: '总票房榜', component: TotalBoxOfficeList},
          { path: 'domesticBoxOfficeList', name: '国内票房榜', component: DomesticBoxOfficeList},
          { path: 'foreignBoxOfficeList', name: '国外票房榜', component: ForeignBoxOfficeList}
        ]
      },
      //  搜索
      {
        path: '/search/',
        component: Search,
        name: 'search',
        redirect: { name:'searchMovie' },
        children: [
          {
            path:'searchMovie',
            component: SearchMovie,
            name: 'searchMovie'
          }
        ]
      }
    ]
  }

代码

这是基本的三个结构

    <el-header>

    <el-main>
<!--      路由视图，对于页面局部刷新的场景-->
      <router-view></router-view>
    </el-main>

    <el-footer>

  $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
   $route为当前router跳转对象里面可以获取name、path、query、params等

<template>
  <el-container>
    <el-header>
      <div class="header-inner">
        <a href="/welcome" class="logo">
<!--        <a @click="toWelcome" class="logo">-->
          <img style="width: 100px; height:80px;" src="../assets/pandaHomeLogo.gif">
<!--          <p style="width: 270px; height: 68px; margin-top: 10px; font-size: 40px; background-color: #2d98f3" >{{this.cinemaInfo.cinemaName.substring(0, this.cinemaInfo.cinemaName.indexOf('（'))}}</p>-->
        </a>
<!--        default-active需要传进去的值就是子导航的index值（也就是其路由值），达到点击路由就可以引起高亮。-->
        <el-menu
            :default-active="activeUrl"
            class="nav-menu"
            mode="horizontal"
            :router="true"
            active-text-color="#409EFF"
            text-color="#000000">
          <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id">{{item.name}}</el-menu-item>
        </el-menu>

<!--        搜索-->
        <div class="searchContainer">
<!--          这里绑定kw(搜索电影名称的关键字)-->
          <el-input v-model="kw" class="searchBar" placeholder="搜索电影"></el-input>
          <el-button id="searchBtn" icon="el-icon-search" type="primary" circle @click="search"></el-button>
        </div>

        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
<!--            avatar头像-->
<!--            这里如果没有登录，显示user-->
            <el-avatar :src="url" :size="50">{{url === '' || url === null ? 'user': ''}}</el-avatar>
<!--            实现图片转动的效果-->
            <i class="el-icon-arrow-down el-icon--right icon-arrow"></i>
<!--            <i class="el-icon-arrow-down"></i>-->
          </span>
          <el-dropdown-menu slot="dropdown">
<!--            判断是否已经登录根据isToken-->
<!--            如果已经登录,显示-->
            <el-dropdown-item command="userMenu" v-if="isToken">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout" v-if="isToken">退出</el-dropdown-item>
<!--            如果未登录,显示-->
            <el-dropdown-item command="login" v-if="!isToken">登录</el-dropdown-item>
            <el-dropdown-item command="register" v-if="!isToken">注册账号</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-main>
<!--      路由视图，对于页面局部刷新的场景-->
      <router-view></router-view>
    </el-main>

    <el-footer>
      <div class="footer-mini"></div>
      <div class="footer">
        <img style="width: 512px; height: 70px" src="../assets/register-footer.jpg">
<!--        <p style=" font-size: 40px; background-color: white">看电影，就上-{ {{this.cinemaInfo.cinemaName}} }</p>-->
      </div>
      <el-backtop></el-backtop>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      isToken: '',
      cinemaInfo: '',
      url: '',
      //$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
      // $route为当前router跳转对象里面可以获取name、path、query、params等
      //substring截取字符串,indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果没有找到匹配的字符串则返回 -1
      //indexOf('/',1)，寻找第一次出现/的地方，如果找到了返回长度，没有返回-1
      activeUrl: this.$route.path.substring(0, this.$route.path.indexOf('/',1) === -1 ? this.$route.path.length : this.$route.path.indexOf('/',1)),
      menuList: [
        {
          id: 1,
          name: '首页',
          path: '/home'
        },
        {
          id: 2,
          name: '电影',
          path: '/movie'
        },
        {
          id: 3,
          name: '榜单',
          path: '/rankingList'
        },
        {
          id: 4,
          name: '关于我们',
          path: '/aboutUs'
        }
      ],
      //搜索关键字
      kw: ''
    }
  },
  created() {
    this.getCinemaInfo()
    this.isToken = window.sessionStorage.getItem("token")
    //解析用户的头像（从session中）
    const userPicture = JSON.parse(window.sessionStorage.getItem('loginUser')).userPicture
    const picture = JSON.parse(userPicture)
    //如果照片为空，直接返回
    if(picture === null || picture.length === 0) return;
    //如果照片不为空，进行拼接字符串，http://127.0.0.1:8181/ +  /images/user/2022/05/30/8b8bf71fbcb14b17b3a8a66e7c90992f.jpeg
    this.url = this.global.base + picture[0]
  },
  //加上监听，改变了局部路由就可实现局部的刷新
  watch: {
    '$route'() {
      //  '/home','/movie','/rankingList','/aboutUs' 根据路由进行刷新
      this.activeUrl = this.$route.path.substring(0, this.$route.path.indexOf('/',1) === -1 ? this.$route.path.length : this.$route.path.indexOf('/',1))
    }
  },
  methods: {
    async getCinemaInfo(){
      const _this = this
      //获得影院公司的基本信息
      await axios.get('sysCinema').then(resp => {
        _this.cinemaInfo = resp.data.data
      })
    },

    search() {
      let tmp = this.kw
      this.$router.push('/search/searchMovie?kw=' + tmp)
      this.kw = ''
    },
    handleCommand(command) {
      //如果退出登录,清除session
      if(command === 'logout') {
        window.sessionStorage.clear();
        return this.$router.push('/login')
      }
      this.$router.push('/' + command)
    },

    toWelcome() {
      this.$router.push('/welcome')
    }
  }
}
</script>

<style scoped>
.el-header{
  height: 80px !important;
  border-bottom: 1px solid #e6e6e6;
}

.header-inner{
  width: 75%;
  margin: 0 12.5%;
  display: flex;
}

.logo{
  height: 80px;
  width: 200px;
}

.nav-menu{
  border-bottom: 0px solid #eee !important;
  height: 60px;
  margin: 9px auto;
}

.el-menu-item{
  font-size: 20px;
}

.el-menu-item:hover{
  color: #409EFF !important;
}

.searchContainer{
  padding: 20px 0;
  display: flex;
}

.searchBar >>> input{
  border-radius: 50px;
}

#searchBtn{
  transform: translate(-100%, 0);
}

.el-dropdown-link{
  width: 70px;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-arrow {
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.el-dropdown-link:hover .icon-arrow{
  /* 定义动画的状态 */
  -webkit-transform: rotate(180deg) scale(1);
  -moz-transform: rotate(180deg) scale(1);
  -o-transform: rotate(180deg) scale(1);
  -transform: rotate(180deg) scale(1);
}

.footer-mini{
  border-top: 1px solid #EEE;
  padding-top: 20px;
  text-align: center;
}

.footer{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-main{
  padding: 0px;
}
</style>

请求与响应

1，获得后台关于电影公司的基本信息：

在这里插入图片描述

2，对于图片的展示

对其进行拼接

   //如果照片不为空，进行拼接字符串，
//   http://127.0.0.1:8181/    +  /images/user/2022/05/30/8b8bf71fbcb14b17b3a8a66e7c90992f.jpeg

    this.url = this.global.base + picture[0]