Vue+Django 旅游网项目 首页前端实现

结构

• 公共的样式

  src/assets/common.less

• 公共的js（工具函数、接口地址、配置文件）

  接口地址配置

  src/utils/apis.js

  常量配置

  src/utils/constants.js

  工具函数

  src/utils/filters.js

创建Vue项目

创建完成

启动项目

导入静态文件

新建一个style文件夹用于存储样式文件

新建utils文件夹

创建apis.js

创建 constants.js

创建filters.js 存放过滤器

首页

• 分析首页结构
• 新建页面
• 新建组件

components下创建 common存放公共组件 home存放首页的组件

下载导入Vant组件库

安装Vant

npm install vant -S

导入vant组件库

在main.js中添加

// VantUI组件库
import Vant from 'vant'
import 'vant/lib/index.css'
// 把VantUI当做一个插件，在Vue中使用
Vue.use(Vant)

实现轮播图

components/home/ 下的 banner组件

<template>
<!-- 轮播图 -->
  <div class="home-banner-box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList"
        :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data () {
    return {
      bannerList: []
    }
  },
  methods: {

  },
  created () {
    this.bannerList = [
      { id: 1, img: '/static/home/banner/banner1.jpg' },
      { id: 2, img: '/static/home/banner/banner2.jpg' },
      { id: 3, img: '/static/home/banner/banner3.jpg' }
    ]
  }
}
</script>

home界面中导入

<template>
<!-- 轮播图 -->
  <div class="home-banner-box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList"
        :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data () {
    return {
      bannerList: []
    }
  },
  methods: {

  },
  created () {
    this.bannerList = [
      { id: 1, img: '/static/home/banner/banner1.jpg' },
      { id: 2, img: '/static/home/banner/banner2.jpg' },
      { id: 3, img: '/static/home/banner/banner3.jpg' }
    ]
  }
}
</script>
<style lang="less">
.home-banner-box {
  img {
    width: 100%;
    height: auto;
  }
}
</style>

显示结果

实现热门推荐

components/home/ 下的 hot组件

