记录JavaWeb的练习小项目
项目整体：
将爬取或下载的股票数据存储到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">
<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/">Logoa>
<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/">还是不懂就去binga>
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">
<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>Drawtitle>
<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/">Logoa>
<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/">还是不懂就去binga>
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">h1h1>
<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的连接池的配置数据。