做网站公司 深圳信科/怎么做一个自己的网页
目录
编辑
一、今日目标
二、新增the-welcome组件
2.1 template
2.2 script
2.2.1 getStatistic
2.2.2 get30DayStatistic
一、今日目标
上篇文章链接:【wiki知识库】08.添加用户登录功能--前端Vue部分修改-CSDN博客
今天就要实现最后的东西了,就是欢迎页面的展示,在这个页面我展示了总浏览量还有当日的浏览量,以及过去三十日的浏览量信息,但是我的数据都是自己模拟的,所以没有那么多的信息,并且我还改出来了不少的错误,大家知道这个道理就可以。
这一部分要实现数据展览还有点赞功能。
二、新增the-welcome组件
2.1 template
<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图标。
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);} 。。。。。。
整体代码如下。
<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>
这一部分的代码不难,我就不多说这一部分的代码了。
相关文章:

【wiki知识库】09.欢迎页面添加(统计浏览量)Vue修改
目录 编辑 一、今日目标 二、新增the-welcome组件 2.1 template 2.2 script 2.2.1 getStatistic 2.2.2 get30DayStatistic 一、今日目标 上篇文章链接:【wiki知识库】08.添加用户登录功能--前端Vue部分修改-CSDN博客 今天就要实现最后的东西了,…...

ui自动化难点
位置坐标:可以通过滑动等方式实现 颜色显示:UIAuto.DEV (devsleep.com) --此工具可以解决很多属性上无法解决的问题 原理: 对系统控件的选择和点击实现该方法...

静态路由与默认路由和实验以及ARP工作原理
目录 1.静态路由和默认路由 1.1 静态路由 1.2 默认路由 1.3 主要区别总结 2.实验 2.1 实验 2.1.1 实验top 2.1.2 实验要求 2.2 实验配置 2.2.1 ip信息配置 2.2.2 配置静态 2.2.3配置默认 2.3 实验结果查看 3.为什么第一个ping会显示丢包? 3.1 ARP 工…...

美国洛杉矶大带宽服务器的运维与监控
美国洛杉矶的大带宽服务器因其优越的地理位置、高速的网络连接以及充足的带宽资源,在全球范围内享有很高的声誉。为了确保这些服务器的稳定运行和高效服务,运维与监控工作显得尤为重要。以下是一些关于美国洛杉矶大带宽服务器运维与监控方面的科普内容。…...

AtCoder Beginner Contest 367 A~D
本期封面原图 画师えびら A - Shout Everyday 题意 b点睡觉c点起床,问你a点是不是醒着的 思路 直接判断即可,注意处理跨天的情况 代码 #include <bits/stdc.h> #define mod 998244353 using namespace std; typedef long long ll; typedef …...

oracle 保留两位小数
在Oracle数据库中,保留两位小数可以通过多种函数实现,主要包括ROUND、TRUNC和TO_CHAR函数。每种函数都有其特定的使用场景和效果。 1. ROUND函数 ROUND函数用于对数值进行四舍五入操作,保留指定的小数位数。其基本语法为: ROUN…...

Aop切面技术之存储用户信息
一、背景 在我们日常项目中,常常会将用户的认证信息存入缓存中,方便我们在程序执行中,进行获取用户信息。本篇文章主要是介绍使用自定义注解和AOP切面技术进行实现,这也也是非常容易使用的。 二、代码详解 2.1 自定义注解 定义…...

FreeBSD 针对OpenSSH 高危漏洞发布紧急补丁
近日,FreeBSD 项目的维护者针对OpenSSH 高危漏洞发布了紧急补丁。该漏洞被追踪为 CVE-2024-7589,CVSS 得分为 7.4(最高分为 10.0)。通过利用该漏洞,黑客能够在权限提升的情况下远程执行任意代码。 根据上周发布的一份…...

【C语言小项目】五子棋游戏
目录 前言 一、游戏规则 1.功能分析 2.玩法分析 3.胜负判定条件 二、游戏实现思路 三、代码实现与函数封装 1.项目文件创建 2.头文件说明 3.函数封装 1)菜单实现 2)进度条实现 3)main函数实现 4)Game函数 5࿰…...

基于Java语言的能源管理系统-水电气热油数据采集系统
基于Java语言的能源管理系统-水电气热油数据采集系统 介绍 适用于高能耗企业、建筑、工厂、园区的水、电、气、热、油、空压机等能源数据采集、分析、报表; 基于SpringCloud的能源管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管…...

人工智能在肿瘤亚型分类领域的研究进展|顶刊速递·24-08-13
小罗碎碎念 文献日推主题:人工智能在肿瘤亚型分类领域的研究进展 昨天晚上在研究鼻咽癌的病理学诊断指南,看到了下面这段话的时候,我问了自己一个问题——通过AI识别出肿瘤亚型的根本目的是什么?可以衔接哪些具体的下游任务&#…...

Taro+Vue 创建微信小程序
TaroVue 创建微信小程序 一、全局安装 tarojs/cli二、项目初始化三、现在去启动项目吧 一、全局安装 tarojs/cli npm install -g tarojs/cli //安装 npm info tarojs/cli //查看安装信息 如果正常显示版本说明成功了,就直接跳到第二步吧官网说:…...

智能安全守护,寺庙安全用电解决方案
在四川省蓬溪县城北,高峰山以其千年的历史沉淀和独特的文化风貌,默默诉说着道教与佛教交融的传奇。然而,2017年5月31日凌晨的一声巨响,打破了这里的宁静,一场突如其来的大火,让这座承载着无数信徒信仰与梦想…...

