前后端分离

、前后端分离的好处

(1)彻底解放前端

(2)提高工作效率,分工更加明确。

(3)局部性能提升

(4)降低维护成本

2、前后端分离的概念

后台只需要提供API接口,前端调用Ajax实现数据呈现

3、场景和要求

对于前后端分离的应用场景,不是所有的场景都适合,但是大多数项目都能够通过前后端分离实现。大多数后台应用我们可以做成SPA应用(单页应用),而单页应用最主要的特点是局部刷新,这通过前端控制路由调用Ajax,后台提供接口就可以实现。而且这样的方式用户体验更加友好,网页加载更加快速,开发和维护成本也降低了不少,效率明显提升。同样的,在展示类网站和移动APP页面中前后端分离也同样适用。前后端不分离的情况下,服务端要单独针对Web端做处理,返回完整HTML,这样势必增加服务端的复杂度,可维护性差,而web端需要加载完整的HTML,一定程度上影响网页性能,这对于移动端性能为王的地方非常的不友好。随着前端技术的发展和迭代,前端MVC框架应运而生,利用目前主流的前端框架,如React、Vue、Angular等我们可以轻松的构建起一个无需服务器端渲染就可以展示的网站,同时这类框架都提供了前端路由功能,后台可以不再控制路由的跳转,将原本属于后端的业务逻辑全部丢给前端,这样前后端分离可以说是最为彻底。前后端分离的实现对技术人员尤其是前端人员的要求会上升一个层次,前端的工作不只是切页面写模板或是处理一些简单的js逻辑,前端需要处理服务器返回的各种数据格式,还需要掌握一系列的数据处理逻辑、MVC思想和各种主流框架。

4、Web前端路由

就是根据url分配到对应的处理程序,原理和路由器原理相同,不同的请求地址会交给路由处理来转发给相应的控制器处理,所以说路由就可以在转发前修改转发地址。举个例子,在 MVC 结构中,route 会将 uri 映射到 controller,具体业务逻辑在 controller 里面进行。

为什么要使用路由?传统web开发是每一个请求地址都会请求服务器来进行处理,但是用户有些操作则无需请求服务器,直接页面端修改下逻辑就能达到目的,这种最好使用路由,也许题主会有疑问:直接使用js处理下不就行了。使用js直接处理这些是可以的,事实上以前我们也这么做,但是这样做不便于用户收藏当前页,因为使用js并不更新url,但是使用路由时,url是随着改变的,用户浏览到一个网页时可以直接复制或收藏当前页的url给别人,这种方式对于搜索引擎和用户来说都是友好的。

5、心得和体会

(1)项目一开始制作前端页面的时候,我不再需要后台给我配置服务器环境了。

(2)项目的前端文件可以在需要调用后台接口的时候丢进服务器就好了,完全不需要事先放进去。

(3)增加一个项目页面需要配置路由的时候不再需要让后台同事给我加了,自己前端搞定。

(4)前端文件里不再掺杂后台的代码逻辑了,看起来舒服多了

(5)页面跳转比之前更加流畅了,局部渲染局部加载非常快速

(6)页面模板可以重复使用,前端组件化开发提高了开发效率。

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

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

相关文章

Win10还原被Windows Defender隔离的文件

Win10最新版本的Windows Defender隔离/删除的文件没有还原的选项,导致很多破解文件或是注册机直接隔离,到威胁历史记录中去却无法恢复。经过各个尝试,到微软官方论坛中也尝试了很多方法,后来发现竟然恢复啦。各位小伙伴可以试试这…

AtCoder Grand Contest 013 题解

A - Sorted Arrays 贪心&#xff0c;看看不下降和不上升最长能到哪&#xff0c;直接转移过去即可。 1 //waz2 #include <bits/stdc.h>3 4 using namespace std;5 6 #define mp make_pair7 #define pb push_back8 #define fi first9 #define se second 10 #define ALL(x…

servlet架构解析

https://www.jianshu.com/p/d433b5fb87e2

(Review cs231n) Backpropagation and Neural Network

损失由两部分组成&#xff1a; 数据损失正则化损失&#xff08;data loss regularization&#xff09; 想得到损失函数关于权值矩阵W的梯度表达式&#xff0c;然后进性优化操作&#xff08;损失相当于海拔&#xff0c;你在山上的位置相当于W&#xff0c;你进行移动&#xff0c…

springboot restful

