Java综合项目开发

原创于 2025-06-29 10:58:04 发布 · 560 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言

一、WEB概述

1.1 JAVAWEB简介

用 Java 技术来解决相关 web互联网领域的技术栈，使用 JAVAEE 技术体系开发企业级互联网项

目。项目规模和架构模式与JAVASE阶段有着很大的差别，在互联网项目下，首先需要明白客户端

和服务器的概念。

客户端：

与用户进行交互，用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递

数据。如手机App，微信小程序，PC端程序，PC浏览器，以及一些其他设备。

服务端：

与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的

数据。

“服务器”是一个非常宽泛的概念。

: 服务器是计算机的一种，它比普通计算机运行更

快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是

火车系统等大型设备）提供计算或者应用服务。

: 服务器其实就是安装在计算机上的

一个软件，根据其作用的不同又可以分为各种不同的服务器，例如应用服务器、数据库服务器、

Redis服务器、DNS服务器、xp服务器等等。

综上所述，服务器其实就是一台(或者一个集群) 安装了服务器软件的高性能计算机。

1.2 JAVAWEB技术栈

客户端-前端部分：

HTML CSS JavaScript ES6 Nodejs npm vite vue3 router pinia axios element-plus ...

服务端-后端部分：

HTTP xml Tomcat Servlet Request Response Cookie Sesssion Filter Listener MySQL JDBC Druid 
Jackson lombok jwt ...

1.3 JAVAWEB交互模式

请求：

客户端向服务端传递数据的主要方式之一，客户端主动向服务端发送请求，交给服务端处

理。请求只能是客户端向服务端。

响应：

服务端向客户端传递数据的主要方式之一，在接收请求后开始对数据进行处理，将数据发

送给客户端。响应只能是服务端向客户端

1.4 JAVAWEB的CS和BS模式

CS模式： Client-Server模式/客户端-服务端模式，该模式特点如下。

1 程序分两部分，一部分是客户端需要安装的程序，一部分是要部署在服务器上的程序；

2 用户需要在硬件设备或者操作系统中，下载安装特定的客户端程序才可以使用；

3 程序运行的压力由客户端和服务端共同承担；

4 可以借助客户端运算资源，对数据继续处理，一般可以有较好的画质和展现效果；

5 程序更新时，往往需要同时更新客户端和服务端两部分；

6 跨平台性能一般，不同的平台未必都有对应的客户端程序；

7 开发成本较高，要开发服务端和客户端程序，要为不同的客户端开发不同客户端程序；

BS模式 Browser-Server模式

1 程序就一部分，只要部署在服务器上即可；

2 无论用户使用什么设备和操作系统，只要有一个安装任意一款浏览器即可；

3 程序运行的压力主要由服务端承担；

4 客户端承担的计算压力小，可以对数据进行简单的继续处理，但是不像CS模式那些可以获得较好的画

质和展现效果；

5 程序更新时，只需要同时服务端部分；

6 跨平台性能优秀，只要有一个浏览器，到处都可以使用；

7 开发成本略低，不必为不同的客户端开发不同客户端程序

模式选择：对于JAVA程序员来说，开发的是服务端代码，所有无论前端是何种类型的客户端，只

要按照接口文档要求开发后端功能即可，前后端分离模式下，我们可以在几乎不接触前端的状态

下完成开发。

1.5 JAVAWEB实现前后端分离

非前后端分离：

1 开发不分离：程序员既要编写后端代码，又要去修改甚至编写前端代码，程序员的工作压力较

大。

2 部署不分离：使用了后端动态页面技术(JSP,Thymeleaf等)，前端代码不能脱离后端服务器环境，必须部署在一起。

前后端分离：

1 开发分离：后端程序员只要按照接口文档去编写后端代码，无需编写或者关系前端代码，前后端

程序员压力都降低。

2 部署分离：前端使用单独的页面动态技术，通过VUE等框架，工程化项目，前端项目可以部署到

独立的服务器上。

二、HTML&CSS

1.HTML入门

1.1 HTML&CSS&JavaScript的作用

HTML 主要用于网页主体结构的搭建：

CSS 主要用于页面元素美化：

JavaScript 主要用于动态处理页面元素：

1.2 什么是HTML

HTML是‌Hyper Text Markup Language‌的缩写，意为超文本标记语言。它的主要作用是：

搭建网页结构‌：通过标签（如<html>、<head>、<body>等）来构建网页的基本框架，定义网页的层级关系。
展示网页内容‌：嵌入文本、图片、音频、视频等多媒体资源，以及创建超链接，实现网页间的跳转，丰富网页的信息呈现。
增强网页功能‌：结合CSS和JavaScript等技术，可以实现网页的样式美化和交互功能，提升用户体验。

此外，HTML5作为HTML的最新版本，在2008年正式发布，并在后续年份中不断完善，引入了更多语义化标签和多媒体支持等新特性。

1.3什么是超文本

