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

小旺不正经 2021-11-25 13:38:57
vue django 旅游 旅游网 vue+django

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

版权声明
本文为[小旺不正经]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_42403632/article/details/121530367

  1. Utilisez Python pour proposer l'année de la colonne de date dans les deux CSV, faire une nouvelle colonne, puis combiner les deux tableaux CSV en un seul tableau avec la colonne de date et le numéro d'identification.
  2. 关于#python#的问题,请各位专家解答!
  3. ***
  4. ***
  5. 關於#python#的問題,請各比特專家解答!
  6. S'il vous plaît répondre aux questions de Python!
  7. About the import of Python class
  8. Magic Python property decorator: 1 line of code makes Python methods become properties in seconds
  9. Python 音频调整音量(附代码) | Python工具
  10. Python programming ideas [series of articles]
  11. Python crawler programming idea (67): modify nodes using pyquery
  12. Python crawler programming idea (66): using pyquery to obtain node information
  13. Python crawler programming idea (65): find nodes using pyquery
  14. Python crawler programming idea (64): using CSS selectors in pyquery
  15. Python crawler programming idea (63): basic knowledge of pyquery
  16. Python crawler programming idea (62): project practice: capturing cool dog online red song list
  17. Python crawler programming idea (61): project practice: capturing rental information
  18. Python crawler programming idea (60): get CSS selector code through browser
  19. Python爬虫编程思想(85):在Python中使用非关系型数据库
  20. Volume de réglage audio Python (avec Code) | outils Python
  21. Python crawler programming idea (59): get attribute value and text with beautiful soup CSS selector
  22. Python crawler programming idea (58): nested selection nodes with beautiful soup CSS selectors
  23. Python crawler programming idea (57): basic usage of CSS selector in beautiful soup
  24. Python crawler programming idea (56): find method of beautiful soup method selector
  25. Python crawler programming idea (55): find of beautiful soup method selector_ All method
  26. Python crawler programming idea (54): use beautiful soup to select sibling nodes
  27. Python crawler programming idea (53): use beautiful soup to select the parent node
  28. Django3.0 solves the problem of error reporting in reverse parsing
  29. Precautions for Python crawler
  30. Python 3 crawler series (1) -- climbing blind date websites
  31. Python到底是什么?为什么要学Python?
  32. #yyds干货盘点#Pandas数据清洗实用指南
  33. Python打包exe文件无法运行
  34. Two common ways to save files in Python
  35. #yyds幹貨盤點#Pandas數據清洗實用指南
  36. Yyds Dry Inventory pandas Data Cleaning Practical Guide
  37. PYTHON用LSTM长短期记忆神经网络的参数优化方法预测时间序列洗发水销售数据
  38. Python集成学习:自己编写构建AdaBoost分类模型可视化决策边界及sklearn包调用比较
  39. Python 3 makes a search software
  40. Python 3 simulated microblog login
  41. Using Python 3 to make practical software for drawing modification
  42. About HTML (acceptable to Python)
  43. Python集成學習:自己編寫構建AdaBoost分類模型可視化决策邊界及sklearn包調用比較
  44. PYTHON用LSTM長短期記憶神經網絡的參數優化方法預測時間序列洗發水銷售數據
  45. Python Integrated Learning: Writing and Constructing adaboost Classification Model Visualized decision Boundary and sklearn package Calling Comparison
  46. Python prédit les données de vente de shampooing de séries chronologiques en utilisant la méthode d'optimisation des paramètres du réseau neuronal de mémoire à court et à long terme lstm
  47. [zero basics of Python to introduction] a prerequisite for Python preparatory knowledge -- basic coding specification of Python
  48. OpenCV对比度亮度变换竟能用来去水印(附Python/C++源码)
  49. [zero basics of Python to getting started] a prerequisite for Python preparatory knowledge -- installing the visualization tool pycharm
  50. The test modifies main.py in micro python
  51. Microphoton experimental circuit board based on mm32f3273 - does not work normally
  52. Run micropathon on mm32f3273 to test performance
  53. Design mm32f3277 micro Python experimental board with SD card
  54. Mm32f3277 corresponding interface files during microphoton migration
  55. Mm32f3277 microphoton experimental board design and software testing
  56. Making and testing mm32f3277 microphoton minimum circuit board
  57. Download mm32-link program automatically with Python simulated mouse
  58. A curriculum of "artificial intelligence Python machine learning and deep learning"
  59. Test the basic functions of mm32 microphoton test circuit board
  60. Test the basic functions of the mm32f3277 micro Python development board flying one by one