IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 后端路由(后端渲染)、前后端分离(前端渲染)、单页面富应用(前端路由) -> 正文阅读

[JavaScript知识库]后端路由(后端渲染)、前后端分离(前端渲染)、单页面富应用(前端路由)

目录

? 网页发展过程:

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

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

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

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

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

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

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

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

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

二、前后端分离阶段(前端渲染)【主要技术:Ajax】

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

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

☆ 这时候,仅仅只是前端渲染,而非前端路由:

在前端:一个url并不对应一个(完整的)页面

在后端,一个url 对应的是相应的数据

三、 单页面富应用阶段(前端路由)

(1) 单页面富应用 simple page web application: 整个网页只有一个html页面

(2) 静态服务器特点和浏览器请求特点:

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

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

(4)前端路由的核心:


? 网页发展过程:

后端路由阶段(后端渲染)【主要技术: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)单页面富应用(前端路由):

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

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

(4)前端路由的核心:

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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-26 22:03:48  更:2021-12-26 22:03:53 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:00:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码