https://www.jianshu.com/p/733d788ea94d

【计算机算法设计与分析】——排序

一.排序 二.插入排序 &#xff08;1&#xff09;算法描述 &#xff08;2&#xff09;性能分析 &#xff08;3&#xff09;寻求优化 三.归并排序 &#xff08;1&#xff09;算法思想 &#xff08;2&#xff09;性能分析 &#xff08;2&#xff09;示例 &#xff08;3&#xff09…

QT 随机数生成

下面总结了QT中随机生成的方法&#xff08;仅供学习参考&#xff09;&#xff0c;分为旧方法和新方法&#xff0c;一般来说&#xff0c;旧的方法已经被抛弃&#xff0c;在开发新的应用中推荐使用新方法。 C Code 123456789101112131415161718192021222324#include <QCoreApp…

获取/设置IFRAME内对象元素的几种JS方法

获取/设置IFRAME内对象元素的几种JS方法 iframe浏览器ie文档微软&#xff11;。IE专用(通过frames索引形象定位)&#xff1a; document.frames[i].document.getElementById(元素的ID); &#xff12;。IE专用(通过IFRAME名称形象定位)&#xff1a; document.frames[iframe的name…

高并发

https://blog.csdn.net/java_xth/article/details/81162088

多人游戏服务器

https://www.getmangos.eu/转载于:https://www.cnblogs.com/aibox222/p/9682697.html

Hbase 各个角色的工作。

HMaster的作用&#xff1a; 为region server 分配region&#xff1b;负责region server的负载均衡&#xff0c;region分裂完成监控&#xff1b;处理schema更新请求&#xff0c;数据表的创建&#xff0c;更新&#xff1b;HDFS上的垃圾文件回收&#xff1b;发现失效的region serv…

Activiti中的关于子流程中的并发节点标记处理

最近在研究一个轻量级的工作流引擎Activiti&#xff0c;就遇到了子流程中无法标记其并发节点的问题&#xff0c;经过几天的研究&#xff0c;想到了一个简单易懂的方法&#xff0c;总结如下&#xff0c;希望对你们能有所帮助&#xff0c;有写的不对的地方&#xff0c;还希望大家…

[WPF 基础知识系列] —— 绑定中的数据校验Vaildation

[WPF 基础知识系列] —— 绑定中的数据校验Vaildation 原文:[WPF 基础知识系列] —— 绑定中的数据校验Vaildation前言&#xff1a; 只要是有表单存在&#xff0c;那么就有可能有对数据的校验需求。如&#xff1a;判断是否为整数、判断电子邮件格式等等。 WPF采用一种全新的方式…

ModuleNotFoundError: No module named 'win32api'

启动一个工程的cmd&#xff1a; scrapy crawl HI 如果 运行报 No module named “win32api” 要安装 pip install pypiwin32 这个包转载于:https://www.cnblogs.com/hailong88/p/10528618.html

powercmd注册码

用户名&#xff1a;nzone注册码&#xff1a;PCMDA-86128-PCMDA-70594 http://www.baidu.com/

Servlet其实是单例多线程

https://blog.csdn.net/xiaojiahao_kevin/article/details/51781946

解决“跨域问题”的几种方法

&#xff08;0&#xff09;使用注解方式&#xff0c;这个可能有些框架可以&#xff0c;有些不行&#xff0c;在要访问的方法前面加上此注解即可&#xff1a; CrossOrigin &#xff08;1&#xff09;使用 Access-Control-Allow-Origin 设置请求响应头&#xff0c;简洁有效。 &am…

Conda 安装本地包

有的conda或pipy源太慢&#xff0c;conda install xxx或者pip install xxx下载会中断连接导致压缩包下载不全&#xff0c;本地的安装包没法完全安装, 遇到这个问题时&#xff0c;我们可以用p2p工具-迅雷等先下载指定包再用conda或pip安装 pip 安装本地包pip install D:\XXX.w…

DESUtils 加解密时 Given final block not properly padded bug小记

事情的经过是这个样子的。。。。。。 先说说问题是怎么出现的。根据客户需求&#xff0c;需要完成一个一键登录的功能&#xff0c;于是我的项目中就诞生了DesUtil&#xff0c;但是经过上百次用户测试&#xff0c;发现有一个用户登录就一直报错&#xff01;难道又遇到神坑啦&am…

Apache

https://www.iteye.com/blog/yaodaqing-1596570