随笔都是学习笔记
随笔仅供参考，为避免笔记中可能出现的错误误导他人，请勿转载。
记录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">
<!-- 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的连接池的配置数据。

 

posted on 2022-06-06 17:58  时间完全不够用啊  阅读(155)  评论(0)  编辑  收藏  举报

Copyright © 2024 时间完全不够用啊
Powered by .NET 8.0 on Kubernetes Powered By博客园