JAVAWEB加统计功能以停车场项目为例--【大作业】

大作业与毕设项目系列文章

大作业与毕设项目

梅花 宋代:王安石
墙角数枝梅,凌寒独自开。
遥知不是雪,为有暗香来。

先上效果图吧：

实际统计数据如下：

Servlet

Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，用Java编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互式地浏览和生成数据，生成动态Web内容。
狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。
最早支持Servlet标准的是JavaSoft的Java Web Server，此后，一些其它的基于Java的Web服务器开始支持标准的Servlet。

MVC

Model-View-Controller（MVC）是一种软件架构模式，是软件设计模式的体现 [8-9] ，用于组织代码并分离关注点，广泛应用于用户界面的开发中。该模式将相关程序逻辑划分为三个相互关联的组成部分：模型、视图和控制器 [10]。MVC模式最初用于桌面图形用户界面（Graph User Interface,GUI），但后来因设计Web应用程序而变得流行。许多流行的编程语言都有MVC框架，这些框架促进了MVC模式的实现。

主要组件

MVC 分为三个主要组件：模型（Model）、视图（View）和控制器（Controller）。以下是对 MVC 框架的主要组件的简要介绍，其框架图在概述图中所示。
模型
模型是MVC框架的核心组成部分，它承担着管理应用程序数据和业务逻辑的重要责任。在模型中，数据被有效地管理、存储和操作，包括从各种数据源获取数据、对数据进行验证和处理、执行业务规则等。模型通常包括数据访问对象（Data Access Objects,DAO），用于与数据存储交互，以及实体类来表示应用程序中的核心数据结构。除此之外，模型也负责数据的通知和变化，确保数据变化时其他组件（如视图和控制器）能够及时获取到更新的数据。通过模型的设计，应用程序可以实现清晰的数据管理和业务逻辑，同时保持良好的可维护性、可扩展性和可测试性。同时模型会对数据进行校验和验证，确保数据的完整性、有效性和一致性。这可以通过验证规则、数据约束和业务规则来实现，以防止无效或不良数据进入系统。
在 Smalltalk-80 中，模型类型的设计完全由程序员决定。在使用WebObjects、Rails和Django时，模型类型通常代表应用程序数据库中的一个表。
模型的设计和实现对应用程序的整体质量和性能至关重要。一个良好设计的模型能够提供清晰的数据管理和业务逻辑，同时保持可维护性、可扩展性和可测试性，从而为应用程序的开发和维护提供了基础。
视图
视图是 MVC 框架中的另一个关键组件，它负责将模型的数据以用户友好的方式呈现给用户，并接收用户的输入。在视图中，用户界面元素被设计和排列，以展示应用程序的信息和功能。视图通常包括各种用户界面组件，如文本框、按钮、下拉菜单等，以及对数据的展示和呈现逻辑。与模型相对应的是视图不包含业务逻辑，它专注于数据的展示和用户交互。视图通常与具体的用户界面技术（如 HTML、JSP、Thymeleaf 等）紧密相关，通过视图解析器来将逻辑视图名称映射到实际的视图实现。通过良好设计的视图，用户可以直观地与应用程序交互，并获取所需的信息和功能，从而提升了用户体验和应用程序的易用性。
例如在 Smalltalk-80 中，视图只是模型的视觉表示，不处理用户输入。在使用 WebObjects 时，视图代表完整的用户界面元素，如菜单或按钮，并且确实接收用户输入。然而，在 Smalltalk-80 和 WebObjects中，视图旨在通用且可组合。在使用 Rails 和 Django 时，视图的角色由 HTML 模板扮演，因此在它们的方案中，视图指定了浏览器内用户界面，而不是直接代表用户界面小部件。（Django 选择将这种对象称为“模板”。）这种方法相对较少强调小型、可组合的视图；典型的 Rails 视图与控制器操作具有一对一的关系。
控制器
在 MVC 框架中，控制器不仅仅是接收请求和调用相应的处理方法，它还承担着更多的责任和功能 [13]。控制器负责从用户端接收各种类型的请求，包括 HTTP 请求、AJAX 请求等，然后根据请求的特征和内容进行路由和处理。它可能会根据请求的类型选择不同的处理逻辑，以满足不同类型请求的处理需求。
除了处理请求之外，控制器还负责协调模型和视图之间的交互。它将模型层返回的数据传递给视图层，以便视图能够呈现给用户。控制器可能会在处理过程中进行一些数据处理、格式化或转换，以确保数据能够被正确地显示在视图中。此外，控制器还可能涉及到一些与业务逻辑相关的操作，如数据验证、权限控制、日志记录等，以确保应用程序的安全性和稳定性。控制器的设计应该遵循单一职责原则，即每个控制器应该只负责处理特定类型或特定功能范围内的请求。这有助于提高代码的可维护性和可测试性，使得控制器可以更容易地被重用和扩展。通过良好设计的控制器，可以实现 MVC 框架的分离关注点原则，实现模型、视图和控制器之间的松耦合，从而为应用程序的开发和维护提供了基础。
在 Smalltalk-80 中，控制器处理用户输入事件，如按钮按下或鼠标移动。在任何给定时间，每个控制器都有一个相关的视图和模型，尽管一个模型对象可能会与多个不同的控制器交互。在 Rails 中，来自客户端的请求被发送到“路由器”，该路由器将请求映射到特定控制器的特定方法。在该方法中，控制器与请求数据和任何相关的模型对象交互，并使用视图准备响应。Django 将扮演此角色的对象称为“视图”，而不是控制器。Django 视图是一个函数，它接收 Web 请求并返回 Web 响应。它可能会使用模板来创建响应。

