1、前端热搜榜页面实现

pull/254/head
xjs 4 years ago
parent cf9481d1c3
commit 7bf2aeee58

@ -0,0 +1,9 @@
import request from '@/utils/request'
// 热搜榜接口
export function getTopsearch() {
return request({
url: '/openapi/topsearch/getTopsearch',
method: 'get',
})
}

@ -0,0 +1,125 @@
<template>
<div style="padding: 10px" v-loading="loading">
<el-collapse @change="handleChange">
<el-collapse-item class="el-collapse-item" title="抖音热搜榜" name="1">
<el-card shadow="hover">
<div v-for="douyin in topsearchList.douyinList" :key="douyin.id" class="douyin">
<span>{{ douyin.word }}</span>
<el-divider direction="vertical"></el-divider>
<span style="color: red;margin-left: 25px">{{ douyin.label }}</span>
</div>
</el-card>
</el-collapse-item>
<el-collapse-item class="el-collapse-item" title="微博热搜榜" name="2">
<el-card shadow="hover">
<div v-for="weibo in topsearchList.weiboList" :key="weibo.id" class="douyin">
<span>{{ weibo.hotword }}</span>
<el-divider direction="vertical"></el-divider>
<span style="color: red;margin-left: 25px">{{ weibo.hottag }}</span>
</div>
</el-card>
</el-collapse-item>
<el-collapse-item class="el-collapse-item" title="全网热搜榜" name="3">
<el-card shadow="hover">
<div v-for="allnetwork in topsearchList.allnetworkList" :key="allnetwork.id" class="allnetwork">
<div>
<h3 style="font-weight: 800">{{ allnetwork.title }}</h3>
</div>
<div>
<span>{{ allnetwork.digest }}</span>
</div>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
</div>
</el-card>
</el-collapse-item>
<el-collapse-item class="el-collapse-item" title="百度热搜榜" name="4">
<el-card shadow="hover">
<div v-for="baidu in topsearchList.baiduList" :key="baidu.id" class="baidu">
<div>
<h3 style="font-weight: 800">{{ baidu.title }}</h3>
</div>
<div>
<span>{{ baidu.digest }}</span>
<el-divider direction="vertical"></el-divider>
<span style="color: red;margin-left: 25px">{{ baidu.trend }}</span>
</div>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
</div>
</el-card>
</el-collapse-item>
<el-collapse-item class="el-collapse-item" title="微信热搜榜" name="5">
<el-card shadow="hover">
<div v-for="wechat in topsearchList.wechatList" :key="wechat.id" class="douyin">
<span>{{ wechat.word }}</span>
</div>
</el-card>
</el-collapse-item>
</el-collapse>
<!-- 回到顶部-->
<el-backtop target="" :bottom="100">
</el-backtop>
</div>
</template>
<script>
import {getTopsearch} from "@/api/business/openapi/topsearch";
export default {
name: "index",
data() {
return {
//
loading: true,
//
topsearchList: {},
//
activeNames: ['1']
};
},
created() {
this.getTopsearch()
},
methods: {
//
getTopsearch() {
this.loading = true
getTopsearch().then(res => {
this.topsearchList = res.data
this.loading = false
})
},
handleChange(val) {
}
},
}
</script>
<style scoped>
.el-collapse-item {
/*text-align: center;*/
}
.douyin {
margin-bottom: 20px;
font-size: 15px;
font-weight: 800;
}
.allnetwork {
margin-bottom: 20px;
font-size: 15px;
margin-left: 25px;
}
</style>

@ -48,7 +48,7 @@ public class ApiTopSearchController {
private RedisService redisService;
@GetMapping
@GetMapping("getTopsearch")
@ApiOperation("热搜榜接口")
@Log(title = "获取热搜榜")
@RequiresLogin

@ -44,7 +44,14 @@ public class TianXingTopsearchBaiduFactory implements TopserachFactory<ApiTopsea
ApiTopsearchBaidu apiTopsearchBaidu = new ApiTopsearchBaidu();
JSONObject json = (JSONObject) arrayJson;
apiTopsearchBaidu.setTitle(json.getString("keyword"));
apiTopsearchBaidu.setDigest(json.getString("brief"));
String brief = json.getString("brief");
//截取无用字符
if (brief.contains("查看更多&gt;")) {
brief = brief.substring(0, brief.length() - 8);
}
apiTopsearchBaidu.setDigest(brief);
apiTopsearchBaidu.setHotnum(json.getLong("index"));
apiTopsearchBaidu.setTrend(json.getString("trend"));
return apiTopsearchBaidu;

Loading…
Cancel
Save