网站开发的发展(后端路由/前后端分离/前端路由)

1.后端路由阶段

在早期的网站开发中 网页的渲染工作其实是交由服务器完成的 所以该渲染也被称之为后端渲染

具体的过程就是:浏览器发送url给服务器 服务器解析该url 使用后端路由(在服务器中 用于储存url和页面映射关系的路由)获取指定url对应的页面 然后交由jsp去处理该页面(包括html+css+java/php 其中java/php用于从数据库中获取数据并动态展示到页面中)并渲染该页面(由于渲染操作发生在后端 所以也称之为后端渲染) 最终返回给浏览器展示

但是后端路由存在着一些缺点:

① 整个页面的前后端都是由后端人员编写和维护的 代码量庞大

②前端人员如果想要开发该阶段的页面的话 必须掌握java/php等后端语言

③通常情况下 该阶段的页面是由html和java混合组成的 编写和维护难度很大

2.前后端分离阶段

该阶段主要是将前后端彻底剥离开来 能够达到各司其职、分工明确的目的 让后端人员专注于数据 而前端人员专注于页面的可视化和交互 使得开发效率大幅提升

主要的一个流程就是:浏览器发送url向静态资源服务器中请求页面(html+css+js) 由浏览器解析html+css并渲染为页面 然后运行js代码(其中通过ajax调用api获取服务器中的数据)并渲染到页面中

当移动端出现以后 他获取的数据依然是通过和网页端一致的api调用获取的 后端不需要进行任何额外的处理

该模式目前很多网站仍然在采用

3.前端路由阶段

该阶段也可以被称之为SPA(single page application)阶段 即单页面富应用阶段(一套html+css+js 但是整合了多个网页 主要是分离js/vue组件 而复用html/css 因为一个vue文件对应一个网页 而多个网页会整合到js中) 可以理解为前后端分离阶段的基础上 内置了前端路由的阶段(前后端分离阶段的静态资源服务器中主要是一个网页对应一套html+css+js 而该阶段则是一个网站的所有网页对应一套html+css+js)

而其中肯定存在根据不同网页url从同一套html+css+js中剥离出独有的部分进行执行渲染的机制 即前端路由(储存着url和vue组件的映射关系) 并且每一次url的变化并不像后端路由那样需要重新发送请求 前端路由会事先将整一套html+css+js下载到浏览器中 然后监听url变化根据映射表中的关系去进行渲染 不需要重新发送url请求

相关推荐
心在飞扬9 分钟前
ReRank重排序提升RAG系统效果
前端·后端
心在飞扬14 分钟前
RAPTOR 递归文档树优化策略
前端·后端
前端Hardy31 分钟前
别再无脑用 `JSON.parse()` 了!这个安全漏洞你可能每天都在触发
前端·javascript·vue.js
前端Hardy33 分钟前
别再让 `console.log` 上线了!它正在悄悄拖垮你的生产系统
前端·javascript·vue.js
青青家的小灰灰37 分钟前
从入门到精通:Vue3 ref vs reactive 最佳实践与底层原理
前端·vue.js·面试
OpenTiny社区1 小时前
我的新同事是个AI:支持skill后,它用TinyVue搭项目还挺溜!
前端·vue.js·ai编程
心在飞扬1 小时前
MultiVector 多向量检索
前端·后端
用户39051332192881 小时前
async 函数返回的 Promise 状态何时变为 resolved
前端
李剑一1 小时前
大屏天气展示太普通?视觉升级!用 Canvas 做动态天气遮罩,雷阵雨效果直接封神
前端·vue.js·canvas
Lee川1 小时前
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用
前端·css