01_第一章 WEB开发概述(技术栈,交互模式,CS和BS模式,前后端分离)

于 2024-02-23 11:35:59 发布
阅读量1.2k 收藏 14
点赞数 23
分类专栏： Java Web 文章标签： 前端 web技术栈 交互模式 CS和BS模式 前后端分离
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65152767/article/details/136251732
版权

文章目录

第一章 WEB概述

1.1 JAVAWEB简介

用Java技术来解决相关web互联网领域的技术栈.使用JAVAEE技术体系开发企业级互联网项目. 项目规模和架构模式与JAVASE阶段有着很大的差别. 在互联网项目下,首先需要明白客户端和服务器的概念

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

  • 手机APP

在这里插入图片描述

  • 微信小程序

在这里插入图片描述

  • PC端程序

在这里插入图片描述

在这里插入图片描述

  • PC浏览器

<在这里插入图片描述

  • 其他设备

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

  • “服务器”是一个非常宽泛的概念，从硬件而言: 服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。从软件而言: 服务器其实就是安装在计算机上的一个软件，根据其作用的不同又可以分为各种不同的服务器，例如应用服务器、数据库服务器、Redis服务器、DNS服务器、ftp服务器等等

综上所述: 用我们自己的话来总结的话，服务器其实就是一台(或者一个集群)安装了服务器软件的高性能计算机

在这里插入图片描述

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模式

根据客户端的不同,我们可以将JAVA的互联网项目运行模式分为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等框架,工程化项目,前端项目可以部署到独立的服务器上

在这里插入图片描述

