前端
将接口写入前端
记录后端地址（@/utils/apis）
加入景点模块的接口
1
2
3
4
5
6
7
/**
* 景点模块的接口
*/
const SightApis = {
// 景点列表
sightListUrl: apiHost + '/sight/sight/list/'
}
全局注册
1
2
3
4
export {
...
SightApis
}
创建方法访问地址（@/components/home/HotBox）
引入异步请求库和已经写好的路由地址
1
2
3
4
<script>
import { ajax } from '@/utils/ajax'
import { SightApis } from '@/utils/apis'
</script>
创建访问函数(需要传递参数)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
...
export default {
...
methods: {
/**
* 获取热门景点数据
*/
getDataList () {
ajax.get(SightApis.sightListUrl, {
params: { // 传递GET参数
is_hot: 1
}
}).then(({data}) => { // 解构赋值
this.dataList = data.objects
})
}
},
...
}
</script>
调用函数
1
2
3
4
5
6
7
8
9
10
11
<script>
...
export default {
...
created () {
this.getDataList()
...
}
}
</script>
校正模板中渲染的变量名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<!-- 热门景点 -->
<div class="home-hot-box">
<!-- 顶上导航 -->
<van-cell
title="热门推荐"
icon="/static/home/hot/fire.png"
value="全部榜单"
title-style="text-align:left"
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.main_img" alt=""> // 修改
</div>
<h5 class="van-ellipsis"></h5>
<div class="line-price">
<span class="price">￥</span>起 //修改
</div>
</a>
</div>
<!-- // 景点列表 -->
</div>
</template>
创建方法访问地址（@/components/home/FineBox）
引入异步请求库和已经写好的路由地址
1
2
3
4
<script>
import { ajax } from '@/utils/ajax'
import { SightApis } from '@/utils/apis'
</script>
创建访问函数(需要传递参数)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
...
export default {
...
methods: {
/**
* 获取精选景点数据
*/
getDataList () {
ajax.get(SightApis.sightListUrl, {
params: {
is_top: 1
}
}).then(({data}) => {
this.dataList = data.objects
})
}
},
...
}
</script>
调用函数
1
2
3
4
5
6
7
8
9
10
11
<script>
...
export default {
...
created () {
this.getDataList()
...
}
}
</script>
校正子组件模板中渲染的变量名（@/components/common/ListSight.vue)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<a href="#" class="sight-item">
<!-- 左边的图片 -->
<img :src="localItem.main_img" :alt="localItem.name"> // 修改
<!-- 右边的文字 -->
<div class="right">
<h5></h5>
<van-rate
readonly
v-model="localItem.score"
allow-half
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
<div class="tips">人点评 | 100%满意</div>
<div class="tips light">-</div> // 修改
<div class="line-price">￥ 起</div> // 修改
</div>
</a>
</template>