<template>
    <div class="home-hot-box">
        <!-- 导航 -->
        <van-cell
          icon="/static/home/hot/fire.png"
          title="热门推荐"
          title-style="text-align:left"
          value="全部榜单"
          is-link />
        <!-- 列表 -->
        <div class="box-main">
            <a href="#" class="hot-item"
              v-for="item in dataList"
              :key="item.id">
                <div class="img">
                    <span></span>
                    <img :src="item.img" alt="">
                </div>
                <h5 class="van-ellipsis">{{ item.name }}</h5>
                <div class="line-price">
                    <span class="price">￥{{ item.price }}</span>起
                </div>
            </a>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: []
    }
  },
  created () {
    this.dataList = [
      { id: 1, img: '/static/home/hot/h1.jpg', name: '景点名称', price: 65 },
      { id: 2, img: '/static/home/hot/h2.jpg', name: '景点名称', price: 65 },
      { id: 3, img: '/static/home/hot/h3.jpg', name: '景点名称', price: 65 },
      { id: 4, img: '/static/home/hot/h4.jpg', name: '景点名称', price: 65 },
      { id: 5, img: '/static/home/hot/h5.jpg', name: '景点名称', price: 65 }
    ]
  }
}
</script>
<style lang="less">
.home-hot-box {
  padding: 0 10px;
  .van-cell {
    padding: 10px 0;
  }
  .box-main {
    width: 100%;
    display: flex;
    padding-top: 10px;
    overflow-x: scroll;
  }
  .hot-item {
    display: flex;
    flex-direction: column;
    width: 100px;
    margin-right: 10px;
    padding-bottom: 10px;

    .img {
      position: relative;

      span {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        width: 42px;
        height: 20px;
        z-index: 10;
      }

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

    h5 {
      color: #212121;
      padding: 2px 0;
      font-size: 12px;
      margin: 0;
    }

    .line-price {
      color: #212121;
      font-size: 12px;
      .price {
        color: #f50;
        font-size: 13px;
      }
    }
    &:nth-child(1) .img span {
      background: url(/static/home/hot/top1.png) no-repeat;
      background-size: 100% auto;
    }
    &:nth-child(2) .img span {
      background: url(/static/home/hot/top2.png) no-repeat;
      background-size: 100% auto;
    }
    &:nth-child(3) .img span {
      background: url(/static/home/hot/top3.png) no-repeat;
      background-size: 100% auto;
    }
  }
}
</style>

home界面中导入

<template>
  <div class="home">
    <h1>旅游网</h1>
    <!-- 轮播图 -->
    <Banner/>
    <!-- 热门推荐 -->
    <Hot/>
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from '@/components/home/Banner'
import Hot from '@/components/home/Hot'
export default {
  name: 'Home',
  components: {
    // 轮播图
    Banner,
    // 热门推荐
    Hot
  }
}
</script>

演示结果

实现精选景点

创建景点列表公共组件

<template>
  <a href="" class="sight-item">
            <img src="/static/home/hot/h1.jpg" alt="">
            <div class="right">
                <h5>{{ item.name }}</h5>
                <van-rate v-model="item.score" readonly/>
                <div class="tips">4人点评 | 100%满意</div>
                <div class="tips light">广东-广州</div>
                <div class="line-price">￥ {{ item.price }} 起</div>
            </div>
          </a>
</template>
<script>
export default {
  props: ['item']
}
</script>
<style lang="less">
.sight-item {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #f6f6f6;
  img {
    width: 100px;
    height: 100px;
  }
  h5 {
    color: #212121;
    font-size: 14px;
    padding: 5px 0;
    margin: 0;
  }
  .right {
    text-align: left;
    flex-grow: 1;
    text-align: left;
    justify-content: left;
    padding-left: 5px;
    position: relative;
  }
  .line-price {
    position: absolute;
    right: 10px;
    top: 20px;
    display: inline-block;
    color: #f50;
    font-size: 16px;
    font-weight: bold;
  }
  .tips {
    font-size: 12px;
    color: #666;
  &.light {
    color: #999;
  }
  }
}
</style>

实现精选景点

components/home/ 下的 Fine组件

<template>
    <!-- 精选景点 -->
    <div class="home-fine-box">
      <!-- 导航 -->
        <van-cell
          icon="location-o"
          title="热门推荐"
          title-style="text-align:left"
          value="全部榜单"
          is-link />
        <!-- 列表 -->
        <div class="box-main">
          <SightItem v-for="item in dataList"
          :key="item.id"
          :item="item"/>
        </div>
    </div>
</template>
<script>
import SightItem from '@/components/common/ListSight'
export default {
  components: {
    SightItem
  },
  data () {
    return {
      dataList: []
    }
  },
  created () {
    this.dataList = [
      { id: 1, name: '景点名称', score: 4.5, price: 98 },
      { id: 2, name: '景点名称', score: 4.5, price: 98 },
      { id: 3, name: '景点名称', score: 4.5, price: 98 },
      { id: 4, name: '景点名称', score: 4.5, price: 98 },
      { id: 5, name: '景点名称', score: 4.5, price: 98 }
    ]
  }
}
</script>
<style lang="less">
.home-fine-box {
  padding: 0 10px;
  .van-cell {
    padding: 10px 0;
  }
  .box-main {
  }
}
</style>

home界面中导入

<template>
  <div class="home">
    <h1>旅游网</h1>
    <!-- 轮播图 -->
    <Banner/>
    <!-- 热门推荐 -->
    <Hot/>
    <!-- 精选景点 -->
    <Fine/>
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from '@/components/home/Banner'
import Hot from '@/components/home/Hot'
import Fine from '@/components/home/Fine'
export default {
  name: 'Home',
  components: {
    // 轮播图
    Banner,
    // 热门推荐
    Hot,
    // 精选景点
    Fine
  }
}
</script>

效果

页面底部

components/common/ 下的 Footer组件

<template>
<!-- 底部导航 -->
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 'home'
    }
  }
}
</script>

home界面导入

<template>
  <div class="home">
    <h1>旅游网</h1>
    <!-- 轮播图 -->
    <Banner/>
    <!-- 热门推荐 -->
    <Hot/>
    <!-- 精选景点 -->
    <Fine/>
    <!-- 页面底部 -->
    <TripFooter/>
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from '@/components/home/Banner'
import Hot from '@/components/home/Hot'
import Fine from '@/components/home/Fine'
import TripFooter from '@/components/common/Footer'
export default {
  name: 'Home',
  components: {
    // 轮播图
    Banner,
    // 热门推荐
    Hot,
    // 精选景点
    Fine,
    // 页面底部
    TripFooter
  }
}
</script>

效果：