web开发模式

1. Web 开发模式

        目前主流的 Web 开发模式有两种,分别是

        ①  基于服务器渲染的传统 Web 开发模式

        ②  基于前后端分离的新型 Web 开发模式

1. 服务器渲染的Web开发模式

        服务器渲染的概念:服务器发送给客户端的 HTML 页面,是在服务器通过字符串的拼接,动态生成的。客户端不需要使用 Ajax 这样的技术额外请求页面的数据

        代码示例:

app.get('/index.html', (req, res) => {// 渲染的数据const user = { name: 'zs', age: 20 }// 服务器通过字符串的拼接,动态生成 html 内容const html = `<h1>姓名:${user.name}, 年龄: ${user.age}</h1>`// 把生成好的页面内容响应给客户端,因此客户端拿到的是带有真实数据的 html 页面res.send(html)
})

2. 服务端渲染的优缺点

优点

①  前端耗时少。因为服务器负责动态生成 html 内容。浏览器只用渲染页面就可以了

②  有利于SEO。因为服务器端响应的是完整的 html 内容,所以爬虫更容易爬取获得信息,更有利于 SEO

缺点

①  占用服务器端资源。

②  不利于前后端分离,开发效率低。使用服务器渲染无法分工合作。

3.前后端分离的Web开发模式

        前后端分离的概念:前后端分离的开发模式,依赖于 Ajax 技术的广泛使用。前后端分离的 Web 开发模式就是后端只负责提供 API 接口,前端使用 Ajax 调用接口的开发模式

4. 前后端分离的优缺点

优点

①  开发体验好。前端专注于 UI 页面的开发,后端专注于 api 的开发,前端有更多的选择性

②  用户体验好。Ajax 技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新

③  减轻了服务器端的渲染压力。

缺点

①  不利于 SEO。(解决方法:利用 Vue。React 等前端框架的 SSR(server side render)技术能很好的解决 SEO 问题)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/750640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】类和对象终章

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、初始化列表1.1 初始化列表的形式1.2 初始化列表的注意事项 二、explicit关键…

[数据集][目标检测]螺丝螺母检测数据集VOC+YOLO格式2100张13类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2100 标注数量(xml文件个数)&#xff1a;2100 标注数量(txt文件个数)&#xff1a;2100 标注…

@RequestParam、@PathVariable、@RequestBody

1、中文翻译 RequestParam-请求参数、PathVariable-路径变量、RequestBody请求体 2、作用&#xff1a; Controller中获取前端传递的参数 3、从注解本身角度分析 3.1、PathVariable&#xff1a;路径变量 通过 PathVariable 可以将URL中占位符参数{xxx}绑定到处理器类的方法形…

CSS3病毒病原体图形特效

CSS3病毒病原体图形特效&#xff0c;源码由HTMLCSSJS组成&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 CSS3病毒病原体图形特效代码

(二)移植FreeRTOS到STM32中

一、概念 &#xff08;1&#xff09;任务&#xff08;线程&#xff09;&#xff1a;根据功能的不同&#xff0c;将一个系统分割成一个个独立且无法返回的函数&#xff0c;这个函数就被称为任务 &#xff08;2&#xff09;任务栈&#xff1a;静态创建的任务保存在栈中 &#xf…

代码随想录阅读笔记-哈希表【四数相加II】

题目 给定四个包含整数的数组列表 A , B , C , D ,计算有多少个元组 (i, j, k, l) &#xff0c;使得 A[i] B[j] C[k] D[l] 0。 为了使问题简单化&#xff0c;所有的 A, B, C, D 具有相同的长度 N&#xff0c;且 0 ≤ N ≤ 500 。所有整数的范围在 -2^28 到 2^28 - 1 之间…

Formate函数的一般使用

