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

最新推荐文章于 2024-02-29 17:52:56 发布
最新推荐文章于 2024-02-29 17:52:56 发布
阅读量2.4k 收藏 13
点赞数 5
分类专栏： # Django WEB前端 文章标签： 前端 vue.js 前端框架 django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42403632/article/details/121530367
版权

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

结构

  • 公共的样式

    src/assets/common.less

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

    接口地址配置

    src/utils/apis.js

    常量配置

    src/utils/constants.js

    工具函数

    src/utils/filters.js

创建Vue项目

image-20211122143534962

image-20211122142928735

image-20211122143003922

image-20211122143021691

image-20211122143049876

image-20211122143111218

image-20211122143205560

image-20211122143229587

image-20211122143246251

image-20211122143324711

创建完成

image-20211122143554966

启动项目

image-20211122143653119

导入静态文件

image-20211122145928886

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

image-20211122150322820

新建utils文件夹

image-20211122152125336

创建apis.js

image-20211122152235728

创建 constants.js

image-20211122152410528

创建filters.js 存放过滤器

image-20211122152552194

首页

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

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

image-20211122153244946

下载导入Vant组件库

安装Vant

npm install vant -S

导入vant组件库

在main.js中添加

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

image-20211123143750698

实现轮播图

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界面中导入

image-20211123150437865

<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>

显示结果

image-20211123150531167

实现热门推荐

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>

演示结果

image-20211123170328543

实现精选景点

创建景点列表公共组件

<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>

效果

image-20211124162606960

页面底部

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>

效果：

image-20211125092413148

