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

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请求

相关推荐
蟾宫曲2 小时前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心2 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455662 小时前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029402 小时前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
魏时烟4 小时前
css文字折行以及双端对齐实现方式
前端·css
2401_882726485 小时前
低代码配置式组态软件-BY组态
前端·物联网·低代码·前端框架·编辑器·web
web130933203985 小时前
ctfshow-web入门-文件包含(web82-web86)条件竞争实现session会话文件包含
前端·github
胡西风_foxww5 小时前
【ES6复习笔记】迭代器(10)
前端·笔记·迭代器·es6·iterator
前端没钱5 小时前
探索 ES6 基础:开启 JavaScript 新篇章
前端·javascript·es6
m0_748255266 小时前
vue3导入excel并解析excel数据渲染到表格中,纯前端实现。
前端·excel