小丁学Java
关注
专栏目录
博客
史上最快在IDEA中创建类，只需要 ctrl + 鼠标左键双击 就可以调出创建类的窗口（全网首创）
08-02 1564
需要首先鼠标右键一次，点击新建，再点击 Java类，过于麻烦。我们只需要自定义设置创建类的快捷键即可。
博客
`map` 是 JavaScript 数组的一个高阶函数，用于对数组中的每个元素进行操作，并返回一个新的数组
10-30 329
map方法：用于对数组中的每个元素进行操作，并返回一个新的数组。作用：在你的代码中，map方法用于将每个签名 URL 与基础 URL 拼接，形成完整的图片访问地址。希望这能帮助你更好地理解map方法的作用。如果有任何进一步的问题或需要更多的解释，请随时告诉我！
博客
Failed to load image ＜URL＞ the server responded with a status of 403 (HTTP/1.1 403 Forbidden)
10-30 222
【代码】Failed to load image the server responded with a status of 403 (HTTP/1.1 403 Forbidden)
博客
Expires=1730198146&OSSAccessKeyId=LTAI4FwmPQBRwQf7fJpXXJEo&Signature=REz3gWtn8e4K1bDnho9%2FP5JxnVc%3
10-30 782
id=78获取introduceAttachmentList数组中的url，但是获取到这个"url": “56/brand/旭包鲜轮播图1750375_696868.jpg”,后，拼接基础https://www.crossbiog.com/的地址得到一个完整的地址https://www.crossbiog.com/56/brand/%E6%97%AD%E5%8C%85%E9%B2%9C%E8%BD%AE%E6%92%AD%E5%9B%BE1750375_696868.jpg。
博客
要将请求 URL 从 /brand/admin/detail/78 变成 /brand/admin/detail?id=78，我们需要在构建 URL 时使用查询参数而不是路径参数
10-29 113
【代码】要将请求 URL 从 /brand/admin/detail/78 变成 /brand/admin/detail?id=78，我们需要在构建 URL 时使用查询参数而不是路径参数。
博客
(Web 安全配置适配器) security.config.annotation.web.configuration.WebSecurityConfigurerAdapter
10-28 912
是用于配置 Spring Security 的一个便利适配器类，虽然已在新版本中被替代，但它在旧版本中是主要的安全配置方式。通过新方法，开发者可以更灵活、模块化地管理 Web 应用的安全配置。是的，你在类中配置了 Spring Security，确保和被正确注册为认证提供者，并且自定义的认证过滤器也被添加到了过滤器链中。/***/@Autowired@Autowired@Autowired@Autowired@Bean// 设置认证管理器。
博客
(认证提供者) import org.springframework.security.authentication.AuthenticationProvider；
10-28 343
(认证提供者) import org.springframework.security.authentication.AuthenticationProvider;
博客
微信小程序中点击搜素按钮没有反应，可能是样式问题（按钮被其他元素覆盖或遮挡）
10-27 935
微信小程序中点击搜素按钮没有反应，可能是样式问题（按钮被其他元素覆盖或遮挡）
博客
CSS 样式 box-sizing: border-box； 用于控制元素的盒模型如何计算宽度和高度
10-25 1002
可以避免因为内边距和边框导致的布局问题，使布局更加灵活和可控。特别是在需要精确控制元素尺寸的情况下，使用。元素的实际宽度和高度仍然是 300px，即使它有内边距和边框。时，元素的宽度和高度包括内容区域、内边距和边框。用于控制元素的盒模型如何计算宽度和高度。会改变元素的尺寸计算方式，使其更符合预期的行为。在微信小程序中，CSS 样式。默认情况下，元素的盒模型是。在微信小程序中，使用。盒模型是非常有用的。
博客
微信小程序中关闭默认的 `navigationBar`，并使用自定义的 `nav-bar` 组件
10-25 852
nav-barnav-barnav-bar通过上述步骤，你可以在微信小程序中成功关闭默认的并使用自定义的nav-bar组件。这种方法使你能够对导航栏的样式和功能进行更高的自定义，以满足你的需求。
博客
console.log(“res.data = “ + JSON.stringify(res.data))；
10-23 315
的实际内容，你需要将其转换为字符串格式，或者逐项输出其属性。时，它是一个 JavaScript 对象，而不是字符串。如果返回数据结构不同于预期，可以相应调整代码。数据结构清晰后，你可以按如下方式访问并解析。现在你可以正常获取并存储从后端返回的。表示它无法直接显示对象的内容。这样可以更清楚地看到。
博客
JwtUtils（给生成的 JWT Token 设置有效期 1 天）
10-17 267
因此，这个 Token 的有效期是 1 天（从签发时间起），过期之后这个 Token 就会失效。是的，这段代码给生成的 JWT Token 设置了有效期。
博客
import org.springframework.security.web.authentication.AuthenticationSuccessHandler；（认证成功处理器）
10-17 489
接口，当用户认证成功后，会调用这个方法执行一些操作。中，这样后续的请求可以通过。
博客
Unknown column ‘oMIbw5H29LXtmAUjSSm7ZrymASUI‘ in ‘where clause‘
10-16 269
子句中没有使用引号，MySQL 将其视为列名，并提示该列不存在。在 SQL 中，字符串值需要使用单引号或双引号括起来。被 MySQL 识别为一个列名，而不是一个值。加上引号后，查询将会正确执行。
博客
阿里云数据库导出 | 数据管理（兼容数据库备份）
10-16 240
阿里云数据库导出 |数据管理（兼容数据库备份）
博客
Incorrect string value: ‘\xE8\x8D\x98\xE8\x83\xBD...‘ for column
10-15 244
Incorrect string value: '\xE8\x8D\x98\xE8\x83\xBD...' for column
博客
安装mysql-installer-community-5.5.60.1.msi-Windows，默认支持MyISAM 存储引擎
10-13 196
安装mysql-installer-community-5.5.60.1.msi-Windows，默认支持MyISAM 存储引擎
博客
You won‘t be able to pull or push project code via SSH until you add an SSH key to your profile
10-11 852
在 GitLab 中，通过 SSH 拉取或推送项目代码前，需要将您的 SSH 密钥添加到 GitLab 账户中。确保您使用的是项目的 SSH URL 而不是 HTTPS URL。您可以在项目的主页上找到 SSH URL。通过以上步骤，您应该能够成功通过 SSH 拉取和推送项目代码。希望这些信息对您有所帮助！按提示操作，通常可以直接按回车键接受默认文件位置和空密码（除非您希望设置一个密码）。替换为您的 GitLab 实例的域名。生成的 SSH 密钥通常位于。
博客
访问公司gitlab出现 502 Bad Gateway 错误，已经解决
10-11 1301
乌班图（也有友帮拓、优般图等译名）
博客
rank 是 MySQL 中的保留关键字，因此直接使用 rank 作为列名会引发语法问题，用反引号 (``) 包裹字段名
10-10 307
解决这个问题的方式是对 rank 字段进行转义，用反引号 (``) 包裹字段名，以避免与保留关键字冲突。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值