跟我一起做一个vue的小项目（七）
先看下我们所做项目的效果
这些数据都是我们在data中定义的，不是从后端数据中请求的。那么
接下来我们使用axios渲染数据
npm install axios --save
每个组件里面的数据都不相同，但是单个的组件去进行数据请求的话，那么ajax请求还是太多了，我们在home.vue中发起一个请求
我们使用mock数据，在static中创建一个mock文件夹写入json文件
vue中提出了一个转发功能，我们写的接口路径就可以直接同线上的一致
{
"ret":true,
"data":{
"swiperList": [{
"id": "001",
"imgUrl": "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/d7bbc21db442366a882e04ddc984669a.jpg_750x200_85e640d9.jpg"
}, {
"id": "002",
"imgUrl": "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/5e02c14d35097f40d656f455837b63eb.jpg_750x200_adebb937.jpg"
}],
"iconList": [{
"id": "003",
"imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
"desc": "景点门票"
}, {
"id": "004",
"imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
"desc": "深圳必游"
}, {
"id": "005",
"imgUrl": "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/cba147cf6cfcea7109d0bff6aac6f626.png",
"desc": "深圳动物园"
}, {
"id":" 006",
"imgUrl":" http://img1.qunarzz.com/piao/fusion/1803/a6/6d97515091789602.png",
"desc":" 世界之窗"
}, {
" id": "007",
"imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/b6/37560ece9c62b502.png",
"desc": "东部华侨城"
}, {
"id": "008",
"imgUrl": "http://img1.qunarzz.com/piao/fusion/1803/a6/6d97515091789602.png",
"desc": "世界之窗"
},
{
"id":" 009",
" imgUrl": "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
"desc":"深圳必游"
} ],
"recommendList": [
{
"id": "001",
"imgUrl": "https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg",
"title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
},
{
"id": "002",
"imgUrl": "https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg",
"title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
},
{
"id": "003",
"imgUrl": "https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg",
"title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
},
{
"id": "004",
"imgUrl": "https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg",
"title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
},
{
"id": "005",
"imgUrl": "https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg",
"title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
}
],
"weekendList": [
{
" id": "001",
"imgUrl": "http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg",
" title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
},
{
" id": "002",
"imgUrl": "http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg",
" title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
},
{
" id": "003",
"imgUrl": "http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg",
" title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
},
{
" id": "004",
"imgUrl": "http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg",
" title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
}, {
" id": "005",
"imgUrl": "http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg",
" title": "百年康惠保重疾",
"desc": "直击市场底价 保障130种高发疾病"
}
]
}
}
config中我们添加如下内容，它主要是对项目做一个转发功能
在home.vue中我们请求这个数据
<template>
<div>
<home-header></home-header>
<home-swiper></home-swiper>
<home-icons></home-icons>
<home-recommend></home-recommend>
<home-weekend></home-weekend>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
},
methods: {
getHomeInfo () {
axios.get('/api/index.json')
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
console.log('res', res)
}
},
mounted () {
this.getHomeInfo()
}
}
</script>
<style>
</style>
我们可以看到数据可以打印出来
接下来我们要将从后台数据（我们模拟的数据）传递给子组件，并让其渲染数据。
我们首先在header中进行city的传值
我们在home.vue写入这个
运行发现city值是可以取到的
我们用同样的方法取其他的值
放一下完整的代码
//home.vue
<template>
<div>
<home-header :city="city"></home-header>
<home-swiper :list="swiperList"></home-swiper>
<home-icons :list="iconList"></home-icons>
<home-recommend :list="recommendList"></home-recommend>
<home-weekend :list="weekendList"></home-weekend>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
},
data () {
return {
city: '',
swiperList: [],
iconList: [],
recommendList: [],
weekendList: []
}
},
methods: {
getHomeInfo () {
axios.get('/api/index.json')
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.city = data.city
this.swiperList = data.swiperList
this.iconList = data.iconList
this.recommendList = data.recommendList
this.weekendList = data.weekendList
}
}
},
mounted () {
this.getHomeInfo()
}
}
</script>
<style>
</style>
//src\pages\home\components\Weekend.vue
<template>
<div>
<div class="recommend-title">周末去哪儿</div>
<ul>
<li class="item border-bottom" v-for="item of list" :key="item.id">
<div class="item-img-wrapper">
<img class="item-img" :src="item.imgUrl" alt=""/>
</div>
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeWeekend',
props: {
list: Array
}
// data () {
// return {
// weekendList: [
// {
// id: '001',
// imgUrl: 'http://img1.qunarzz.com/sight/source/1811/15/66f14e0fd6fbb.jpg_r_640x214_5d69f21d.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '002',
// imgUrl: 'http://img1.qunarzz.com/sight/source/1811/b8/5d599bbdcf8b57.jpg_r_640x214_2ee055e3.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '003',
// imgUrl: 'http://img1.qunarzz.com/sight/source/1505/fa/ca65fde9677de2.jpg_r_640x214_4500e3ff.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '004',
// imgUrl: 'http://img1.qunarzz.com/sight/source/1602/88/bf120edeaea383.jpg_r_640x214_f8591f7b.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '005',
// imgUrl: 'http://img1.qunarzz.com/sight/source/1811/f8/29dfa785277839.jpg_r_640x214_7d051523.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// }
// ]
// }
// }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';
.recommend-title
margin-top:.2rem
line-height:.8rem
background:#eee
text-indent:.2rem
.item
overflow:hidden
.item-img-wrapper
overflow:hidden
height:0
padding-bottom:37.09%
.item-img
width:100%
.item-info
padding:.1rem
.item-title
line-height:.54rem
font-size:.32rem
ellipsis()
.item-desc
line-height:.4rem
color:#ccc
ellipsis()
</style>
//src\pages\home\components\Swiper.vue
<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if="showSwiper">
<!-- slides -->
<swiper-slide v-for="item of list" :key="item.id">
<img class="swiper-img" :src="item.imgUrl">
</swiper-slide>
<!-- <swiper-slide>
<img class="swiper-img" src="">
</swiper-slide> -->
<!-- <swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide> -->
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div> -->
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
props: {
list: Array
},
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
loop: 'true'
}
// swiperList: [{
// id: '001',
// imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/d7bbc21db442366a882e04ddc984669a.jpg_750x200_85e640d9.jpg'
// }, {
// id: '002',
// imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/5e02c14d35097f40d656f455837b63eb.jpg_750x200_adebb937.jpg'
// }]
}
},
computed: {
showSwiper () {
return this.list.length
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background:#fff !important
.wrapper
overflow:hidden
width:100%
height:0
padding-bottom:26.67%
background:#eee
.swiper-img
width:100%
</style>
//src\pages\home\components\Recommend.vue
<template>
<div>
<div class="recommend-title">热销推荐</div>
<ul>
<li class="item border-bottom" v-for="item of list" :key="item.id">
<img class="item-img" :src="item.imgUrl" alt=""/>
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
<button class="item-button">查看详情</button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeRecommend',
props: {
list: Array
}
// data () {
// return {
// recommendList: [
// {
// id: '001',
// imgUrl: 'https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '002',
// imgUrl: 'https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '003',
// imgUrl: 'https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '004',
// imgUrl: 'https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// },
// {
// id: '005',
// imgUrl: 'https://cdn.11bee.com/large_product_pic/0908_ZJ5301QZ5302_large_product_abbreviatedPic.jpg',
// title: '百年康惠保重疾',
// desc: '直击市场底价 保障130种高发疾病'
// }
// ]
// }
// }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';
.recommend-title
margin-top:.2rem
line-height:.8rem
background:#eee
text-indent:.2rem
.item
overflow:hidden
display:flex
height:1.9rem
.item-img
width:1.7rem
height:1.7rem
padding:.1rem
.item-info
flex:1
padding:.1rem
min-width:0
.item-title
line-height:.54rem
font-size:.32rem
ellipsis()
.item-desc
line-height:.4rem
color:#ccc
ellipsis()
.item-button
margin-top:.16rem
background:#ff9300
padding:0 .2rem
border-radius:.06rem
line-height:.44rem
</style>
//src\pages\home\components\Icons.vue
<template>
<div class="icons">
<swiper :options="swiperOption">
<!-- 这个是轮播的页数 -->
<swiper-slide v-for="(page,index) of pages" :key="index">
<!-- 这个是图标在每一页 -->
<div class="icon" v-for="item of page" :key="item.id">
<div class="icon-img">
<img class="icon-img-content" :src="item.imgUrl" alt="" >
</div>
<p class="icon-desc">{{item.desc}}</p>
</div>
</swiper-slide>
<!-- <swiper-slide>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="" >
</div>
<p class="icon-desc">热门景点</p>
</div>
</swiper-slide> -->
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeIcons',
props: {
list: Array
},
data () {
return {
swiperOption: {
autoplay: false
}
}
},
// data () {
// return {
// iconList: [{
// id: '001',
// imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
// desc: '景点门票'
// }, {
// id: '002',
// imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
// desc: '深圳必游'
// }, {
// id: '003',
// imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png',
// desc: '海洋馆'
// }, {
// id: '004',
// imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/bda58ffc3016edad84e656e8a94b0321.png',
// desc: '广州融创'
// }, {
// id: '005',
// imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/cba147cf6cfcea7109d0bff6aac6f626.png',
// desc: '深圳动物园'
// }, {
// id: '006',
// imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/a6/6d97515091789602.png',
// desc: '世界之窗'
// }, {
// id: '007',
// imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/b6/37560ece9c62b502.png',
// desc: '东部华侨城'
// }, {
// id: '008',
// imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/a6/6d97515091789602.png',
// desc: '世界之窗'
// },
// {
// id: '009',
// imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
// desc: '深圳必游'
// } ]
// }
// },
computed: {// 自带缓存
pages () {
// 对轮播页数的处理 由函数返回来的数据
const pages = []// 循环的页数
// 循环项，循环项下标
this.list.forEach((item, index) => {
const page = Math.floor(index / 8)// 当前下标中的数据应该展示在轮播图的第几页
if (!pages[page]) {
pages[page] = []
}
pages[page].push(item)
})
return pages
}
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.icons >>> .swiper-container
height:0
padding-bottom:50%
.icons
margin-top:0.1rem
.icon
position:relative
float:left
width:25%
padding-bottom:25%
overflow:hidden
height:0
.icon-img
position:absolute
top:0
left:0
right:0
bottom:0.44rem
box-sizing:border-box
padding:.1rem
.icon-img-content
height:100%
display:block
margin:0 auto
.icon-desc
position:absolute
left:0
right:0
bottom:0
height:.44rem
line-height:.44rem
color:$darkTextColor
text-align:center
ellipsis()
</style>
//src\pages\home\components\Header.vue
<template>
<div class="header">
<div class="header-left">
<div class="iconfont back-icon"></div>
</div>
<div class="header-input">
<span class="iconfont"></span>
输入城市/游玩主题</div>
<div class="header-right">
{{this.city}}
<span class="iconfont arrow-icon"></span>
</div>
</div>
</template>
<script>
export default {
// 1rem = html font-size=50px
name: 'HomeHeader',
props: {
city: String
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
line-height:0.86rem
background:$bgColor
color:#fff
display:flex
.header-left
width:0.64rem
float:left
.back-icon
text-align:center
font-size:0.4rem
.header-input
margin-top: 0.12rem;
line-height: 0.64rem;
-webkit-box-flex: 1;
-ms-flex: 1;
margin-bottom: 0.12rem;
flex: 1;
background: #fff;
padding-left: 0.1rem;
border-radius: 0.1rem;
color: #ccc;
.header-right
width:1.24rem
float:right
text-align:center
.arrow-icon
margin-left:-.04rem
font-size:.24rem
</style>
跟我一起做一个vue的小项目（七）的更多相关文章
- 跟我一起做一个vue的小项目（二）
这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...
- 跟我一起做一个vue的小项目（八）
接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...
- 跟我一起做一个vue的小项目（五）
接下来我们要做的是热门推荐页面,我们写一个推荐组件 使用的方法也是前端data中的数据渲染到页面上面,这里对文字过长取省略号的方法不成功使用了一个小技巧 使用了min-width:0 我们来看完整的代 ...
- 跟我一起做一个vue的小项目（APPvue2.5完结篇）
先放一下这个完结项目的整体效果 下面跟我我一起进行下面项目的进行吧~~~ 接下来我们进行的是实现header的渐隐渐显效果,并且点击返回要回到首页 我们先看效果 在处理详情页向下移动过程中,heade ...
- 跟我一起做一个vue的小项目（四）
接下来我们进行的是轮播页面下面的导航页的开发 我们需要的是实现轮播页下面的图标,并且实现轮播效果 这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这 ...
- 跟我一起做一个vue的小项目（十一）
接下来我们进行的是详情页动态路由及banner布局 先看页面的效果 下面是代码部分 <template> <div> <div class="banner&qu ...
- 跟我一起做一个vue的小项目（十）
接下来我们对城市列表页面进行优化,除了对数据优化,也会进行节流处理 //src\pages\city\components\Alphabet.vue <template> <ul c ...
- 跟我一起做一个vue的小项目（三）
接下来我们进行轮播的开发 安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在m ...
- 跟我一起做一个vue的小项目（九）
接下来我们进行的就是城市列表页面数据额动态渲染. 也是在mock数据,进行动态渲染 //city.json { "ret": true, "data":{ &q ...
随机推荐
- AndroidStudio 添加翻译插件
添加方式 第一步 在AndroidStudio的菜单栏里找到 File > Settings > 点击 . 第二步 点击Plugins > 在点击Marketplace 等待插件列表 ...
- 廖雪峰Java14Java操作XML和JSON-2JSON-1Json介绍
JSON是一种类似JavaScript对象的数据表示格式 JavaScript Object Notation 去除了JavaScript的执行语句 仅保留数据 JSON格式: 仅保留UTF-8编码 ...
- ThinkPHP 读取数据
在ThinkPHP中读取数据的方式很多,通常分为读取数据.读取数据集和读取字段值. 步进电机和伺服电机 数据查询方法支持的连贯操作方法有: 连贯操作 作用 支持的参数类型 where 用于查询或者更新 ...
- sqlite3加密
最近因为工作原因,需要使用sqlite数据库.sqlite数据库小并且使用方便,感觉挺不错的.但有一个不足就是没有对数据库进行加密,不过好的是sqlite预留有加密的接口,我们可以直接调用即可.我也是 ...
- IDEA启动springboot项目一直build
启动main方法后,项目一直在不断的build,期间截了两张一闪而过的提示 我用的是Run Dashboard面板,不论是通过删除configuration,rebuild,删除IDEA缓存都没有效果 ...
- 使用WCF上传文件
在WCF没出现之前,我一直使用用WebService来上传文件,我不知道别人为什么要这么做,因为我们的文件服务器和网站后台和网站前台都不在同一个机器,操作人员觉得用FTP传文件太麻 ...
- Hibernate（五）之一对多&多对一映射关系
既然我们讲到了一对多和多对一关系,必然要提到多表设计的问题.在开发中,前期需要进行需求分析,希求分析提供E-R图,根据ER图编写表结构. 我们知道表之间关系存在三种: 一对多&多对一:1表(主 ...
- Django项目: 3.用户注册功能
本章内容的补充知识点 导入库的良好顺序: 1.系统库 2.django库 3.自己定义的库(第三方库) redis缓存数据库的数据调用速度快,但是不利于长时间保存. mysql用于长时间存储,但是调用 ...
- appscan如何扫描移动应用APP
1.前置条件:让手机和电脑处于同一WIFI下 1打开appscan,选择手动探索/外部设备. 2在弹出的对话框页面点击右上角“记录代理配置”. 3在弹出的页面选择记录代理页签,设置Appscan代理端 ...
- apache+flask部署
wsgi方式 1.安装apache 1.解压httpd并进行安装 # tar zxvf httpd-2.2.15.tar.gz # cd httpd-2.2.15 # ./configure - ...