【JavaWeb】JavaWeb与JavaWeb技术栈

桃扇骨 2023-09-27 08:58 130阅读 0赞

![在这里插入图片描述][74e994f9715a4b5bbb6290219eeab7c5.png_pic_center]

#### JavaWeb与JavaWeb技术栈 ####

*   *  1、JavaWeb概述
     *   *  1.1 Web和JavaWeb的概念
         *  1.2 什么是服务器与客户端
         *   *  1.2.1 线下的服务器与客户端
             *  1.2.2 线上的服务器与客户端
             *  1.2.3 客户端的各种形式
             *   *  1.2.3.1 PC端网页
                 *  1.2.3.2 移动端
             *  1.2.4 服务器的各种形式
         *  1.3 学习JavaWeb就要慢慢体会的知识
         *   *  1.3.1 编写服务器端应用程序
             *  1.3.2 了解项目的逻辑构成
             *  1.3.3 什么是架构
             *   *  1.3.3.1 概念
                 *  1.3.3.2 发展演变历程
                 *  1.3.3.3 单一架构技术体系
     *  2、JavaWeb技术栈
     *   *  2.1 B/S架构
         *  2.2 静态资源
         *  2.3 动态资源
         *  2.4 数据库
         *  2.5 HTTP协议
         *  2.6 Web服务器

> 本篇主要讲述了JavaWeb的相关概念以及技术栈，比如什么是客户端与服务器、一个项目的逻辑组成、JavaWeb的核心技术。

### 1、JavaWeb概述 ###

#### 1.1 Web和JavaWeb的概念 ####

在我们日常的生活中，经常会使用浏览器去访问`百度`、`京东`等这些网站，这些网站统称为Web网站。

**Web是全球广域网，也称为万维网(www)，能够通过浏览器访问的网站。**

**JavaWeb就是用Java技术来解决相关web互联网领域的技术栈。**

#### 1.2 什么是服务器与客户端 ####

我们能够正常使用这些Web网站，是因为这些网站（客户端）拥有着稳定、高效的服务器端应用程序，那么，我们来了解一下服务器与客户端。

##### 1.2.1 线下的服务器与客户端 #####

![./images][._images]

##### 1.2.2 线上的服务器与客户端 #####

![./images][._images 1]

##### 1.2.3 客户端的各种形式 #####

###### 1.2.3.1 PC端网页 ######

![./images][._images 2]

###### 1.2.3.2 移动端 ######

![cd9afeb93ceb4deab0aafb967b5feb40.png][]

##### 1.2.4 服务器的各种形式 #####

"服务器"是一个非常宽泛的概念，Tomcat是服务器，MySQL是服务器，Redis也是服务器。同时Linux是服务器，阿里云上租用的虚拟机也是服务器。服务器分为下面这些类型：

*  硬件服务器
    
     *  刀片式服务器
     *  塔式服务器
     *  机房
 *  虚拟机服务器
    
     *  VMWare虚拟机
     *  弹性云服务器
 *  软件服务器
    
     *  Tomcat
     *  MySQL
     *  Redis
     *  FastDFS
     *  ElasticSearch

#### 1.3 学习JavaWeb就要慢慢体会的知识 ####

##### 1.3.1 编写服务器端应用程序 #####

JavaWeb就是要开发的就是**服务器端应用程序**，怎么编写？通过学习JavaWeb技术栈。

![./images][._images 3]

##### 1.3.2 了解项目的逻辑构成 #####

*  请求：请求是项目中最基本的逻辑单元，就像万事万物都由原子构成
    
    > 举例：点超链接跳转到注册页面
 *  功能：一个功能包含很多个请求
    
    > 举例：注册用户功能
    > 
    >  *  请求1：点超链接跳转到注册页面
    >  *  请求2：发送请求获取短信验证码
    >  *  请求3：检查用户名是否可用
    >  *  请求4：提交表单完成注册
 *  模块：一个模块包含很多功能
    
    > 举例：用户信息管理模块
    > 
    >  *  功能1：用户注册功能
    >  *  功能2：用户登录功能
    >  *  功能3：个人中心——账户安全功能
    >  *  功能4：个人中心——账户绑定功能
    >  *  功能5：个人中心——收货地址功能
    >  *  功能6：个人中心——我的银行卡功能
 *  子系统：根据项目规模的不同，子系统这层逻辑概念可能有也可能没有。如果设置了子系统，那么子系统中也必然包含很多模块。其实庞大项目的子系统已经相当于一个项目了，甚至比小型项目整个都大。
    
    > 举例：认证中心子系统
    > 
    >  *  模块1：用户信息管理模块
    >  *  模块2：权限管理模块
    >  *  模块3：授权管理模块
    >  *  模块4：权限检查模块
 *  项目：为了解决现实生活中的实际问题开发一个项目，这个项目就是为这个需求提供的一整套解决方案。
    
    > 举例：电商项目
    > 
    >  *  子系统1：认证中心子系统
    >  *  子系统2：商品管理子系统
    >  *  子系统3：购物车子系统
    >  *  子系统4：仓储子系统
    >  *  子系统5：物流子系统
    >  *  子系统6：订单子系统

