路由前后端渲染urlhash和html5history

HUMILITY      2022-02-10     162

关键词:

路由

  • 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动
  • 路由器提供了两种机制:路由和传送

    • 路由是决定数据包从来源到目的地的途径
    • 转送将输入端的数据转移到合适的输出端
  • 路由中有一个非常重要的概念叫路由表

    • 路由表本质上就是一个映射表,决定了数据包的指向
  • 后端路由阶段

    • 后端处理URL和页面之间的映射关系
    • 每个页面有自己对应的网址,就是URL
    • URL发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个Controller进行处理
    • Controller进行各种处理,最终生成HTML或者数据,返回给前端
    • 这就完成一个IO操作
  • 前后端分离阶段

    • 随着AJAX出现,有了前后端分离的开发模式
    • 后端只提供API来返回数据,前端通过AJAX获取数据,并且可以通过JavaSCRIPT将数据渲染到页面上
    • 这样做最大的优点就是前后端责任明晰,后端专注于数据,前端专注于交互和可视化上
    • 并且当移动端出现后,后端不需要进行任何处理,依然使用之前的一套API即可

前端渲染

  • SPA页面

    • 单页面富应用,整个网页只有一个html页面
  • 浏览器中显示的网页中的大部分内容,都是由前端写的js代码,在浏览器中执行,最终渲染出来的网页
  • 好处:网络传输数据量小。不占用服务端运算资源(解析模板),模板在前端(很有可能仅部分在前端),改结构变交互都前端自己来了,改完自己调就行。
  • 坏处:前端耗时较多,对前端工作人员水平要求相对较高。前端代码较多,因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。

后端渲染

  • 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。
  • 好处:前端耗时少,即减少了首屏时间,模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板)
  • 坏处:占用服务器资源。

url的hash和html5的history

  • URL的hash

    • URL的hash也就是锚点(#),本质上是改变window.location的href属性
    • 我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新
    • location.hash = 'aaa'
  • HTML5的history

    • history.pushState({}, .. , 'sss') //可返回
    • history.replaceState({},'','111') //不可返回
    • history.go(-1) = history.back
    • history.forward() = history.go(1)

vuerouter路由(代码片段)

vuerouter路由什么是前端渲染,什么是后端渲染后端路由由后端服务器html+css+java动态绑定数据并渲染好一个页面,直接发送到前端。优点是有利于seo优化,缺点html和数据逻辑混在一起,难以维护前后端分离随着Ajax出现,后端只负... 查看详情

前后端分离中前端dom渲染页面

前后端分离中前端DOM渲染页面一、技术概述html仅仅作为静态文件,客户端端在请求时,服务端将数据返回给客户端,再通过本地的js代码读取返回的数据再使用DOM将这些数据渲染到html中,保留的代码中天然的展示层和数据层的... 查看详情

什么是前后端分离?为什么分离

...据那么1、前端数据如何渲染?2、页面跳转是否必须使用路由?(不想使用路由)3、页面间的数据传递如何做,比如:列表页到详情页的参数传递如何做?本回答被提问者采纳 参考技术B前后端分离,就是在对前端开发人员和后... 查看详情

arcternpandas入门-前后端渲染(代码片段)

????Arctern基于开源大数据生态,构建灵活、强大、高性能的时空数据分析平台,帮助用户应对5G/IoT带来的新型数据挑战,加速时空数据的处理、分析、模型预测与呈现。本文中将会介绍Arcternpandas安装和简单使用Arctern安装????参照官... 查看详情

前后端分离与不分离

 为什么要做前后端分离?  前端后端有两种协作方式,一种可以称之为是服务器端渲染,一种是叫做前后端分离。这两种方式的差别是什么呢?第一种方式是服务器端渲染的方式,是指在服务器端就将网页直接生成,... 查看详情

前后端分离与不分离,一点点理解

...作页面的时候,不需要后台配置服务器环境,可以自己配置路由,前端代码里面不会掺杂后端的代码以及逻辑  2.提高工作的效率  3.局部性能提升  4.降低了维护成本3>前后端分离的核心:前端负责调用ajax实现数据显示(view层... 查看详情

前端路由

什么是后端路由?优点:  1、可以在服务端渲染后返回给浏览器,不用等待前端加载任何js或者css就可以直接显示网页内容。  2、对SEO友好。缺点:  1、模板是由后端来维护和改写,前端开发行者需要安装整套的后端服... 查看详情

如何进行前后端分离

...据那么1、前端数据如何渲染?2、页面跳转是否必须使用路由?(不想使用路由)3、页面间的数据传递如何做,比如:列表页到详情页的参数传递如何做? 查看详情

web前后端为啥需要分离?

...工作,仅此而已。把Node归到前端很让人不能接受 “路由”,“模板生成”,然而这并不是Node的什么新兴概念,返回给用户的页面无非是后端渲染完成直接返回HTML,或者后端返回一堆数据,然后浏览器选进行渲染最开始的时... 查看详情

react前后端如何同构,防止重复渲染

首先解释React前后端同构、React首屏渲染的概念。然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题。什么叫前后端同构?为了解决某些问题(比如SEO、提升渲染速度等)react提供了2个方法在服务端生成一个HTML文... 查看详情

vue-router+vuex实现加载动态路由和菜单(代码片段)

前言动态路由加载和动态菜单渲染的应用在后端权限控制中十分常见,后端只要加载权限路由进行渲染返回到浏览器就可以。在前后端分离中,权限控制动态路由和动态菜单也是一个非常常见的问题。其实我们最最理想的效果是... 查看详情

前后端渲染的区别

后端渲染:在服务器进行渲染,服务器进程从数据库获取数据后,利用后端模板引擎,甚至是在HTML模板中嵌入后端语言(例如JSP),                将数据加载进来生成HT... 查看详情

前后端交互

...,还需要再正确的区域渲染出服务端的数据。那么有哪些前后端交互的技能服务端渲染世界上大多数动态服务页面都是服务端的数据渲染,接口->前端赋值->模板渲染,都是在服务器完成。所以当我们查看源码的时候,我们... 查看详情

node前后端分离基本概括

首先从一个重要的概念“模板”说起。广义上来说,web中的模板就是填充数据后可以生成文件的页面。严格意义上来说,应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大致分为前端模板(如ejs)和后端... 查看详情

前后端分离及react的一些研究

...对英才网企业线前端不断的完善过程中,我们尝试进行了前后端分离,引入Node环境、以及在使用React的过程中,自行开发DOM渲染框架,解决React兼容低版本IE的问题,在这个过程中,我们有了一些经验和体会,希望本文对您有所... 查看详情

前后端渲染

...的系统调用在显示器上把HTML所代表的图像显示给用户。前后端不分离,一般情况下前端只需要根据设计完成页面就可以,数据可以暂时使用静态数据,包括图片、文字等。页面写完就可以交给后端同事了,他们引入你写的样式... 查看详情

前端完全分离和前端不完全分离

前后端不完全分离后台,新建一个路由接口,指定一个模板jsp,告诉前端,这个地址对应这个jsp,前端修改jsp,js,测试不分离就是要在前端的机器上也运行所有的后端代码。包括数据库,后续运行起来比较麻烦我们可以采取用j... 查看详情

关于前后端分离的开发模式

...,有点前端工程的意思了,结合了node.js,有了本地server路由和配置文件,还可以做到组件化开发,提高了复用率,新手直接上手的话还是有点找不到头绪的,建议把vue1x弄明白了,ajax弄明白了在上手学习。北上广等一线大城市... 查看详情