一、今日目标
上篇文章链接：【wiki知识库】08.添加用户登录功能--前端Vue部分修改-CSDN博客 今天就要实现最后的东西了，就是欢迎页面的展示，在这个页面我展示了总浏览量还有当日的浏览量，以及过去三十日的浏览量信息，但是我的数据都是自己模拟的，所以没有那么多的信息，并且我还改出来了不少的错误，大家知道这个道理就可以。
这一部分要实现数据展览还有点赞功能。
二、新增the-welcome组件
2.1 template
代码语言：javascript复制<template>
<span>欢迎</span>
<div>
<a-row>
<a-col :span="12">
<a-card>
<a-row>
<a-col :span="12">
<a-statistic title="总阅读量" :value="statistic.viewCount">
<template #suffix>
<UserOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="12">
<a-statistic title="总点赞量" :value="statistic.voteCount">
<template #suffix>
<like-outlined />
</template>
</a-statistic>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :span="12">
<a-card>
<a-row>
<a-col :span="12">
<a-statistic title="今日增长阅读" :value="statistic.todayViewCount" style="margin-right: 50px">
<template #suffix>
<UserOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="12">
<a-statistic title="今日增长点赞" :value="statistic.todayVoteCount">
<template #suffix>
<like-outlined />
</template>
</a-statistic>
</a-col>
</a-row>
</a-card>
</a-col>
</a-row>
<br>
<br>
<a-row>
<a-col :span="24" id="main-col">
<div id="main" style="width: 100%;height:300px;"></div>
</a-col>
</a-row>
</div>
</template>2.2 script
这一部分有两个方法需要说一下。
2.2.1 getStatistic
statistic是用来存储浏览量和点赞量数据的，这里总共需要四个数据。
- viewCount：总浏览量
- voteCount：总点赞量
- todayViewCount：今日浏览量
- todayVoteCount：今日点赞量
const getStatistic = () => {
axios.get('/ebook-snapshot/get-statistic').then((response) => {
const data = response.data;
if (data.success) {
const statisticResp = data.content;
statistic.value.viewCount = statisticResp[0].viewCount;
statistic.value.voteCount = statisticResp[0].voteCount;
statistic.value.todayViewCount = statisticResp[0].viewIncrease;
statistic.value.todayVoteCount = statisticResp[0].voteIncrease;
}
});
};2.2.2 get30DayStatistic
这个也很好理解，我们从后端调出来每一天的总浏览量和总点赞数还有当日的浏览量和点赞数之后，以日期为x轴，当日阅读数为y轴构建echarts图标。
代码语言：javascript复制 const get30DayStatistic = () => {
axios.get('/ebook-snapshot/get-30-statistic').then((response) => {
const data = response.data;
if (data.success) {
const statisticList = data.content;
init30DayEcharts(statisticList)
}
});
};
const init30DayEcharts = (list: any) => {
const mainDom = document.getElementById('main-col');
if (mainDom) {
mainDom.innerHTML = '<div id="main" style="width: 100%;height:300px;"></div>';
}
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('main'));
const xAxis = [];
const seriesView = [];
const seriesVote = [];
for (let i = 0; i < list.length; i ) {
const record = list[i];
xAxis.push(record.date);
seriesView.push(record.viewIncrease);
seriesVote.push(record.voteIncrease);
}
。。。。。。整体代码如下。
代码语言：javascript复制<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import axios from 'axios';
declare let echarts: any;
export default defineComponent({
name: 'the-welcome',
setup () {
const statistic = ref();
statistic.value = {};
const getStatistic = () => {
axios.get('/ebook-snapshot/get-statistic').then((response) => {
const data = response.data;
if (data.success) {
const statisticResp = data.content;
statistic.value.viewCount = statisticResp[0].viewCount;
statistic.value.voteCount = statisticResp[0].voteCount;
statistic.value.todayViewCount = statisticResp[0].viewIncrease;
statistic.value.todayVoteCount = statisticResp[0].voteIncrease;
}
});
};
const init30DayEcharts = (list: any) => {
const mainDom = document.getElementById('main-col');
if (mainDom) {
mainDom.innerHTML = '<div id="main" style="width: 100%;height:300px;"></div>';
}
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('main'));
const xAxis = [];
const seriesView = [];
const seriesVote = [];
for (let i = 0; i < list.length; i ) {
const record = list[i];
xAxis.push(record.date);
seriesView.push(record.viewIncrease);
seriesVote.push(record.voteIncrease);
}
// 指定图表的配置项和数据
const option = {
title: {
text: '30天趋势图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['总阅读量', '总点赞量']
},
grid: {
left: '1%',
right: '3%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis
},
yAxis: {
type: 'value'
},
series: [
{
name: '总阅读量',
type: 'line',
data: seriesView,
smooth: true
},
{
name: '总点赞量',
type: 'line',
data: seriesVote,
smooth: true
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
};
const get30DayStatistic = () => {
axios.get('/ebook-snapshot/get-30-statistic').then((response) => {
const data = response.data;
if (data.success) {
const statisticList = data.content;
init30DayEcharts(statisticList)
}
});
};
onMounted(() => {
getStatistic();
get30DayStatistic();
});
return {
statistic
}
}
});
</script>这一部分的代码不难，我就不多说这一部分的代码了。
