闲云旅游day01-开发任务

项目学习步骤

记得用 git 管理项目

我的：https://gitee.com/owahahah/xianyu-development

老师的：https://gitee.com/imyyliang/xianyun56-development

开发安排

初始化布局
页头页脚公共组件
首页轮播图

初始化默认全局布局

这个相当于 app.vue

nuxtjs提供了一个公共布局组件layouts/default.vue，该布局组件默认作用于所有页面，所以我们可以在这里加上一些公共样式，在下一小结中还会导入公共组件

替换layouts/default.vue代码如下：

<template>
  <div>
    <!-- 内容占位组件 -->
    <nuxt />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*{
  margin:0; 
  padding:0;
}
ul, li, ol{
  list-style:none;
}
a{
  text-decoration:none;
  color:inherit;
}
a:hover{

}
em,i{
  font-style: normal;
}
</style>

新建公共组件

思路

在components中新建应用统一的头部组件和页脚组件。
在默认布局中layouts/default.vue中导入公共组件。

组件约定：公共组件不需要放到子文件夹中

下拉菜单组件文档: https://element.eleme.cn/#/zh-CN/component/dropdown#ji-chu-yong-fa

实现步骤

头部组件:布局大量采用了Element-Layout 布局

在components文件夹中新建头部组件components/header.vue。

<template>
    <header class="header">
        <el-row type="flex" justify="space-between" class="main">

            <!-- logo -->
            <div class="logo">
                <nuxt-link to="/">
                    <img src="http://157.122.54.189:9093/images/logo.jpg" alt="">
                </nuxt-link>
            </div>

            <!-- 菜单栏 -->
            <el-row type="flex" class="navs">
                <nuxt-link to="/">首页</nuxt-link>
                <nuxt-link to="/post">旅游攻略</nuxt-link>
                <nuxt-link to="/hotel">酒店</nuxt-link>
                <nuxt-link to="/air">国内机票</nuxt-link>  
            </el-row>

            <!-- 登录/用户信息 -->
            <el-row type="flex" align="middle">

                <!-- 如果用户存在则展示用户信息，用户数据来自store -->
                <el-dropdown v-if="false">
                    <el-row type="flex" align="middle" class="el-dropdown-link">
                        <nuxt-link to="#">
                            <img src="http://157.122.54.189:9093/images/pic_sea.jpeg"/>
                            用户名
                        </nuxt-link>
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                    </el-row>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                           <nuxt-link to="#">个人中心</nuxt-link>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <div @click="handleLogout">退出</div> 
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <!-- 不存在用户信息展示登录注册链接 -->
                <nuxt-link to="/user/login" class="account-link" v-else>
                    登录 / 注册 
                </nuxt-link>
            </el-row>
        </el-row>
    </header>
</template>
<script>
export default {
    methods: {
        // 用户退出
        handleLogout(){},
    }
}
</script>
<style scoped lang="less">
    .header{
        height: 60px;
        line-height:60px;
        background:#fff;
        border-bottom: 1px #ddd solid;
        box-shadow:0 3px 0 #f5f5f5;
        box-sizing: border-box;

        .main{
            width:1000px;
            margin:0 auto;
        }

        .logo{
            width:156px;
            padding-top:8px;

            img{
                display: block;
                width:100%;
            }
        }

        .navs{
            margin: 0 20px;
            flex:1;

            a{
                display:block;
                padding:0 20px;
                height:60px;
                box-sizing: border-box;

                &:hover,&:focus, &:active {
                    border-bottom:5px #409eff solid;
                    color:#409eff;
                }
            }

            /deep/ .nuxt-link-exact-active{
                background:#409eff;
                color:#fff!important;
            }
        }

        .message{
            height:36px;
            line-height:1;
            cursor:pointer;
            .el-icon-bell{
                margin-right:2px;
                font-size:18px;      
            }
        }

        .el-dropdown-link{
           margin-left:20px;

           &:hover{
               img{
                    border-color: #409eff;
               }
            }

           a{
               display:block;
           }

            img{
                width:32px;
                height:32px;
                vertical-align: middle;
                border:2px #fff solid;
                border-radius:50px;
            }
        }

        .account-link{
            font-size: 14px;
            margin-left:10px;
            color:#666;

            &:hover{
                color:#409eff;
                text-decoration: underline;
            }
        }
    } 
</style>

注意: 样式中的/deep/ .nuxt-link-exact-active是菜单高亮时的颜色。

在layouts/default.vue中导入头部组件

<template>
  <div>
    <!-- 头部组件 -->
    <Header/>
    <!-- 内容占位组件 -->
    <nuxt />
  </div>
</template>

<script>
// 导入头部组件
import Header from "@/components/header"

export default {
  // 注册组件
  components: {
    Header
  }
}
</script>
<style lang="less">
 /* 省略样式 */
</style>

实现登录注册功能后再回来判断显示用户信息还是登陆注册按钮。

页脚组件

在components文件夹中新建头部组件components/footer.vue。

