关于前后端连接的知识整理

最新推荐文章于 2024-08-07 19:03:55 发布

行好中

最新推荐文章于 2024-08-07 19:03:55 发布

阅读量549

点赞数 20

文章标签： vue.js

本文链接：https://blog.csdn.net/2302_76581139/article/details/139711234

版权

一、相似区分

一、js（JavaScript）和JavaServer Pages (JSP)

js（JavaScript）

JavaScript和java无关，主要用于前端编写，但nodejs的出现，使得js也可在后端服务器内运行，完成相关的后端编写。JavaScript是一种客户端脚本语言，主要用于在网页上执行动态操作，改变页面内容、响应用户事件等。JavaScript是一门解释型语言，所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。基于原型的面向对象，严格区分大小写。

JavaServer Pages (JSP)

服务器端技术：JSP是一种服务器端技术，它允许开发者将Java代码嵌入HTML页面中，以便动态生成网页内容。
服务器交互：JSP通常用于与服务器交互，生成动态内容，如从数据库检索数据并将其显示在网页上。
扩展性：JSP可以利用Java语言的所有功能，包括面向对象编程、访问数据库、调用外部API等。

jsp本质是一个java类，运行时会被编译成类之后运行，而js是一种客户端脚本语言，两者甚至不是一种语言，jsp和js只是看起来像，有本质区别。

二、cookie和本地存储

cookie

cookie 是由服务器发送到浏览器并保存在本地的小型文本文件，每次请求特定网站时，浏览器都会将 cookie 发送回服务器。cookie 通常用于跟踪用户会话、身份验证等。每个 cookie 的大小受到限制，一般为 4KB 左右，且每个域名下的 cookie 总大小也有限制。cookie 是通过在请求头中发送给服务器的方式来进行数据交互的。

本地存储

本地存储 是浏览器内置的一种机制，可以用来在客户端持久性地存储键值对。localStorage保存的数据在浏览器关闭后仍然保留，而sessionStorage保存的数据在会话结束时被清除。localStorage 和 sessionStorage 通常可以存储更大量级的数据，一般为 5MB 左右。localStorage 和 sessionStorage 存储的数据仅在客户端（浏览器）中可用，不会自动发送给服务器。

总的来说，cookie用于与服务器进行数据交互，而本地存储则提供了一种在浏览器中存储数据的方式，一般用于临时或持久性存储客户端数据。

三、cookie和session

session

“会话控制”，服务器为了保护用户状态创建的特殊对象用于存储信息，每一个客户端会被服务器创建一个唯一的session，类似一个map，内含有多个键值对，以key-value存放，key为字符串，value为对象。session内部会带有一个名为JSESSionid的cookie，作为session的id。

session存于服务器端，cookie存于客户端，session比cookie更大，更安全，但session过多时，会对服务器的性能造成影响。

二、前端内容（JS）

（一）ajax

本质使用的js的xhr（XMLHttpRequest）对象，实现的异步调用，但比较麻烦繁琐，它利用 JavaScript 中的 XMLHttpRequest 对象来实现异步加载数据和更新页面内容。通过使用 JavaScript 发送异步请求，Ajax 可以在不影响用户界面响应的情况下与服务器进行数据交换。这使得网页可以实现更流畅的交互和更快的响应速度。

js在不使用ajax时，仅使用xhr对象也可实现端与后端的连接，这是 Ajax 技术的基础。ajax是最常用的js前端库，但还有别的连接方法，其中一些方法包括使用 fetch API、Web Sockets 和 Server-Sent Events。

（二）axios

axios 是一个基于 Promise 的用于浏览器和 Node.js 的 HTTP 客户端，用于在前端与后端进行数据交互。它提供了一种更加方便、快捷和易用的方式来发起异步请求，并处理返回的数据。

相较于传统的原生的 XMLHttpRequest 对象，使用 axios 可以简化和优化前端与后端的交互流程。它提供了更具可读性的 API，并且支持 Promise，让异步操作更容易管理和处理

主要用于js前端和nodejs的连接，但实际也可以和别的后端库相连接，比如java的springboot，前端库最好和后端库相互对应，会有代码的适配，更加方便快捷。

（三）pinia

Pinia 是一个基于 Vue 3 的状态管理库，用于在 Vue 应用程序中管理应用的全局状态。它提供了一种简单而强大的方式来处理应用程序的状态，使得状态管理变得更加容易和高效。

全局状态管理：Pinia 允许您将应用程序的全局状态存储在一个中心化的地方，这使得不同组件之间可以共享和访问相同的状态数据。这样可以避免了通过 props 和事件来传递数据的繁琐工作，使得组件之间的通信更加简单。
响应式状态：Pinia 使用 Vue 3 的响应式系统，当状态数据发生变化时，相关的组件会自动更新以反映最新的状态。这极大地简化了状态更新和UI重新渲染的处理。
模块化组织：Pinia 支持将全局状态拆分成多个模块，每个模块可以独立管理自己的状态数据，并且允许按需加载和组合不同的状态模块。这使得代码组织和维护更加容易。
异步处理：Pinia 允许您处理异步操作，如发送网络请求或执行定时任务，并且可以在状态管理中方便地处理异步数据。

全局状态管理，可以更加方便组件之间的信息传递，省去了使用组件的嵌套传递内容的繁琐，或者是路由之间的参数传递。

总的来说，利用js的前端库，和后端进行连接，有原生的xhr对象，原生的ajax，更简便更适合与nodejs对接的axios，还有很多其他技术，但目前对我来说，axios比较适合。

三、后端内容

（一）nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于构建可以在服务器端运行的高性能网络应用。它的出现，使得js可以在后端服务器上运行，实现后端代码的编写。

构建网络应用: Node.js 最初是为构建网络应用而设计的，它在处理 HTTP 请求和响应方面非常强大，同时也能处理 TCP、WebSocket 等。

NPM: Node.js 默认附带了包管理工具 NPM，它是世界上最大的软件注册表，开发者可以在其中找到数量庞大的开源代码包以及管理自己的项目依赖。

nodejs具有原生的建立http请求的工具，十分方便，

（二）spring boot

框架

框架是一个在软件开发中被广泛应用的概念，它是一个预先设计好的基础架构，提供了通用功能和结构，以便于开发人员可以构建特定类型的应用程序。框架通常定义了一组规则、实践和约定，以指导开发人员进行开发。

spring

Spring 框架是一个用于构建企业级 Java 应用程序的开源框架。它提供了一套全面的基础设施支持和丰富的特性，用于简化 Java 应用程序的开发。

spring boot

Spring Boot 是一个用于创建基于 Spring 框架的应用程序的开源框架。它旨在简化基于 Spring 的应用程序的搭建过程，并提供快速的开发和部署体验。

总的来说，后端的编写方式也有许多种，java本身的servlet，springboot框架，nodejs本身的http请求。需要注意的是，域名是ip地址的字符形式，他们一一对应，当同一台电脑开启两个服务器相互调用，并不属于跨域请求，不同ip地址的服务器请求才叫跨域请求，对于跨域请求，前后端有不同的解决方式。