加热系统加入达温即停和保温功能
加热系统加入达温即停和保温功能 引言 我们前一节, 是通过控制io口, 直接控制加热的开关, 但是这太简单粗暴了, 如果只是那样, 和普通的家居电器,是没区别的, 我们想要更智能一点, 就是像咱们自己家的热水壶那样, 水烧滚了(水温达到100摄氏度), 就自动停止了. 加热功能&a…...

C++_2_ inline内联函数 宏函数(2/3)
C推出了inline关键字,其目的是为了替代C语言中的宏函数。 我们先来回顾宏函数: 宏函数 现有个需求:要求你写一个Add(x,y)的宏函数。 正确的写法有一种,错误的写法倒是五花八门,我们先来“见不贤而自省也。” // …...

ROS执行多个节点报错(遥控运动及SLAM建图)
今天在实体机器人中同时执行多个ROS节点: roslaunch rei_robot_base oryxbot_base.launchroslaunch robot_joy robot_joy.launchroslaunch oryxbot_slam oryxbot_slam_local.launch结果全部报错退出了 现在换一种执行方式: roscoreroslaunch rei_robot_base oryxbot_base.la…...

Spring Boot项目中实现文件的上传、下载和预览功能
在Spring Boot项目中实现文件的上传、下载和预览功能,可以通过使用Spring MVC的MultipartFile接口来处理文件上传,并使用HttpServletResponse或Resource来实现文件下载和预览。下面是如何实现这些功能的完整示例。 1. 引入依赖 确保在pom.xml中引入了S…...

【JAVA入门】Day21 - 时间类
【JAVA入门】Day21 - 时间类 文章目录 【JAVA入门】Day21 - 时间类一、JDK7前的时间相关类1.1 Date1.2 SimpleDateFormat1.3 Calendar 二、JDK8新增的时间相关类2.1 Date 相关类2.1.1 ZoneId 时区2.1.2 Instant 时间戳2.1.3 ZoneDateTime 带时区的时间 2.2 DateTimeFormat 相关…...

SQL server数据库备份和还原
新手小白都懂的sql server数据库备份和还原 一、备份 1.打开sql server数据库找到 2.展开找到对应的数据库文件 鼠标右击—任务–备份 3.复制名称 4.复制完点击添加 5.点击添加完之后再次点击查找路径 6.分别两个路径 原路径和新路径 (新路径是找到原路径新建了一…...

B站搜索建库架构优化实践
前言 搜索是B站的重要基础功能,需要对包括视频、评论、图文等海量的站内优质资源建立索引,处理来自用户每日数亿的检索请求。离线索引数据的正确、高效产出是搜索业务的基础。我们在这里分享搜索离线架构整体的改造实践:从周期长,…...

XSS反射实战
目录 1.XSS向量编码 2.xss靶场训练(easy) 2.1第一关 2.2第二关 方法一 方法二 2.3第三关 2.4第四关 2.5第五关 2.6第六关 2.7第七关 第一种方法: 第二种方法: 第三个方法: 2.8第八关 1.XSS向量编码 &…...

远程消息传递的艺术:NSDistantObject在Objective-C中的妙用
标题:远程消息传递的艺术:NSDistantObject在Objective-C中的妙用 引言 在Objective-C的丰富生态中,NSDistantObject扮演着至关重要的角色,特别是在处理分布式系统中的远程消息传递。它允许对象之间跨越不同地址空间进行通信&…...

指向派生类的基类指针、强转为 void* 再转为基类指针、此时调用虚函数会发生什么?
指向派生类的基类指针、强转为 void* 再转为基类指针、此时调用虚函数会发生什么? 1、无论指针类型怎么转,类对象内存没有发生任何变化,还是vfptr指向虚函数表,下面是成员变量,这在编译阶段就已经确定好了;…...

操作系统(Linux实战)-进程创建、同步与锁、通信、调度算法-学习笔记
1. 进程的基础概念 1.1 进程是什么? 定义: 进程是操作系统管理的一个程序实例。它包含程序代码及其当前活动的状态。每个进程有自己的内存地址空间,拥有独立的栈、堆、全局变量等。操作系统通过进程来分配资源(如 CPU 时间、内…...

react的setState中为什么不能用++?
背景: 在使用react的过程中产生了一些困惑,handleClick函数的功能是记录点击次数,handleClick函数被绑定到按钮中,每点击一次将通过this.state.counter将累计的点击次数显示在页面上 困惑: 为什么不能直接写prevStat…...

2.2算法的时间复杂度与空间复杂度——经典OJ
本博客的OJ标题均已插入超链接,点击可直接跳转~ 一、消失的数字 1、题目描述 数组nums包含从0到n的所有整数,但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗? 2、题目分析 (1)numsS…...

【CentOS 】DHCP 更改为静态 IP 地址并且遇到无法联网
文章目录 引言解决方式标题1. **编辑网络配置文件**:标题2. **确保配置文件包含以下内容**:特别注意 标题3. **重启网络服务**:标题4. **检查配置是否生效**:标题5. **测试网络连接**:标题6. **检查路由表**࿱…...

Linux 操作系统 --- 信号
序言 在本篇内容中,将为大家介绍在操作系统中的一个重要的机制 — 信号。大家可能感到疑惑,好像我在使用 Linux 的过程中并没有接触过信号,这是啥呀?其实我们经常遇到过,当我们运行的进程当进程尝试访问非法内存地址时…...

黑马前端——days09_css
案例 1 页面框架文件 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compati…...

【Python爬虫】技术深度探索与实践
目录 引言 第一部分:Python爬虫基础 1.1 网络基础 1.2 Python爬虫基本流程 第二部分:进阶技术 2.1 动态网页抓取 2.2 异步编程与并发 2.3 反爬虫机制与应对 第三部分:实践案例 第四部分:法律与道德考量 第五部分&#x…...