<template>
    <div class="footer-wrapper">
        <div class="footer">
            <el-row class="info-list">
                <el-col :span="6" :offset="1">
                    <h5>闲云旅游旅游网</h5>
                    <p>上亿旅行者共同打造的"旅行神器"</p>
                    <p><span>60,000</span> 多个全球旅游目的地</p>
                    <p><span>600,000</span> 个细分目的地新玩法</p>
                    <p><span>760,000,000</span> 次攻略下载</p>
                    <p><span>38,000</span> 家旅游产品供应商</p>
                </el-col>
                 <el-col :span="5">
                    <h5>关于我们</h5>
                    <p>隐私政策 商标声明</p>
                    <p>服务协议 游记协议</p>
                    <p>商城平台服务协议</p>
                    <p>网络信息侵权通知指引</p>
                    <p>闲云旅游旅游网服务监督员</p>
                    <p>网站地图加入闲云旅游</p>
                </el-col>
                <el-col :span="5">
                    <h5>旅行服务</h5>
                    <p>旅游攻略 酒店预订</p>
                    <p>旅游特价 国际租车</p>
                    <p>旅游问答 旅游保险</p>
                    <p>旅游指南 订火车票</p>
                    <p>旅游资讯 APP下载</p>
                </el-col>
                <el-col :span="6" class="scan">
                    <p>
                        <img src="http://157.122.54.189:9093/images/1556522965.png" alt="">
                    </p>
                    关注我们
                </el-col>
            </el-row>

            <div class="licence">
                京ICP备08001421号 京公网安备110108007702 Copyright © 2016-2019 博学谷 All Rights Reserved
            </div>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped lang="less">
    .footer-wrapper{
        background:#333;
        color:#ccc;
        min-width:1000px;
    }

    .footer{
        padding-top:30px;
        margin:0 auto;
        width:1000px;
    }

    .info-list{
        h5{
            font-weight: normal;
            font-size:16px;
            margin-bottom:10px;
        }

        p{
            font-size:12px;
            line-height: 1.8;
            span{
                color:orange;
            }
        }
    }

    .scan{
        text-align: center;

        img{
            width:140px;
            height:140px;;
        }

        font-size:12px;
    }

    .licence{
        border-top:1px #666 solid;
        margin-top:20px;
        padding:50px 0;
        text-align: center;
        font-size:12px;
    }
</style>

在layouts/default.vue中导入页脚组件

<template>
  <div>
    <!-- 头部组件 -->
    <Header/>
    <!-- 内容占位组件 -->
    <nuxt />
    <!-- 页脚组件 -->
    <Footer/>
  </div>
</template>

<script>
// 导入头部组件
import Header from "@/components/header";
// 导入页脚组件
import Footer from "@/components/footer";

export default {
  // 注册组件
  components: {
    Header,
    Footer
  }
}
</script>

现在可以查看最新的页面效果了。

总结

layouts/default.vue是默认的布局组件，会作用于任何页面。
在layouts/default.vue中导入全局的头部组件和页脚组件

首页轮播图-背景图切换

在这里插入图片描述

思路

使用Element-ui的幻灯片组件el-carousel，新增首页轮播图布局。
请求后端接口替换静态图片数据

结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在el-carousel-item标签中。

默认情况下，在鼠标 hover 底部的指示器时就会触发切换。

通过设置trigger属性为click，可以达到点击触发的效果。

若将arrow设置为always，则会一直显示， interval自动切换的时间间隔，单位为毫秒。data

实现步骤

新增轮播图布局

把pages/index.vue内容替换成以下代码：

<template>
    <div class="container">
        <!-- 幻灯片 -->
        <el-carousel 
        :interval="5000" 
        arrow="always">
            <el-carousel-item 
            v-for="(item, index) in banners" 
            :key="index">
                <div class="banner-image" 
                :style="`
                background:url(${item.url}) center center no-repeat;
                background-size:contain contain;
                `">
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data(){
        return {
            // 轮播图数据
            banners: [
                {
                    url: "http://157.122.54.189:9095/assets/images/th03.jfif",
                },
                {
                    url: "http://157.122.54.189:9095/assets/images/th04.jfif",
                }
            ]
        }
    }
}
</script>

<style scoped lang="less">
.container{
    min-width:1000px;
    margin:0 auto;
    position:relative;

    /deep/ .el-carousel__container{
        height:700px;
    }

    .banner-image{
        width:100%;
        height:100%;
    }
}
</style>

预览首页应该能正常显示轮播图了

banners 是我们自己构建的一个死数据数组, 用来遍历之后生成多张图片进行轮播

请求后端接口数据

接下来使用接口数据来替换本地的静态数据

<script>
export default {
    
    
    data(){
    
    
        return {
    
    
            banners: [], // 轮播图数据
        }
    },
    mounted(){
    
    
        this.$axios({
    
    
            url: "/scenics/banners"
        }).then(res => {
    
    
            const {
    
    data} = res.data;
            this.banners = data;
        })
    }
}
</script>

替换template的图片地址添加$axios.defaults.baseURL，因为接口返回的图片链接是相对链接

<!--省略代码-->
<div class="banner-image" 
     :style="`
             background:url(${$axios.defaults.baseURL}${item.url}) center center no-repeat;
             background-size:contain contain;
             `">
</div>
<!--省略代码-->

总结

使用Element-ui的幻灯片组件el-carousel实现轮播图,显示死数据,固定的图片
使用this.$axios请求后台轮播图接口获取数据
在模板中使用$axios.defaults.baseURL补全图片地址进行显示

闲云旅游day01-开发任务

项目学习步骤

开发安排

初始化默认全局布局

新建公共组件

思路

实现步骤

头部组件:布局大量采用了Element-Layout 布局

页脚组件

总结

首页轮播图-背景图切换

思路

实现步骤

新增轮播图布局

请求后端接口数据

总结

猜你喜欢