佳宸学习和分享笔记的地方

0%

vue.js商城项目(二)(楼层导航)

vue.js商城项目(二)(楼层导航)

轮播图在上个笔记讲了,可以用vant内置轮播图组件也可以用swiper组件,组件化形式写一个楼层推荐

首页布局

先看效果图,大概就是这样

1568898689120

1568898707521

index.js引入路由

1
2
3
4
5
6
7
8
9
10
import ShoppingMall from '@/components/pages/ShoppingMall'
Vue.use(Router)

export default new Router({
routes: [{
path: '/',
name: 'ShoppingMall',
component: ShoppingMall
}]
})

jsonServer模块模拟json数据

(1)安装

$ npm install -g json-server

(2)使用

  • 创建json文件db.json,把需要的数据写进来

  • 1568899075948

  • 使用全局json-server命令,启动mock服务。这个mock服务,管理的数据,就是db.json。

    $ json-server –watch –port 3001 db.json

1568898999140

使用axios获取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
axios({
url: "http://localhost:3001/data",
method: "get"
})
.then(response => {
console.log(response);
if (response.status === 200) {
this.category = response.data.category;
this.advertesPicture = response.data.advertesPicture.PICTURE_ADDRESS;
this.recommendGoods = response.data.recommend;
this.floorName = response.data.floorName
for(let key in this.floorName){
this.floorContent[key] = response.data[key]
}
}
})
.catch(error => {
console.log(error)
})

视频老师给的json数据,获取各种信息

楼层组件化

父组件遍历

1568899469165

1
2
3
4
<!-- 楼层 -->
<div v-for="(item,index) in floorName" :key="index">
<floorComponent :floorData="floorContent[index]" :floorTitle="item"></floorComponent>
</div>

使用v-for遍历这样json数据添加任意个楼层任意个数据都能遍历

1
2
3
4
this.floorName = response.data.floorName
for(let key in this.floorName){
this.floorContent[key] = response.data[key]
}

先取到楼层名对象,然后遍历,

response.data[key]用变量取对象的值必须使用方括号[变量]

通过props传递给子组件

1
2
3
4
5
 <div class="floor-rule">
        <img :src="floorData0.image" width="100%" />
        <div v-for="(item, index) in floorData.slice(1)" :key="index">
          <img :src="item.image" width="100%" />
        </div>

第一个图片最大拎出来,然后再遍历.slice(1)截取第一个以后的对象