在 MVC 框架中，控制器不仅仅是接收请求和调用相应的处理方法，它还承担着更多的责任和功能 [13]。控制器负责从用户端接收各种类型的请求，包括 HTTP 请求、AJAX 请求等，然后根据请求的特征和内容进行路由和处理。它可能会根据请求的类型选择不同的处理逻辑，以满足不同类型请求的处理需求。
除了处理请求之外，控制器还负责协调模型和视图之间的交互。它将模型层返回的数据传递给视图层，以便视图能够呈现给用户。控制器可能会在处理过程中进行一些数据处理、格式化或转换，以确保数据能够被正确地显示在视图中。此外，控制器还可能涉及到一些与业务逻辑相关的操作，如数据验证、权限控制、日志记录等，以确保应用程序的安全性和稳定性。控制器的设计应该遵循单一职责原则，即每个控制器应该只负责处理特定类型或特定功能范围内的请求。这有助于提高代码的可维护性和可测试性，使得控制器可以更容易地被重用和扩展。通过良好设计的控制器，可以实现 MVC 框架的分离关注点原则，实现模型、视图和控制器之间的松耦合，从而为应用程序的开发和维护提供了基础。

数据操作层

常见的数据操作层一般是使用mybatis
MyBatis本是apache的一个开源项目iBatis，2010年这个项目由apache software foundation迁移到了google code，并且改名为MyBatis。

三层结构解释 所谓三层体系结构，是在客户端与数据库之间加入了一个中间件层，也叫组件层。这里所 说的三层体系，不是指物理上的三层，不是简单地放置三台机器就是三层体系结构，也 不仅仅有B/S应用才是三层体系结构，三层是指逻辑上的三层，即使这三个层放置到一 台机器上。 三层体系的应用程序将业务规则、数据访问、合法性校验等工作放到了中 间层进行处理。通常情况下，客户端不直接与数据库进行交互，而是通过COM/DCOM通 讯与中间层建立连接，再经由中间层与数据库进行交换。

理解三层结构
我们用三层结构主要是使项目结构更清楚，分工更明确，有利于后期的维护和升级．
三层结构包含：表示层（USL），业务逻辑层（BLL），数据访问层（DAL）
1：数据访问层：主要是对原始数据（数据库或者文本文件等存放数据的形式）的操作层，而不
是指原始数据，也就是说，是对数据的操作，而不是数据库，具体为业务逻辑层或表示层提供数据服务。
2：业务逻辑层：主要是针对具体的问题的操作，也可以理解成对数据层的操作，对数据业务逻
辑处理，如果说数据层是积木，那逻辑层就是对这些积木的搭建。
3：表示层：主要表示WEB方式，也可以表示成WINFORM方式，WEB方式也可以表现成
：aspx，如果逻辑层相当强大和完善，无论表现层如何定义和更改，逻辑层都能完善地
提供服务。