小旺不正经
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
前端项目-aping.zip
09-02
前端项目-aping,APing是一个AngularJS指令，允许您从一个或多个源接收、聚合、限制、排序和显示数据。完整的设置非常简单，只需将数据属性添加到HTML中即可。
微服务仿微信聊天项目-前端
03-14
实现功能：访微信聊天项目实战，用户登录、注册以及第三方微信登录，用户头像上传，添加好友，好友列表，新朋友通知与发现，发送邮箱及反馈，群聊分组，论坛设计，朋友圈发布，登录多个用户登录挤下线，单聊/群聊，前端使用MUI,H5 Plus..... 技术栈 前端：MUI,H5+ APP (android、 IOS - Html5 + Css + Js + Mui + H5+)
23.基于springboot + vue实现的前后端分离-在线旅游网站系统（项目 + 论文PPT）
最新发布
m0_59514868的博客
02-29 1322
本旅游网站系统采用的数据库是MYSQL，使用JSP技术开发，在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
基于Vue2开发的4A景区的旅游导航H5项目
08-10
这是一个基于vue2, vue-router, axioss, express来实现的简单的某个景区H5首页展示页面
前端项目-highcharts.zip
09-02
前端项目-highcharts,HighCharts是一个用纯JavaScript编写的图表库，为您的网站或Web应用程序添加交互式图表提供了一种简单的方法。海图目前支持线、样条线、面积、面积样条线、列、条形图、饼图和散点图类型。海图不能免费用于商业用途。请参阅以下许可证：http://highcharts.com/license
Angular完整项目开发4 - 添加主页导航栏
小鹰信息技术服务部
04-04 1114
常规的企业级管理系统，一般都要有主页导航栏。本篇在Angular项目中增加导航栏。 1. 添加导航栏的UI引用 app.module.ts import { MatToolbarModule } from '@angular/material/toolbar'; import { MatIconModule } from '@angular/material/icon'; ... imports: [ ... MatToolbarModule, MatIconModule ]
vue项目实战（一）- 旅游网站首页开发
高安博客
11-24 4746
初始化项目: npm init webpack mytravel //接下来根据提示内容选择就行了 一、网站首页Header开发 安装依赖： npm install stylus --save npm install stylus-loader --save 1rem = html font-size = 50px 首页header样式： <style lang="stylus" scoped> .header display: flex ..
Vue实战开发移动端旅游网站
weixin_51999266的博客
07-09 2680
Vue实战开发旅游网站前端项目搭建搭建步骤项目结构网络请求库axios跨域问题前端组件开发后台接口开发接口联调总结 项目搭建 搭建步骤 项目结构 公共的样式：src/assets/style/common.less 公共的js（工具函数，接口地址，配置文件） src/utils/apis.js（接口地址配置） src/utils/constants.js（常量配置） src/utils/filters.js（工具函数） 创建好项目后，将准备好的静态文件夹(static)放入public/目录下。 在s
Vue+Vant移动端娱乐网站搭建
qq_43821834的博客
08-16 276
Vue+Vant移动端娱乐网站搭建 运行截图 电影 新闻 音乐 部分代码 news.vue <template> <div> <van-card :desc="item.hint" :key="index" :thumb="item.images[0]" :title="item.title"
Vue+Django 旅游网项目 首页后端实现
小旺的博客
11-26 2563
Vue+Django 旅游网项目 首页后端实现 轮播图 配置数据库 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'trip', 'USER': 'root', 'PASSWORD': '123456', 'HOST': '127.0.0.1', 'PORT': 3306, } } 创建应用 s
基于Vue+Vant的旅游WebApp的设计与实现
weixin_57156294的博客
10-10 1674
基于Vue+Vant的旅游WebApp的设计与实现
Vue+Django项目部署详解
10-16
主要介绍了Vue+Django项目部署详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+echarts+element ui+django 前后端分离考勤系统源码.zip
05-08
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
基于 vue + django 的二手图书管理系统源码.zip
05-08
基于 vue + django 的二手图书管理系统源码 基于 vue + django 的二手图书管理系统源码 基于 vue + django 的二手图书管理系统源码 基于 vue + django 的二手图书管理系统源码 基于 vue + django 的二手图书...
Vue+Django REST framework 打造生鲜电商项目.docx
09-26
Vue+Django REST framework 打造生鲜电商项目.docx
Python+Django+vue3全栈开发商城项目.zip
10-05
Python+Django+vue3全栈开发商城项目，包含用户、订单、购物车、商品等模块，后端代码均有注释，是学习python项目开发良好案例
Vue-Vant实现轮播图
小旺的博客
07-17 8458
参考文档：Vant Banner.vue 仿接口 <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.
Vue之VantUI库
小旺的博客
07-15 5778
什么是VantUI 开源免费、轻量、可靠的移动端Vue组件库 基础组件 按钮、图标、布局、提示信息等 表单组件 日历、复选框、时间选择、输入框、评分等 反馈组件 弹出框、加载、下拉菜单、消息提示、下拉刷新、滚动加载等 展示组件 进度条、倒计时、分割线、列表等 导航组件 宫格、索引、导航栏、分页等 业务组件 地址编辑、联系人、优惠券、提交订单等 VabtUI官方链接 使用Vant 安装 项目目录 手动按需导入组件 import Button from 'vant/lib/butto
vant webapp
12-28
Vant WebApp是一个基于Vue.js框架开发的组件库，专门为移动端的web应用而设计。它提供了丰富的UI组件和API，能够帮助开发者快速搭建出美观、高效的移动端应用。 Vant WebApp拥有包括按钮、表单、导航、轮播、加载等在内的众多常见组件，而且每个组件都经过了精心设计和测试，保证了组件的稳定性和兼容性。同时，Vant WebApp还提供了灵活的主题定制功能，开发者可以根据自己的设计需求自定义主题色和样式。 另外，Vant WebApp还提供了丰富的API文档和示例代码，为开发者提供了便捷的学习和使用体验。无论是对Vue.js的熟练度，还是对移动端web应用开发的经验，Vant WebApp都能够满足开发者的需求，帮助他们快速、高效地完成项目的开发。 总的来说，Vant WebApp是一个功能强大、易用、灵活的移动端web应用的组件库，能够大大提升开发效率和用户体验，是移动端web应用开发的利器。希望越来越多的开发者能够使用Vant WebApp，为移动端web应用的开发贡献自己的力量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小旺不正经

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值