HTML文件本质上是文本文件，但普通的文本文件只能显示字符。‌HTML通过一系列标签将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文件通过这些标签引入其他网页、图片、音频、视频等多媒体资源，从而让网页呈现丰富的内容‌

HTML是一种‌标记语言‌，与编程语言如Java不同，它由一系列‌标签‌组成，不具备常量、变量、流程控制、异常处理等编程功能。HTML的特点包括：

‌标签构成‌：HTML标签有固定含义，决定了页面元素的显示效果。如标签定义段落，<input>标签定义输入字段。
‌双标签与单标签‌：双标签由开始标签和结束标签构成，如...；单标签则自闭合，如<input />。
‌属性‌：标签可包含属性，如<a href="http://www.xxx.com">中，href是属性名，
‌HTML基础结构‌
‌文档声明‌：HTML文件中首行的<!DOCTYPE html>，用于告知浏览器文档的基本信息及遵循的语法标准。
‌根标签‌：<html></html>作为整个文档的根，其他所有标签均包含于此。
‌头部元素‌：<head></head>为第一个一级子标签，包含title、script、style、link、meta等标签，用于定义文档的头部信息。
‌主体元素‌：<body></body>为第二个一级子标签，包含网页的主体内容，即浏览器窗口内显示的部分。
‌注释‌：使用进行文档注释

HTML入门程序

‌第一步‌：准备一个纯文本文件，拓展名为html。

‌第二步‌：使用记事本打开网页，在网页内开发代码。具体代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    hello html!!!
</body>
</html>

‌第三步‌：使用浏览器打开文件，查看显示的内容，即“hello html!!!”。

关于HTML概念词汇的文字解释：

‌标签‌：
代码中的一个< >（尖括号）包围的内容称为一个标签。标签分为双标签和单标签，双标签成对出现，如；单标签单独出现，如 。

‌属性‌：
属性位于开始标签中，用于定义标签的一些特征。属性以“属性名=属性值”的形式出现，如<body bgcolor="red">中的bgcolor="red"就是一个属性。

‌文本‌：
文本位于双标签中间，包含空格、换行等结构，是标签所包围的具体内容。

‌元素‌：
元素是经过浏览器解析后的完整标签，包括标签、属性和文本。例如，这是示例页面就是一个元素，其中和是标签，这是示例页面是文本，而整个内容构成了一个元素。

关于HTML语法规则的文字信息：

‌根标签‌：根标签是<html></html>，有且只能有一个。
‌标签关闭‌：无论是双标签还是单标签，都需要正确关闭。例如， 是单标签的正确关闭形式。
‌标签嵌套‌：标签可以嵌套，但不能交叉嵌套。这意味着一个标签必须完全包含在另一个标签内部。
‌注释语法‌：注释的语法为，注意不能嵌套其他注释。
‌属性规则‌：属性必须有值，且值必须加引号。在HTML5中，如果属性名和值相同，可以省略属性值。
‌字符串引号‌：HTML中不严格区分字符串使用单双引号，即可以使用单引号'或双引号"来包围属性值。
‌大小写规则‌：HTML标签不严格区分大小写，但是不能大小写混用。为了保持代码的一致性，建议统一使用小写。
‌自定义标签‌：HTML中不允许自定义标签名，强行自定义则无效。所有标签都应遵循HTML标准。
‌文档结构‌：每个HTML页面都会有一个基本的结构标签，如<head>、<body>等，用于组织页面内容。
‌开发工具与声明‌：包括文档类型声明<!DOCTYPE html>，它告诉浏览器使用何种HTML版本来显示网页，以及设置语言种类和字符集的标签，如<html lang="zh-CN">和<meta charset="UTF-8" />。

2.HTML常见标签

‌标题标签说明‌：

标题标签用于定义页面上的标题性内容。

‌标题级别‌：

‌h1‌：一级标题
‌h2‌：二级标题
‌h3‌：三级标题
‌h4‌：四级标题
‌h5‌：五级标题
‌h6‌：六级标题

这些标题标签通常位于HTML文档的<body>部分，用于结构化地展示网页内容

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

段落标签说明‌：

段落标签的定义‌：
段落标签一般用于定义一些在页面上要显示的大段文字。

‌段落标签的功能‌：
多个段落标签之间可以实现自动分段的效果。

‌段落标签的示例‌：
在HTML代码中，段落标签是通过和来定义的，例如：HTML is a very popular fore-end technology.。其中，是开始标签，是结束标签，它们一起构成了一个完整的段落标签。开始标签和结束标签之间的部分被称为文本标签体，也简称标签体。

‌段落标签的实际应用‌：
在网页设计中，可以使用段落标签来组织文本内容，使网页更加清晰易读。例如，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>算力产业发展概况</title>
</head>
<body>
    <p>记者从工信部了解到，近年来我国<strong>算力产业规模</strong>快速增长，年增长率近30%，算力规模排名<strong>全球第二</strong>。</p>
    <p>工信部统计显示，截至去年底，我国<strong>算力总规模</strong>达到<strong>180百亿亿次浮点运算/秒</strong>，