项目里可能要用到的技术

TOMCAT

Tomcat服务器是一个免费的应用服务器，他的封面设计以一个动物的素描为灵感，正是因为这个设计理念，所以该项目以一个英文的动物名字为项目名称。因为其免费又好用，功能强大，所以成为大多数程序员的首选。Tomcat是一个小型的，轻量级的软件产品，他在启动运行时占用非常少的内存资源和系统开销，扩展性能比较好，支持多种应用需求，如果一个开发员对某一项功能实现特别感兴趣，他就直接可以将此功能加入到其中。Tomcat可以独立运行，身为网站的服务器，可以加载动态网页。

环境及工具：

要注意的是SSM的项目刚好处于maven 的推出之际，所以有一些的SSM用的是pom.xml 引入包的方式，而有一些则是用的JAR包的方式：本文使用的是pom.xml方式，如果想看JAR包的项目。请参看
《IDEA如何配置SSM项目–【唐诗300首】》里面提供了一个仓库的管理系统。

本系列环境

数据库前端工具：mysql-front (navicat 也可以)
主要是这些跟PHPStudy 2018 整合了，所以有的时候懒的打开navicat
关于环境的重要性，直接看上面的《IDEA如何配置JAVAWEB项目–【唐诗300首】》

项目目录层次

在这里插入图片描述

这里src 为JAVA源文件的默认的目录。
src/main/java – 为源文件目录
src/main/resources – 为配置文件目录
WebContent-- 为WEB目录
这说明了这个项目是SSM，不使用MAVEN技术的项目

idea里的设置

详见视频吧，只要看好技术分类，都是一样的操作。

按着上面的项目设置基本就没有问题了

跑起来

这里先配置一个tomcat 的服务器，按下图的即可。

计划一下修改

• Idea2020.3.* po解的一个小BUG。 更换了2020.1.3
• 增加一个WEB Servlet 的项目的菜单（统计图表）（OK）
• 数据库分析 （OK）
• 图表页面，后台代码。（最复杂。利用AI）

发现了2020.3 idea 里一个不太经常碰到的小BUG。那就是加tomcat 的JAR包的时候，偶尔会出现 项目仍然不能编译Servlet 的问题。

更换了2020.1.3

增加一个WEB Servlet 的项目的菜单

先定位文件
可以利用系统的页面里的文字

找到页面，并增加菜单

因为本次的功能是统计的功能。所以，先加假的链接。

分析数据库

确定统计分析的数据表。

与要统计的SQL。

 select sum(t.temp_money),t.entry_date  from  
 (select *  from temp   where entry_date BETWEEN '2025-04-06' and '2025-04-12' and card_id = '马A55520' ) t
  group by t.entry_date 

加空servlet 空的charts页面

让其跳转正常。
截图略。
详见B站的视频操作步骤。

修后台代码，与前台页面代码

中间多利用AI
饼状图的后台代码：

 //根据查询条件获取对象所有数据列表
    private void getTongjiPie() throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");


        List<Object> list = temp.getChartsforPie();//获取查询后的数据列表
        request.setAttribute("list", list);//将数据存放到request对象中，用于转发给前台页面使用

        request.getRequestDispatcher("/Admin/piecharts.jsp").forward(request, response);
    }

柱状图的后台：
因为柱状图的X轴与Y轴是分开的。
所以传了两个数组：

 //根据查询条件获取对象所有数据列表
    private void getTongjiBar() throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");


        List<Object> list = temp.getChartsforPie();//获取查询后的数据列表
        List<Object> nameList = new ArrayList<>();
        List<Object> valueList = new ArrayList<>();
        for (Object a :list )
        {  Object[] ba = (Object[]) a;
            nameList.add(ba[1]);
            valueList.add(ba[0]);
        }

        request.setAttribute("nameList", nameList);//将数据存放到request对象中，用于转发给前台页面使用
        request.setAttribute("valueList", valueList);//将数据存放到request对象中，用于转发给前台页面使用

        request.getRequestDispatcher("/Admin/barcharts.jsp").forward(request, response);
    }

前台的JSP页面

