首頁開發(fā)

項目GitHub地址：https://github.com/q2419068625/xianyun

新建公共組件

在components中新建應(yīng)用統(tǒng)一的頭部組件和頁腳組件。

在默認(rèn)布局中l(wèi)ayouts/default.vue中導(dǎo)入公共組件。

實現(xiàn)步驟

頭部組件

在components文件夾中新建頭部組件components/header.vue。

<!-- 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">國內(nèi)機票</nuxt-link> </el-row><!-- 登錄/用戶信息 --><el-row type="flex" align="middle"><!-- 如果用戶存在則展示用戶信息，用戶數(shù)據(jù)來自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>

頁腳組件

在components文件夾中新建頭部組件components/footer.vue。

<template><div class="footer-wrapper"><div class="footer"><el-row class="info-list"><el-col :span="6" :offset="1"><h5>閑云旅游旅游網(wǎng)</h5><p>上億旅行者共同打造的"旅行神器"</p><p><span>60,000</span> 多個全球旅游目的地</p><p><span>600,000</span> 個細(xì)分目的地新玩法</p><p><span>760,000,000</span> 次攻略下載</p><p><span>38,000</span> 家旅游產(chǎn)品供應(yīng)商</p></el-col><el-col :span="5"><h5>關(guān)于我們</h5><p>隱私政策 商標(biāo)聲明</p><p>服務(wù)協(xié)議 游記協(xié)議</p><p>商城平臺服務(wù)協(xié)議</p><p>網(wǎng)絡(luò)信息侵權(quán)通知指引</p><p>閑云旅游旅游網(wǎng)服務(wù)監(jiān)督員</p><p>網(wǎng)站地圖加入閑云旅游</p></el-col><el-col :span="5"><h5>旅行服務(wù)</h5><p>旅游攻略 酒店預(yù)訂</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>關(guān)注我們</el-col></el-row><div class="licence">京ICP備08001421號 京公網(wǎng)安備110108007702 Copyright ? 2016-2019 博學(xué)谷 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>

首頁輪播圖

實現(xiàn)步驟

新增輪播圖布局

把pages/index.vue內(nèi)容替換成以下代碼：

<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 {// 輪播圖數(shù)據(jù)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>

請求后端接口數(shù)據(jù)

接下來使用接口數(shù)據(jù)來替換本地的靜態(tài)數(shù)據(jù)
接口地址：http://157.122.54.189:9095/scenics/banners

mounted() {this.$axios({url:'http://157.122.54.189:9095/scenics/banners'}).then(res=>{// console.log(res.data);this.banners = res.data.data})},

替換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> <!--省略代碼-->

搜索跳轉(zhuǎn)

思路

添加搜索框布局

搜索框tab切換執(zhí)行不同的操作

搜索跳轉(zhuǎn)

實現(xiàn)步驟

搜索框布局

把搜索框定位在輪播圖上，在pages/index.vue的template新增以下代碼

<template><div class="container"><!-- 幻燈片 --><!-- 省略代碼 --><!-- 搜索框 --><div class="banner-content"><div class="search-bar"><!-- tab欄 --><el-row type="flex" class="search-tab"><span v-for="(item, index) in options" :key="index" :class="{active: index === currentOption}"@click="handleOption(index)"><i>{{item.name}}</i></span></el-row><!-- 輸入框 --><el-row type="flex" align="middle" class="search-input"><input :placeholder="options[currentOption].placeholder" v-model="searchValue"@keyup.enter="handleSearch"/><i class="el-icon-search" @click="handleSearch"></i></el-row></div></div></div> </template>

在pages/index.vue的script替換如下：

<script> export default {data(){return {banners: [], // 輪播圖數(shù)據(jù)options: [ // 搜索框tab選項{name: "攻略", placeholder: "搜索城市", pageUrl: "/post?city="},{name: "酒店", placeholder: "請輸入城市搜索酒店", pageUrl: "/hotel?city="},{name: "機票", placeholder: "請輸入出發(fā)地", pageUrl: "/air"}],searchValue: "", // 搜索框的值currentOption: 0, // 當(dāng)前選中的選項 }},mounted(){this.$axios({url: "/scenics/banners"}).then(res => {const {data} = res.data;this.banners = data;})},methods: {handleOption(index){},handleSearch(){}}, } </script>

tab欄操作

實現(xiàn)切換效果，并且判斷如果切換的機票tab，那么直接跳轉(zhuǎn)到機票首頁

編輯methods下的handleOption方法

// 切換tab欄時候觸發(fā) handleOption(index){// 設(shè)置當(dāng)前tabthis.currentOption = index;// 如果切換的機票tab，那么直接跳轉(zhuǎn)到機票首頁const item = this.options[index];if(item.name === "機票"){return this.$router.push(item.pageUrl);} },

搜索跳轉(zhuǎn)

確定搜索時候會跳轉(zhuǎn)到當(dāng)前tab的pageUrl頁面路徑，并且在url上攜帶上輸入框的值

// 搜索時候觸發(fā) handleSearch(){const item = this.options[this.currentOption];// 跳轉(zhuǎn)時候給對應(yīng)的頁面url加上搜索內(nèi)容參數(shù)this.$router.push(item.pageUrl + this.searchValue); }

總結(jié)

先把搜索框定位在輪播圖上。

給tab添加切換效果，并且判斷如果是機票tab，直接跳轉(zhuǎn)到機票首頁。

實現(xiàn)搜索跳轉(zhuǎn)，注意跳轉(zhuǎn)的鏈接來自當(dāng)前選中的tab的pageUrl屬性，并且附帶上參數(shù)

總結(jié)

以上是生活随笔為你收集整理的闲云旅游网02（基于vue+element ui）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。