##### 1.3.3 什么是架构 #####

###### 1.3.3.1 概念 ######

**“架构"其实就是项目的"结构”**。只不过"结构"这个词太小了，不适合用来描述项目这么大的东西，所以换了另一个更大的词：架构。所以当我们聊一个项目的架构时，我们聊的是项目是由哪些部分组成的。

###### 1.3.3.2 发展演变历程 ######

*  单一架构
    
    一个项目就是一个工程，这样的结构就是单一架构，也叫all in one。我们现在的JavaWeb阶段、SSM阶段都是学习单一架构开发技术。
 *  分布式架构
    
    一个项目中包含很多工程，每个工程作为一个模块。模块之间存在调用关系。分布式架构阶段的技术分为两类：
    
     *  Java框架：SpringBoot、SpringCloud、Dubbo等等。
     *  中间件：Redis、ElasticSearch、FastDFS、Nginx、Zookeeper、RabbitMQ等等。

![./images][._images 4]

###### 1.3.3.3 单一架构技术体系 ######

*  视图：用户的操作界面+数据的动态显示
    
     *  前端技术：HTML/CSS/JavaScript
     *  服务器端页面模板技术：Thymeleaf
 *  控制层：处理请求+跳转页面
    
     *  服务器：Tomcat
     *  控制器：Servlet
     *  域对象：request、session、servletContext
     *  过滤器：Filter
     *  监听器：Listener
     *  异步交互：Ajax
 *  业务逻辑层：业务逻辑计算
 *  持久化层：操作数据库

![./images][._images 5]

### 2、JavaWeb技术栈 ###

![./images][._images 6]

#### 2.1 B/S架构 ####

什么是B/S架构? \*\*B/S 架构：\*\*Browser/Server，浏览器/服务器 架构模式，它的特点是，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可。大家可以通过下面这张图来回想下我们平常的上网过程:  
![1627031933553][]

*  打开浏览器访问百度首页，输入要搜索的内容，点击回车或百度一下，就可以获取和搜索相关的内容
 *  思考下搜索的内容并不在我们自己的电脑上，那么这些内容从何而来？答案很明显是从百度服务器返回给我们的
 *  B/S架构的好处:易于维护升级：服务器端升级后，客户端无需任何部署就可以使用到新的版本。  
    了解了什么是B/S架构后，作为后台开发工程师的我们将来主要关注的是服务端的开发和维护工作。在服务端将来会放很多资源,都有哪些资源呢?

#### 2.2 静态资源 ####

*  静态资源主要包含HTML、CSS、JavaScript、图片等，主要负责页面的展示。
 *  这部分是已经学过前端网页制作`三剑客`(HTML+CSS+JavaScript),使用这些技术我们就可以制作出效果比较丰富的网页，将来展现给用户。但是由于做出来的这些内容都是静态的，这就会导致所有的人看到的内容将是一模一样。
 *  在日常上网的过程中，我们除了看到这些好看的页面以外，还会碰到很多动态内容，比如我们常见的百度登录效果:  
    ![1627037814180][]  
    `张三`登录以后在网页的右上角看到的是 `张三`，而`李四`登录以后看到的则是`李四`。所以不同的用户访问相同的资源看到的内容大多数是不一样的，要想实现这样的效果，光靠静态资源是无法实现的。

#### 2.3 动态资源 ####

*  动态资源主要包含Servlet、JSP等，主要用来负责逻辑处理。
 *  动态资源处理完逻辑后会把得到的结果交给静态资源来进行展示，动态资源和静态资源要结合一起使用。
 *  动态资源虽然可以处理逻辑，但是当用户来登录百度的时候，就需要输入`用户名`和`密码`,这个时候我们就又需要解决的一个问题是，用户在注册的时候填入的用户名和密码、以及我们经常会访问到一些数据列表的内容展示(如下图所示)，这些数据都存储在哪里?我们需要的时候又是从哪里来取呢?  
    ![image-20220908005451068][]