Program Project2;{$APPTYPE CONSOLE}UsesSysUtils;Varnum: Integer;r1: Real;BeginRead(num, r1);Writeln(Format(%d 绝对值%%d&#xff1a;%d, [num, abs(num)]));Writeln(Format(%u 绝对值%%u&#xff1a;%u, [num, abs(num)]));Writeln(Format(%f 参数为浮点数&#xff0c;…

前后端分离:现代Web开发的协作模式

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

el-cascader修改样式(不影响全局)

当用/deep/想像往常一样修改&#xff0c;会发现不生效&#xff0c;原因在于这个组件和div#app同级了&#xff0c;如果去掉scoped&#xff0c;是最简单的方法&#xff0c;当然&#xff0c;为了不影响全局我们当然不能这么做。 以下是步骤&#xff1a; 1.我们查看组件属性&…

镜像制作实战篇

“ 在失控边缘冲杀为&#xff0c;最终解脱” CMD与EntryPoint实战 EntryPoint 与 CMD都是docker 镜像制作中的一条命令&#xff0c;它们在概念上可能有些相似&#xff0c;但在使用中&#xff0c;两者是有明显的区别的。比如&#xff0c;执行一个没有调用EntryPoint、CMD的容器会…

Rust基础知识讲解

Rust 的背景和设计理念 Rust 是一种系统编程语言&#xff0c;旨在提供高性能、内存安全和并发性。它由 Mozilla 研究院开发&#xff0c;第一个正式版本&#xff08;1.0&#xff09;发布于 2015 年。Rust 的设计融合了静态类型语言的性能和安全性&#xff0c;以及现代语言的便利…

#QT(事件--快捷键保存文件)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;QEvent,QMouseEvent,QKeyEvent。 在上一个文本编辑器的基础上实现快捷键"ctrls"保存文件。 3.记录 &#xff08;1&#xff09;查看QEVENT的有效事件 &#xff08;2&#xff09; 所有时间均继承于QEvent&#xff0c;任…

微信小程序《简单、快速上手的微信小程序音乐播放器》+源代码+文档说明

文章目录 源代码下载地址项目介绍项目功能使用方法界面预览 项目备注源代码下载地址 源代码下载地址 点击这里下载源码 项目介绍 项目功能 首页&#xff1a;歌曲歌手搜索&#xff0c;轮播图&#xff0c;各大榜单&#xff0c;热门歌单 正在播放&#xff1a; 当前播放歌曲展示…

MySQL查询结果竖列转列为字段:深入探讨pivot操作与应用实践

在数据分析和报表生成过程中,我们经常需要将MySQL查询结果中原本竖直排列的数据转换为横向的列,也就是常说的“行列转换”或“透视(pivot)”操作。MySQL本身并未内置像Excel那样的Pivot Table功能,但这并不妨碍我们通过SQL语句的巧妙构造实现相同的效果。本文将深入探讨My…

Parade Series - Web Streamer Low Latency

Parade Series - FFMPEG (Stable X64) 延时测试秒表计时器 ini/config.ini [system] homeserver storestore\nvr.db versionV20240312001 verbosefalse [monitor] listrtsp00,rtsp01,rtsp02 timeout30000 [rtsp00] typelocal deviceSurface Camera Front schemartsp ip127…

【C语言】strcpy与strncpy函数的使用和模拟实现

一.strcpy的使用与模拟实现 char* strcpy(char * destination, const char * source ); 使用注意事项&#xff1a; • 源字符串必须以 \0 结束。 • 会将源字符串中的 \0 拷贝到目标空间。 • 目标空间必须足够大&#xff0c;以确保能存放源字符串。 • 目标空间必须可修改。…

如何从不同维度对服务进行拆分

1.压力模型 高频高并发 商品详情页 低频突发流量 如秒杀 批量上架 2.主链路规划 不可缺少的环节 如果缺少了就无法形成完整的服务 如图营销计算就是一个服务业务 3.领域模型拆分DDD 4.用户群体拆分 2C 2B

【.net/.net core】使用System.Web.HttpUtility.UrlDecode处理web请求编码问题

问题场景&#xff1a;将数据已JSON字符串写入请求内容后&#xff0c;在接收端接收数据时&#xff0c;数据内容为URL编码后的内容&#xff0c;需要先将接收的字符串数据URL解码后才可转换为数据对象 解决办法&#xff1a;使用System.Web.HttpUtility.UrlDecode(string s)方法对…

自恋型人格如何调整

目录 1. 假期后无法快速投入工作,走不出被需求的陷阱1.1 与他人分享对调节自恋型人格有何帮助1.2 自恋型人格的一起其他问题1. 假期后无法快速投入工作,走不出被需求的陷阱 感受到被需要和价值的重要性是人之常情,尤其对于自恋型性格的人来说,这种感觉可能会更加强烈。 假…

CCF CSP试题编号: 202312-2试题名称: 因子化简

题目中提到关键词素数 我们可以尝试求一下1000以内的素数 足以表示数据 int a[1000]{0}; a[0]a[1]1;for(int i3;i<1000;i){for(int j2;j<i;j){if(i%j0){a[i]1;}}}for(int i0;i<1000;i){if(a[i]!1)cout<<i<<",";} 将素数存入数组 即可以按照题…