<%@page import="DAL.*" errorPage="_Error.jsp"%>
<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();//获取项目名称\
    List<Object> pieDatalist = (List<Object>)request.getAttribute("list");
%>
<!doctype html>
<html lang="zh_CN">
<head>
    <base href="<%=path%>"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>饼状图</title>

    <script type="text/javascript" src="<%=path %>/Script/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="<%=path %>/Script/echarts.min.js"></script>

</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>饼状图  <span class="c-gray en">&gt;</span>
</nav>
<div class="page-container">
    <div id="main" style="width: 600px;height:400px;"></div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="r"></span>
    </div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    // 将 Java 对象数组 pieDatalist 转换为 JavaScript 数据数组
    var chartData = [];
    <% if (pieDatalist != null) { 
        for (Object item : pieDatalist) { 
            Object[] dataItem = (Object[]) item;
    %>
        chartData.push({value: <%= dataItem[0] %>, name: '<%= dataItem[1] %>'});
    <% 
        } 
    } 
    %>

    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: ['45%','60%'], // 饼图的半径
                data: chartData // 使用动态生成的数据数组
            }
        ],
        color: ['#E066FF', '#FF9F7F', '#FFD700', '#C9C9C9', '#7EC0EE',  '#a0ee2E'],
    });

    myChart.on('click', function (params) {
        // 在用户点击后控制台打印数据的名称
        console.log(params);
      
    });
</script>
</body>
</html>

表成了饼图：

<%@page import="DAL.*" errorPage="_Error.jsp"%>
<%@page import="java.util.*"%>
<%@ page import="java.text.DateFormat" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();//获取项目名称
    List<Object> nameList = (List<Object>)request.getAttribute("nameList");
    List<Object> valueList = (List<Object>)request.getAttribute("valueList");

%>
<!doctype html>
<html lang="zh_CN">
<head>
    <base href="<%=path%>"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>柱状图</title>

    <script type="text/javascript" src="<%=path %>/Script/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="<%=path %>/Script/echarts.min.js"></script>

</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>柱状图 <span class="c-gray en">&gt;</span>
</nav>
<div class="page-container">
    <div id="main" style="width: 600px;height:400px;"></div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="r"></span>
    </div>
</div>
<script type="text/javascript">

    // 将 Java 对象数组 pieDatalist 转换为 JavaScript 数据数组
    // 将 Java 对象数组 pieDatalist 转换为 JavaScript 数据数组
    var nameData = [];
    <% if (nameList != null) {
        for (Object item : nameList) {
            Date itemDate = (Date)item;
            DateFormat df = new SimpleDateFormat("MM-dd");
            String itemDateS = df.format(itemDate);
    %>
    nameData.push('<%= itemDateS %>');
    <%
        }
    }
    %>

    var valueData = [];
    <% if (valueList != null) {
        for (Object item : valueList) {
    %>
    valueData.push(<%= item %>);
    <%
        }
    }
    %>


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data: ['停车费']
        },
        xAxis: {
            data: nameData // 动态生成X轴标签
        },
        yAxis: {},
        color: [ '#47ae2c', '#FFD700', '#C9C9C9', '#7EC0EE',  '#a0ee2E'],
        series: [{
            name: '销量',
            type: 'bar', // 指定为柱状图
            data: valueData // 转换为数值
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

形成了柱状图：

项目里的细节也比较多，等到下一文里再讲解吧。

因为操作较多，也录制了有声版：

总结

提示：IT是一个要多动手的职业，一定要多练不要贪快：
Model-View-Controller（MVC）是一种软件架构模式，是软件设计模式的体现 [8-9] ，用于组织代码并分离关注点，广泛应用于用户界面的开发中。该模式将相关程序逻辑划分为三个相互关联的组成部分：模型、视图和控制器 [10]。MVC模式最初用于桌面图形用户界面（Graph User Interface,GUI），但后来因设计Web应用程序而变得流行。许多流行的编程语言都有MVC框架，这些框架促进了MVC模式的实现。
理解好MVC模式对于很多的语言的学习都有着不小的帮助。

配套资源

基于JAVAWEB的停车场项目
这个项目已在GITEE上开源。
https://gitee.com/dearmite_admin/parking-lot-management-p