欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

后端渲染与前端渲染,后端路由与前端路由

程序员文章站 2024-02-14 18:53:58
...

一.后端渲染

当用户在浏览器上输入网址时,相当于把url地址传给服务器,而服务器会根据html+css+java(java的作用是从数据库中读取数据,并将他动态的放在页面中)将网页渲染好,然后传给前端直接展示,这种情况下,不需要单独加载任何的js和css

- 后端路由:后端处理url地址和页面之间的映射关系

二.前端渲染

浏览器中显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最后渲染出来的网页。当输入某些具体的url地址时,会先去静态资源服务器请求对应的html+css+js代码并下载,然后在去提供API接口的服务端获取数据,通过前端ajax转换后,最终渲染出来。

三.SPA(单页富应用)页面
SPA最主要的特点就是在前后端分离的基础上加了一层前端路由,整个网页只有一个html页面
在SPA中,静态资源服务器内只含有一个html文件,甚至只有一套html+css+js文件,当url发生变化时,会先向js中找到对应的相关代码,并分离进而渲染在客户端。

- 前端路由:前端处理url和页面之间的映射关系

前端路由的核心是:改变URL,但页面不进行整体的刷新,即没有向服务器发送请求

三.如何改变url,并不让页面进行刷新,即不向服务器发送请求

1.利用url的hash location.hash = 'aaa' 即在当前url后添加 /aaa

2.html5中的history模式:

  • pushState:会保留很多历史记录,即可以返回和前进
history.pushState({},'','home') // 改变url地址,且进行入栈操作
history.back() // 在网址栏中显示上一个url地址,进行出栈操作
  • replaceState:直接替换之前的url地址,不会保留记录
history.replaceState({},'','home') 
history.replaceState({},'','about') 
  • go: 应用在pushState前提下,可以直接跳到具体的url地址

其中history.back()等价于history.go(-1),即弹出当前的url地址 返回到上一个url地址,后退
history.forward()等价于history.go(1),即压入下一个url地址 ,前进

相关标签: 前端 url vue