项目整体：
将爬取或下载的股票数据存储到MySQL数据库，然后从MySQL数据库读取股票数据：
编写前端代码，展示前端首页：
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<style type="text/css">
::selection {/*当选中文字变换背景色*/
color: blue;
background: skyblue;
}
#minddle{
margin: auto;/**/
position: relative;/*内容位置可移动*/
top: 110px;/*向下移动*/
left: 12px;/*向右移动*/
font-size: 10%;
height: 80%px;
}
#draw1{
position: relative;
right: 240px;
top: 150px;
height: 300px;
width: 300px;
}
#img_ts{
margin: auto;
position: relative;
top: 100px;
}
#draw2{
position: relative;
height: 300px;
width: 300px;
}
#a1:hover {
color: hotpink;
}
#begin{
height: 150px;
width:500px;
font-size: 100px;
text-align: center;
line-height: 150px;
color: white;
}
</style>
</head>
<body style="height:1000px">
<!-- 页眉 -->
<div id="top" class="container-fluid p-2 text-center bg-light text-light fixed-top">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.baidu.com/">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link text-light" href="https://www.baidu.com/">不懂就去百度吧</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="https://cn.bing.com/">还是不懂就去bing</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="https://www.eastmoney.com/">东方财富网</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="搜索">
<button class="btn btn-primary" type="button">搜索</button>
</form>
</div>
</div>
</nav>
<!-- 导航栏结束 -->
</div>
<!-- 顶部结束 -->
<!-- 中部 -->
<div id="minddle" class="container-fluid p-2 text-center">
<!-- 选择框 -->
<div id="option" class="container-fluid p-3">
<c:choose>
<c:when test="${empty page }">
<a id="begin" class="btn btn-primary" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=1"><b>点击查看</b></a>
</c:when>
<c:otherwise>
<a id="toDraw" class="btn btn-primary" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getLine&page=5"><b>查看移动平均线</b></a>
</c:otherwise>
</c:choose>
<c:if test="${not empty msg }">
<br/><h1 style="color: red;">${msg }</h1>
</c:if>
</div>
<!-- 选择框结束-->
<!-- 中间数据展示部分 -->
<div class="container-fluid row p-2">
<!-- 左侧轮播 -->
<div id="left_lb" class="carousel slide col col-sm-2" data-bs-ride="carousel">
<!-- 指标/点 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#left_lb" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#left_lb" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#left_lb" data-bs-slide-to="2"></button>
</div>
<!-- 幻灯片/轮播 -->
<div class="carousel-inner" style="position: relative;top: 35%">
<div class="carousel-item active">
<img src="${pageContext.request.contextPath }/img/1.jpg" alt="1" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/img/2.jpg" alt="2" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/img/3.jpg" alt="3" class="d-block w-100">
</div>
</div>
<!-- 左右控件/图标 -->
<button class="carousel-control-prev" type="button" data-bs-target="#left_lb" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#left_lb" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- 左侧轮播结束 -->
<!-- 中间的起始图片 -->
<div id="dataFrame" class="col-sm-8 p-2">
<c:choose>
<c:when test="${empty page }">
<img src="${pageContext.request.contextPath }/img/股票数据分析.png">
</c:when>
<c:when test="${not empty page.listBean }">
<table class="table table-hover">
<thead>
<tr>
<th>股票代码</th>
<th>交易日期</th>
<th>开盘价</th>
<th>最高价</th>
<th>最低价</th>
<th>收盘价</th>
<th>昨收价</th>
<th>涨跌额</th>
<th>涨跌幅%</th>
<th>成交量(手)</th>
<th>成交额(千元)</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.listBean }" var="bean">
<tr>
<td>${bean.code }</td>
<td>${bean.date }</td>
<td>${bean.f1 }</td>
<td>${bean.f2 }</td>
<td>${bean.f3 }</td>
<td>${bean.f4 }</td>
<td>${bean.f5 }</td>
<td>${bean.f6 }</td>
<td>${bean.f7 }</td>
<td>${bean.f8 }</td>
<td>${bean.f9 }</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="container-fluid row" >
<div class="col-sm-2 p-2">
<form class="d-flex" action="${pageContext.request.contextPath }/HomeServlet?method=getData" method="post">
<input type="text" name="page" placeholder="请输入页码" size="10px"/>
<button id="btn_tz" class="btn btn-primary btn-sm" type="submit">跳转</button>
</form>
</div>
<div class="col-sm-10 p-2">
<ul id="ul_fy" class="pagination justify-content-center">
<li class="page-item"><a class="page-link text-dark">当前:${page.pageNow } / 总共:${page.pageAll}</a></li>
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=1">首页</a></li>
<c:if test="${page.pageNow > 1 }">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageNow - 1 }">上一页</a></li>
</c:if>
<c:if test="${page.pageNow >= 3 and page.pageNow <= page.pageAll }">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageNow - 2 }">${page.pageNow - 2 }</a></li>
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageNow - 1 }">${page.pageNow - 1 }</a></li>
</c:if>
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageNow }">${page.pageNow }</a></li>
<c:if test="${page.pageNow >= 1 and page.pageNow <= page.pageAll-2 }">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageNow + 1 }">${page.pageNow + 1 }</a></li>
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageNow + 2 }">${page.pageNow + 2 }</a></li>
</c:if>
<c:if test="${page.pageNow < page.pageAll}">
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageNow + 1 }">下一页</a></li>
</c:if>
<li class="page-item"><a class="page-link" href="${pageContext.request.contextPath }/HomeServlet?method=getData&page=${page.pageAll}">尾页</a></li>
</ul>
</div>
</div>
</c:when>
</c:choose>
</div>
<!-- 右侧轮播 -->
<div id="right_lb" class="carousel slide col-sm-2" data-bs-ride="carousel">
<!-- 指标/点 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#right_lb" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#right_lb" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#right_lb" data-bs-slide-to="2"></button>
</div>
<!-- 幻灯片/轮播 -->
<div class="carousel-inner" style="position: relative;top: 35%">
<div class="carousel-item active">
<img src="${pageContext.request.contextPath }/img/4.jpg" alt="4" class="d-block w-100" style="width:100%;min-height:100%">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/img/5.jpg" alt="5" class="d-block w-100" style="width:100%;min-height:100%">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath }/img/6.jpg" alt="6" class="d-block w-100" style="width:100%;min-height:100%">
</div>
</div>
<!-- 左右控件/图标 -->
<button class="carousel-control-prev" type="button" data-bs-target="#right_lb" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#right_lb" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- 右侧轮播结束 -->
</div>
</div>
<!-- 中部结束 -->
<!-- 页脚 -->
<div id="bottom" class="container-fluid p-2 text-center bg-dark text-light fixed-bottom">页脚</div>
<!-- 页脚结束 -->
<script type="text/javascript">
$(document).ready(function(){
$("#btn_tz").click(function(){
var input = $('input[name="page"]').val();
var pat = /\d/g;
if(input > 0 && input < ${page.pageAll}){ /* 输入的是数字并且在范围内 */
}else{
alert("请输入 1 - " + ${page.pageAll} + " 的数字");
}
});
});
</script>
</body>
</html>
点击查看：
页面将数据进行分页展示。
然后点击查看移动平均线：
使用的是echarts进行移动平均线的绘制。
绘图代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath }/js/echarts.js"></script>
<title>Draw</title>
<style type="text/css">
::selection {/*当选中文字变换背景色*/
color: blue;
background: skyblue;
}
#option{
position: relative;
top:97px;
}
#draw{
position: relative;
top:100px;
left:25%;
align-self: center;
}
</style>
</head>
<body>
<!-- 页眉 -->
<div id="top" class="container-fluid p-2 text-center bg-light text-light fixed-top">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.baidu.com/">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link text-light" href="https://www.baidu.com/">不懂就去百度吧</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="https://cn.bing.com/">还是不懂就去bing</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="https://www.eastmoney.com/">东方财富网</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="搜索">
<button class="btn btn-primary" type="button">搜索</button>
</form>
</div>
</div>
</nav>
<!-- 导航栏结束 -->
</div>
<!-- 顶部结束 -->
<div class="container-fluid p-2 text-center">
<!-- 选项框 -->
<div id="option" class="container-fluid p-2">
<table class="table text-center">
<thead>
<tr>
<th>
<h1 style="color: hotpink">移动平均线：</h1>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getLine&day=5">5天</a></li>
<li class="page-item"><a class="page-link" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getLine&day=10">10天</a></li>
<li class="page-item"><a class="page-link" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getLine&day=30">30天</a></li>
<li class="page-item"><a class="page-link" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getLine&day=60">60天</a></li>
<li class="page-item"><a class="page-link" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getLine&day=120">120天</a></li>
<li class="page-item"><a class="page-link" type="button" href="${pageContext.request.contextPath }/HomeServlet?method=getLine&day=250">250天</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 选项框结束 -->
</div>
<div class="container-fluid p-2">
<div id="draw" style="width: 1200px;height:800px;"></div>
</div>
<!-- 页脚 -->
<div id="bottom" class="container-fluid p-2 text-center bg-dark text-light fixed-bottom">页脚</div>
<!-- 页脚结束 -->
<h1 id="h1">h1</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#h1").text("加载完成");
<%if(request.getAttribute("line") != null){%>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("draw"));
var data = ${line};
var xAxis = ${xAxis};
// 指定图表的配置项和数据
var option = {
title: {
text: '股票000001.SZ - ${day}移动平均线'
},
tooltip: {},
legend: {
data:['收盘价']
},
xAxis: {
data: xAxis
},
yAxis: {},
series: [{
name: '收盘价',
type: 'line',
data: data
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
<%}%>
});
</script>
</body>
</html>
保存源码在度盘供以后回顾。
有感兴趣并想将之完善的可以访问度盘下载：
链接：https://pan.baidu.com/s/1i2leIo5jdLo6NAX9y2nrFQ
提取码：1ckx
注意修改c3p0的连接池的配置数据。
标签:
Java小项目
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）