閒雲旅遊專案開發-（第一篇：使用Element-ui實現主頁輪播圖）

橘子y發表於2020-11-07
UI

業務需求：

  •   初始化佈局
  •  頁頭頁尾公共元件
  •  首頁輪播圖

一 初始化預設全域性佈局

nuxtjs 提供了一個公共元件 layouts/default.vue，相當於以前的 app.vue 。該佈局元件預設作用於所有的頁面，所以我們可以再這裡加上一些公共的樣式

layouts/default.vue程式碼如下：

<template>
  <div>
    <!-- 這裡相當於我們以前的app.vue -->
    <pageHeader></pageHeader>
    <!--  <Nuxt /> 相當於 <router-view></router-view> -->
    <Nuxt />
    <pageFooter></pageFooter>
  </div>
</template>

<script>
import pageHeader from "@/components/pageHeader.vue";
import pageFooter from "@/components/pageFooter.vue";
export default {
  components: {
    pageHeader,
    pageFooter
  }
};
</script>
<style>
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;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>

 

二 新建公共元件

 1.思路

1.在components 資料夾中新建所有頁面統一的頭部元件和頁尾元件

2.在預設佈局中 layouts/default.vue中 匯入公共元件並使用

元件約定：公共元件不需要放到子資料夾中：如下圖

頭部下拉選單元件文件：https://element.eleme.cn/#/zh-CN/component/dropdown#ji-chu-yong-fa

 

2.實現步驟

 2.1 頭部元件

components/pageFooter.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">
        ​
       
        <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>退出</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 {
  computed: {
 
};
</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>

2.2 頁尾元件

在components/pageFooter.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>

3 總結：

  • layouts.default.vue  是預設的佈局元件，會作用於任何頁面
  • 在layouts/default.vue 中匯入全域性的頭部元件和頁尾元件，就可以檢視到基本的頁面效果了

 

三 首頁輪播圖

1. 思路

  • 使用 Element-ui 的幻燈片元件 el-carousel,新增首頁的輪播圖佈局
  • 請求後端介面替換靜態圖片資料

 

2.實現步驟

2.1 新增輪播圖佈局

  • 首頁的輪播圖佈局，pages/index.vue 是在 layouts/default.vue 中的 </nuxt>中渲染
  • banners 是我們自己構建的一個死資料陣列, 用來遍歷之後生成多張圖片進行輪播
<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>

2.2 請求後端介面資料

<script>
export default {

      data(){
           return {
              banners: [] //輪播圖資料存放

              }
    },
      mounted(){
           this.$axios({
               url:"/scenics/banners"
          }).then(res=>{
const {data} = res.data;
      })
   }
}
</script>

this.$axios能使用 是因為 nuxt 已經幫我們繫結了

 

2.3 修改 template 的圖片地址，新增 $axios.defaults.baseURL,因為介面返回的圖片連結時相對連結

  <!-- 首頁輪播圖 -->
    <template>
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item,index) in banners" :key="index">
          <div
            class="banner-image"
            :style="`
                background:url(${$axios.defaults.baseURL}${item.url}) center center no-repeat;
                background-size:contain contain;
                `"
          >{{$axios.defaults.baseURL}}{{item.url}}</div>
        </el-carousel-item>
      </el-carousel>
    </template>

3.總結

  • 使用Element-ui的幻燈片元件 el-carousel 實現輪播圖，開始顯示固定資料，固定的圖片
  • 使用this.$axios 請求後臺輪播圖介面 獲取資料
  • 在模板中使用$axios.defaults.baseURL 補全圖片地址進行顯示

 

相關文章