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

一.后端渲染

当用户在浏览器上输入网址时,相当于把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地址 ,前进

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值