#### 2.4 数据库 ####

*  数据库主要负责存储数据。
 *  整个Web的访问过程就如下图所示:  
    ![1627039320220][]  
    (1)浏览器发送一个请求到服务端，去请求所需要的相关资源;  
    (2)资源分为动态资源和静态资源,动态资源可以是使用Java代码按照Servlet和JSP的规范编写的内容;  
    (3)在Java代码可以进行业务处理也可以从数据库中读取数据;  
    (4)拿到数据后，把数据交给HTML页面进行展示,再结合CSS和JavaScript使展示效果更好;  
    (5)服务端将静态资源响应给浏览器;  
    (6)浏览器将这些资源进行解析;  
    (7)解析后将效果展示在浏览器，用户就可以看到最终的结果。

#### 2.5 HTTP协议 ####

*  HTTP协议:主要定义通信规则
 *  浏览器发送请求给服务器，服务器响应数据给浏览器，这整个过程都需要遵守一定的规则，之前大家学习过TCP、UDP，这些都属于规则，这里我们需要使用的是HTTP协议，这也是一种规则。

#### 2.6 Web服务器 ####

*  Web服务器:负责解析 HTTP 协议，解析请求数据，并发送响应数据
 *  浏览器按照HTTP协议发送请求和数据，后台就需要一个Web服务器软件来根据HTTP协议解析请求和数据，然后把处理结果再按照HTTP协议发送给浏览器
 *  Web服务器软件有很多，我们课程中将学习的是目前最为常用的Tomcat服务器

至此，关于JavaWeb中用到的技术栈就介绍完了，整个Web核心主要就是来学习这些技术。

*  DAO层技术：MySQL、JDBC、Mybatis
 *  HTTP、Tomcat和Servlet。
 *  Request是从客户端向服务端发出的请求对象，Response是从服务端响应给客户端的结果对象。
 *  JSP是动态网页技术。
 *  会话技术（Cookie、Session）是用来存储客户端和服务端交互所产生的数据。
 *  过滤器（Filter）是用来拦截客户端的请求。
 *  监听器（Listener）是用来监听特定事件。
 *  Ajax、Vue、ElementUI前端技术。

![1627043194238][]

[74e994f9715a4b5bbb6290219eeab7c5.png_pic_center]: https://img-blog.csdnimg.cn/74e994f9715a4b5bbb6290219eeab7c5.png#pic_center
[._images]: https://img-blog.csdnimg.cn/img_convert/a237f7171399e1218b3bc1600e25ca90.png
[._images 1]: https://img-blog.csdnimg.cn/img_convert/91ed6dae56f3729cfd6add8f0ec543b6.png
[._images 2]: https://sunmingtypora.oss-cn-qingdao.aliyuncs.com/img003.442e866a.png
[cd9afeb93ceb4deab0aafb967b5feb40.png]: https://img-blog.csdnimg.cn/cd9afeb93ceb4deab0aafb967b5feb40.png
[._images 3]: https://sunmingtypora.oss-cn-qingdao.aliyuncs.com/img008.efc85bce.png
[._images 4]: https://sunmingtypora.oss-cn-qingdao.aliyuncs.com/img010.49c05d88.png
[._images 5]: https://sunmingtypora.oss-cn-qingdao.aliyuncs.com/img011.679a73a9.png
[._images 6]: https://img-blog.csdnimg.cn/img_convert/24f93c23f5a6839e33a55f1c8497a2c5.png
[1627031933553]: https://img-blog.csdnimg.cn/img_convert/29e0073186bc9ea76a0aea4b71529e48.png
[1627037814180]: https://img-blog.csdnimg.cn/img_convert/198606e64d227cc996f23a6469f0ce97.png
[image-20220908005451068]: https://img-blog.csdnimg.cn/img_convert/a99abaecb71817f60f6e5cbd53fa8bcd.png
[1627039320220]: https://img-blog.csdnimg.cn/img_convert/f85ca5690eca7b5217f948c83da982a4.png
[1627043194238]: https://img-blog.csdnimg.cn/img_convert/2fc346e8ab273d535623236510c2cff5.png