后端路由(后端渲染)、前后端分离(前端渲染)、单页面富应用(前端路由)

简介: 后端路由(后端渲染)、前后端分离(前端渲染)、单页面富应用(前端路由)

后端路由(后端渲染)、前后端分离(前端渲染)、单页面富应用(前端路由)

 

✿ 网页发展过程:

① 后端路由阶段(后端渲染)【主要技术:jsp】

② 前后端分离阶段(前端渲染)【主要技术:ajax】

③ 单页面富应用阶段(前端路由)【主要技术:vue-router】


 

一、后端路由阶段(后端渲染)

 -----主要技术 jsp (java serve page)【一种以html(css) 代码为主,java代码为辅的技术】

 

(1)早期的html+css+js(都存储在服务器的数据库的数据无能为力):

首先因为我们的数据是存储到数据库的,而早期html+css(静态)+js(虽然可以生成多态数据,但是数据的来源是需要向服务器的数据库发出请求)

(2)jsp 技术(java serve page,java 服务网页):

通过 java代码(jdbc:java DataBase Connectivity,java连接数据库【进行数据库数据的操作(增删改查)】),然后将从数据库获取的数据嵌套到html代码中,即最终的的java + html(css)代码 就是咱的jsp。

☆ 后端渲染(服务端渲染)

即服务器直接生产渲染好对应的html(jsp)页面,返回给客户端展示。

(3)浏览器输入一个url 向服务器请求,服务器响应给浏览器jsp 页面

☆ 后端路由 :

在后端,一个url 对应一个jsp页面(来源是后端)


 

二、前后端分离阶段(前端渲染)【主要技术:Ajax】
  -----主要技术 Ajax(异步的JavaScript和Xml,通过浏览器内建的 XMLHttpRequest 对象(从 web 服务器请求数据)

 

(1)前后端分离:后端只提供api 来返回数据,前端通过Ajax获取到数据,通过js将数据渲染到页面

(2)前端渲染:通过浏览器内建的XMLHttpRequest 对象(从 web 服务器请求数据),然后js将请求到数据渲染出来 【浏览器是属于前端----前端渲染

☆ 这时候,仅仅只是前端渲染,而非前端路由:
在前端:一个url并不对应一个(完整的)页面
(需要等浏览器的XMLHttpRequest 对象从服务器请求来数据后通过js才把完整界面渲染完成, 只能说一个完整的页面最终是在前端渲染出来的,而不能说通过url直接请求得到一个(完整的)页面)
在后端,一个url 对应的是相应的数据

 

三、 单页面富应用阶段(前端路由)
  ----主要技术:vue-router(路由插件)


(1) 单页面富应用 simple page web application: 整个网页只有一个html页面
(2) 静态服务器特点和浏览器请求特点:
静态资源服务器中只有一个html+css+js
浏览器请求特点:将全部的html+css+js【都只有一份(模块化打包)】,对于js项目中创建的那些.vue 组件文件,最终都打包到同一份js文件中

(3)单页面富应用(前端路由):


19.png


☆ 前端路由:一个url对应一个界面(组件)

通过路由映射实现,当url发生改变时,首先要找该路由,然后才能找到相应的组件,进而渲染出来。

(4)前端路由的核心:

改变URL,但是页面不进行整体的刷新(因为是单页面,第一次向服务器请求时,已经把所有资源(html+css+js)都请求到浏览器,只是不会立马对全部的js代码进行执行,而是当url改变了,懒加载对应的组件界面,不再需要向服务器请求资源

目录
相关文章
|
18天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
31 3
|
19天前
|
Rust 前端开发 JavaScript
前端性能革命:WebAssembly在高性能计算中的应用探索
【10月更文挑战第26天】随着Web应用功能的日益复杂,传统JavaScript解释执行模式逐渐成为性能瓶颈。WebAssembly(Wasm)应运而生,作为一种二进制代码格式,支持C/C++、Rust等语言编写的代码在浏览器中高效运行。Wasm不仅提升了应用的执行速度,还具备跨平台兼容性和安全性,显著改善了Web应用的响应速度和用户体验。
31 4
|
18天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
35 2
|
19天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
19天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
28 2
|
19天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
20天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
28 2
|
25天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
21天前
|
前端开发 API UED
深入理解微前端架构:构建灵活、高效的前端应用
【10月更文挑战第23天】微前端架构是一种将前端应用分解为多个小型、独立、可复用的服务的方法。每个服务独立开发和部署,但共同提供一致的用户体验。本文探讨了微前端架构的核心概念、优势及实施方法,包括定义服务边界、建立通信机制、共享UI组件库和版本控制等。通过实际案例和职业心得,帮助读者更好地理解和应用微前端架构。
|
23天前
|
JavaScript 前端开发 测试技术
拥抱开源:NestJS 在现代后端开发中的应用
【10月更文挑战第21天】NestJS 是一个基于 TypeScript 的现代 Node.js 框架,结合了 OOP、FP 和 FRP 元素,支持模块化设计、控制器、服务和守卫等核心概念,具备强大的依赖注入系统。本文探讨了 NestJS 的核心特性、应用场景及其在现代后端开发中的价值,包括构建 RESTful API、微服务、单页应用后端和企业级应用。通过最佳实践和社区支持,NestJS 可显著提高开发效率和代码质量。

热门文章

最新文章