【java爬虫】首页显示沪深300指数走势图以及前后端整合部署方法

添加首页

本文我们将在首页添加沪深300指数成立以来的整体走势数据展示,最后的效果是这样的

单独贴一张沪深300整体走势图

 

我感觉从总体上来看指数还是比较稳的,没有特别大的波动,当然,这只是相对而言哈哈。

首先是前端页面

<template><div><el-row class="container"><div class="left-grid"><el-card class="box-card"><template #header><div class="card-header"><span>更新沪深300成分股数据</span></div></template><el-form><el-form-item><el-text>信息更新状态:{{ update_status }}</el-text></el-form-item><el-form-item><el-text>操作:</el-text><el-button type="primary" size="medium" @click="updateCSI300">重新更新信息</el-button></el-form-item></el-form></el-card><el-card><el-tablev-loading="loading":data="table_data":show-header="true":max-height="430"stripe><el-table-columntype="index"label="序号"width="65%"></el-table-column><el-table-column prop="code" label="股票代码"></el-table-column><el-table-column prop="name" label="公司简称"></el-table-column><el-table-column prop="industry" label="所属行业"></el-table-column><el-table-column prop="weight" label="权重占比"></el-table-column></el-table></el-card></div><div class="right-grid" ref="myChart"></div></el-row></div>
</template><script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { getCurrentInstance } from "vue";
export default {data() {return {update_status: "未开始",loading: true,table_data: [],pie_data: [],echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,};},mounted() {this.init();},methods: {init() {var url = "http://localhost:9001/queryAll";axios.get(url).then((response) => {this.table_data = response.data;console.log(response);this.loading = false;}).catch((error) => {console.log(error);this.loading = false;});this.create_pie();},// 绘制饼状图create_pie() {var url = "http://localhost:9001/queryDist";axios.get(url).then((response) => {console.log(response);this.pie_data = [];for (var i = 0; i < response.data.length; i++) {this.pie_data.push({value: response.data[i].weight,name: response.data[i].industry,});}console.log(this.pie_data);var myChart = this.echarts.init(this.$refs["myChart"]);var option = {title: {text: "沪深300行业权重分布", //标题},toolbox: {feature: {dataZoom: {yAxisIndex: "none",},saveAsImage: {},},},legend: {y: 50,textStyle: {fontSize: 14,},},label: {show: true,},series: [{name: "分布", //数据的名字type: "pie", //表示柱状图radius: "70%", //圆的半径center: ["50%", "60%"],label: {formatter: function (params) {console.log(params.name + " " + params.value + "%");return params.name + " " + params.value + "%";},textStyle: {fontSize: 14,fontWeight: "bolder",},color: "inherit",},data: this.pie_data,selectedMode: "single", //选中效果,使选中区域偏离圆心一小段距离,single或者multipleselectedOffset: 10, //偏离圆心的一小段距离},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}).catch((error) => {console.log(error);});},// 更新沪深300成分股数据updateCSI300() {var url = "http://localhost:9001/parse";this.update_status = "更新中";ElMessage("开始更新数据");axios.get(url).then((response) => {console.log(response);// 调用接口成功则返回成功提示框ElMessage({message: "更新数据成功",type: "success",});this.update_status = "更新成功";// 重新初始化数据this.loading = true;this.init();}).catch((error) => {console.log(error);this.update_status = "更新失败";// 调用接口失败则返回失败提示框ElMessage.error("更新数据失败");});},},
};
</script><style scoped>
.card-header {display: flex;justify-content: space-between;align-items: center;
}
.container {display: grid;grid-template-columns: 35% 65%;width: 100%;height: 80vh;
}
.left-grid {background-color: #f0f0f0;border-radius: 2%;padding: 10px;height: 95%;
}
.right-grid {background-color: #f9ecc3;border-radius: 2%;padding: 10px;height: 95%;
}
</style>

对应的后端接口就是添加了获取沪深300指数数据的代码,比较简单,这里不赘述了。

前后端整合部署

我们的项目是前后端分离的项目,但是部署的时候实际上可以将前端页面放到springboot中进行部署,springboot使用theamleaf引擎来分发页面。

这篇文章有介绍前后端整合部署的方法

vue+springboot前后端分离项目整合部署流程_springboot vue前后端分离项目部署-CSDN博客

下面我来介绍一下我们这个项目整合部署的方法

 首先打开命令行,cd到前端项目目录,然后执行 npm run build 命令,执行成功后会看到如下的显示

我们去到项目目录,会看到多了一个dist文件夹

 

我们需要把文件夹中的内容复制到springboot项目中的resource文件夹下面

然后新建一个Controller类用来跳转,里面的内容如下

@Controller
public class IndexController {@RequestMapping("/")public String parse() {return "index";}}

这样一来我们编译出jar包后就可以直接用 9001 端口访问前端页面了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/602389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonOS 通用组件(Button)

本文 我们来看看基础组件中的 Button 这是 ArkTS ui 原生支持的一个组件 用来创建不同样式的按钮 首先 我们还是创建一个最基本的组件结构 Entry Component struct Index {build() {Row() {Column() {}.width(100%)}.height(100%)} }我们可以在 Column 组件中 加入一个button…

【Electron】快速建立Vue3+Vite+Electron Ts项目

git https://github.com/electron-vite/electron-vite-vue 创建项目 npm create electron-vite or pnpm create electron-vite 初始化 pnpm install or pnpm i 启动项目 pnpm dev 打包项目 pnpm build 项目创建成功后默认情况下 窗口是H800 W600 在createWindow 函数…

亚马逊自养号测评:提升商品排名与流量的必要操作

自养号测评是通过使用自主注册的海外买家账号&#xff0c;对商品进行评价&#xff0c;以提升其在平台上的排名和流量的操作。卖家选择自养号这种方式来增强商品的曝光度和吸引更多潜在买家。然而&#xff0c;养号并非易事&#xff0c;需要卖家提高养号技术、掌握相应技巧&#…

java中list,map习题

&#x1f4d1;前言 本文主要是【java】——java中list,map习题的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句…

dubbo的基础知识

dubbo是什么 Dubbo是一个分布式服务框架&#xff0c;是一种高性能的远程通讯框架。它提供了基于Java的RPC&#xff08;远程过程调用&#xff09;通信机制&#xff0c;使得应用之间可以方便地进行远程调用&#xff0c;实现分布式服务的调用和管理。Dubbo提供了服务注册、发现、负…

GPT实战系列-大模型为我所用之借用ChatGLM3构建查询助手

GPT实战系列-https://blog.csdn.net/alex_starsky/category_12467518.html 如何使用大模型查询助手功能&#xff1f;例如调用工具实现网络查询助手功能。目前只有 ChatGLM3-6B 模型支持工具调用&#xff0c;而 ChatGLM3-6B-Base 和 ChatGLM3-6B-32K 模型不支持。 定义好工具的…

【Java集合篇】负载因子和容量的关系

负载因子和容量有什么关系 ✔️典型解析✔️loadfactor为啥默认是0.75F&#xff0c;不是1呢?✔️为什么HashMap的默认负载因子设置成0.75✔️0.75的数学依据是什么✔️0.75的必然因素 ✔️HashMap的初始值设为多少合适? ✔️典型解析 HashMap 中有几个属性&#xff0c;如 cap…

【已解决】js定义对象属性是.如何访问

当变量没有length属性的时候&#xff0c;可能是个对象变量&#xff0c;当有键值对的时候就可能是个对象&#xff0c;读者都知道的是&#xff0c;用typeof(变量)可以查看属性&#xff0c;今天本文解决的问题是如果js定义对象中属性是"点"如何访问 问题再现 var a {…

iPhone 恢复出厂设置后如何恢复数据

如果您在 iPhone 上执行了恢复出厂设置&#xff0c;您会发现所有旧数据都被清除了。这对于清理混乱和提高设备性能非常有用&#xff0c;但如果您忘记保存重要文件&#xff0c;那就是坏消息了。 恢复出厂设置后可以恢复数据吗&#xff1f;是的&#xff01;幸运的是&#xff0c;…

第13课 利用openCV检测物体是否运动了

FFmpeg与openCV绝对是绝配。前面我们已经基本熟悉了FFmpeg的工作流程&#xff0c;这一章我们重点来看看openCV。 在前面&#xff0c;我们已经使用openCV打开过摄像头并在MFC中显示图像&#xff0c;但openCV能做的要远超你的想像&#xff0c;比如可以用它来实现人脸检测、车牌识…

基于平衡优化器算法优化的Elman神经网络数据预测 - 附代码

基于平衡优化器算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于平衡优化器算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于平衡优化器优化的Elman网络5.测试结果6.参考文献7.Matlab代码…

vivado xsim 终端 模拟

只模拟的话直接终端运行会快很多 计数器举例 mkdir srccounter.v module counter(input wire clk,input wire rst_n,output reg[31:0] cnt ); always (posedge clk or negedge rst_n)if(!rst_n)cnt < 31h0;elsecnt < cnt1;endmodule tb.v module tb; wire[31:0] out…

【大厂秘籍】系列 - Java多线程面试题

Java多线程面试题 友情提示&#xff0c;看完此文&#xff0c;在Java多线程这块&#xff0c;基本上可以吊打面试官了 线程和进程的区别 进程是资源分配的最小单位&#xff0c;线程是CPU调度的最小单位 线程是进程的子集&#xff0c;一个进程可以有很多线程&#xff0c;每条线…

Beauty algorithm(三)腮红

查阅资料了解到腮红位于苹果肌处,同样使用关键点确定目标区域,然后对该区域进行渲染达到美妆效果。考虑到如果使用简单的RGB是很难做到特效,本篇采用模板方式进行区域融合。 一、skills 前瞻 1、png图像读取 cv::imread(imgPath, cv::IMREAD_UNCHANGED) IMREAD_UNCHANGE…

小红书 X WSDM 2024「对话式多文档问答挑战赛」火热开赛!

基于大语言模型&#xff08;LLM&#xff09;的对话问答机器人&#xff0c;已经成为当前人工智能领域学术界和工业界共同关注的的热门研究方向之一。在对话过程中&#xff0c;为大模型引入搜索结果&#xff0c;进行检索增强的生成&#xff08;Retrieval Augmented Generation&am…

Go语言并发模式视角思考

犹记得2019年中旬进行知识点的学习和demo的练习&#xff0c;熟悉各种语法和并发调度的场景&#xff0c; 在2019年末开始参与项目实战开发和逻辑梳理 Go语言的接触也是更多探索和业务的拆件&#xff0c;做一些雏形工具&#xff0c;来慢慢的孵化业务生态 后来陆陆续续&#xff…

时间序列预测 — LSTM实现多变量多步负荷预测(Tensorflow):多输入多输出

目录 1 数据处理 1.1 导入库文件 1.2 导入数据集 ​1.3 缺失值分析 2 构造训练数据 3 LSTM模型训练 4 LSTM模型预测 4.1 分量预测 4.2 可视化 1 数据处理 1.1 导入库文件 import time import datetime import pandas as pd import numpy as np import matplotlib.p…

软件测试|教你如何使用UPDATE修改数据

简介 在SQL&#xff08;Structured Query Language&#xff09;中&#xff0c;UPDATE语句用于修改数据库表中的数据。通过UPDATE语句&#xff0c;我们可以更新表中的特定记录或多条记录&#xff0c;从而实现数据的修改和更新。本文将详细介绍SQL UPDATE语句的语法、用法以及一…

【AI视野·今日Robot 机器人论文速览 第六十七期】Mon, 1 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Mon, 1 Jan 2024 Totally 16 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers MURP: Multi-Agent Ultra-Wideband Relative Pose Estimation with Constrained Communications in 3D Environments Authors A…

【高效视频处理】BMF 项目安装与老视频修复体验全流程及总结

一、BMF简介 BMF&#xff08;Babit Multimedia Framework&#xff09;是字节跳动开发的跨平台、多语言、可定制的多媒体处理框架。经过 4 年多的测试和改进&#xff0c;BMF 已经过量身定制&#xff0c;能够熟练地应对我们现实生产环境中的挑战。目前广泛应用于字节跳动的视频串…