个人对前后端分离的一些看法

内容简介:前端开发过程中能完全不依赖后端的才是真正的前后端分离指的是工作过程中,前端的的代码中往往会掺杂一些后端的逻辑。后端返回了一个json对象

前端开发过程中能完全不依赖后端的才是真正的前后端分离

指的是工作过程中,前端的的代码中往往会掺杂一些后端的逻辑。

例子

后端返回了一个json对象:

const data = {total:100,apple:30
}

前端需要展示的apple的占比,因此在展现的过程中会在业务逻辑或者html模版中含有了数据的转换处理

这种因为后端返回的数据并非是完全处理完的数据,从而导致前端代码掺杂了一些‘多余’代码的情况,可以视为‘非完全的前后端分离’

缺点

  • 前端代码不够简洁
  • 后期维护差
  • 拖慢工作进度
  • 前后端联调累

一种更加友好的前后端分离的工作模式

前端的mvc(mvvm)的软件设计,这个概念往往只是针对整个代码的逻辑做出的抽象。然而单纯的看代码目录我们是无法区分这个项目有没有用mvc(mvvm)。 那么我们是否可以通过文件划分实现的目录层面的mvc划分呢。

  • m:api数据转换层(关键)
  • v:html视图层
  • c:js业务逻辑层

api转换层(关键)

项目中专门起一个目录作为api转换层,对内做数据转换,对外暴露api接口。

一个例子

前后端并行开发的过程中,前端无视后端,在需要接口的页面先mock一个符合前端业务需求的最简洁的数据结构进行开发。后期前后端联调的时候我们只需针对后端返回的数据做一个转换层,输出之前mock的数据形式。

// 数据转换层
export const getUserInfo = () => {// 定义一个Promise在内部作数据转换处理return new Promise((resolve, reject) => {axios.get(`/sys/user/info`).then(({data}) => {// 接入api并在自定义的handler函数转换数据结构resolve(handler(data))}).catch(error => {// 在没有接入api之前在这里resolve输出mock数据resolve({code:0,errMessage:'success',data: {user: {userId: 1,username: 'admin',email: 'admin@126.com',}}})reject(error)})})
}

项目的后期维护

后端随意改接口:只需改接口转换层,无需更改业务逻辑。

项目需求更改: 前端可以在接口转换层中转换输出更加简洁的数据结构,业务逻辑层的改动更加少

以上所述就是小编给大家介绍的《个人对前后端分离的一些看法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

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

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

相关文章

涉及JS时实用的简洁方法

当涉及到JavaScript编程时,有许多简洁和实用的方法可以帮助你更有效地编写代码。以下是一些常用的简洁方法: 箭头函数: 箭头函数是一种简洁的语法形式,适用于单行函数表达式。它可以让你更紧凑地定义匿名函数。 // 传统函数 fun…

Linux系统中的自旋锁(两幅图清晰说明)

总结: 多CPU下的自旋锁采取的是忙等待(原地打转)机制,虽然忙等待的线程占用了它所在的cpu,但其他线程仍可放到其他CPU上执行。所以自旋锁上锁和解锁之间的临界区代码要尽量的短,最好不要超过5行&#xff0c…

jenkins流水线

1.拉取代码 https://gitee.com/Wjc_project/yygh-parent.git2、项目编译 mvn clean package -Dmaven.test.skiptrue ls hospital-manage/target3、构建镜像 ls hospital-manage/target docker build -t hospital-manage:latest -f hospital-manage/Dockerfile ./hospital-ma…

AWD攻防学习总结(草稿状态,待陆续补充)

AWD攻防学习总结 防守端1、修改密码2、备份网站3、备份数据库4、部署WAF5、部署文件监控脚本6、部署流量监控脚本/工具7、D盾扫描,删除预留webshell8、代码审计,seay/fortify扫描,漏洞修复及利用9、时刻关注流量和积分信息,掉分时…

业绩难言乐观,皓泽电子撤回上市申请,小米等为其关联方

撰稿|行星 来源|贝多财经 8月8日,深圳证券交易所披露的信息显示,由于河南皓泽电子股份有限公司(下称“皓泽电子”)及其保荐人主动要求撤回申请文件,深交所终止了皓泽电子的发行注册程序。 据此前招股书披露&#xff…

python爬虫实战(1)--爬取新闻数据

想要每天看到新闻数据又不想占用太多时间去整理,萌生自己抓取新闻网站的想法。 1. 准备工作 使用python语言可以快速实现,调用BeautifulSoup包里面的方法 安装BeautifulSoup pip install BeautifulSoup完成以后引入项目 2. 开发 定义请求头&#xf…

Fast Tone Mapping for High Dynamic Range Images

Abstract 我们提出了一种快速、有效、灵活的色调再现方法,在低动态范围再现设备中保留了高动态范围场景的可视性和对比度印象。 一个单一的参数控制能见度和对比度在一个简单和优雅的方式和互动速度。 新方法使用简单,计算效率高。 实验表明&#xff0c…

Spring Boot Actuator未授权访问漏洞

1.问题 Spring Boot Actuator 端点的未授权访问漏洞是一个安全性问题,可能会导致未经授权的用户访问敏感的应用程序信息。 可是并不用太过担心,Spring Boot Actuator 默认暴漏的信息有限,一般情况下并不会暴露敏感数据。 注册中心有些功能集…

Jenkins+Docker+SpringCloud微服务持续集成

JenkinsDockerSpringCloud微服务持续集成 JenkinsDockerSpringCloud持续集成流程说明SpringCloud微服务源码概述本地运行微服务本地部署微服务 Docker安装和Dockerfile制作微服务镜像Harbor镜像仓库安装及使用在Harbor创建用户和项目上传镜像到Harbor从Harbor下载镜像 微服务持…

RK3568蓝牙程序开发过程

1、搭建蓝牙开发环境 蓝牙开发可以使用C语言开发或python语言开发,使用的是蓝牙开发库为bluez库。 本文开发使用python语言开发,安装bluez库,可以使用pip install PyBluez来安装。 如果安装不上的话,可以使用sudo apt install pyt…

Kafka与Zookeeper版本对应关系

文章目录 了解版本对应Kafka安装包Kafka源码包 了解 比如: kafka_2.11-1.1.1.jar包 其中2.11表示的是Scala的版本,因为Kafka服务器端代码完全由Scala语音编写。”-“后面的1.1.1表示的kafka的版本信息。遵循一个基本原则,Kafka客户端版本和服…

无涯教程-Perl - getnetbyname函数

描述 此函数返回由NAME指定的网络信息(在列表context中)($name,$aliases,$addrtype,$net) 语法 以下是此函数的简单语法- getnetbyname NAME返回值 此函数在错误时返回undef,否则在标量context中返回网络地址,在错误时返回空列表,否则在列表context中返回网络记录(名称,别…

pandas 笔记 date_range

返回固定频率下的datetime 1 使用方法 pandas.date_range(startNone, endNone, periodsNone, freqNone, tzNone, normalizeFalse, nameNone, inclusiveboth, *, unitNone, **kwargs) 2 基本参数 start、end、periods至少需要两个 start生成日期的左边界end生成日期的右边界…

错误: XXXAdapter不是抽象的, 并且未覆盖Adapter中的抽象方法onBindViewHolder(ViewHolder,int)

一、问题描述 在学习Android可侧滑删除的RecyclerView的时候,遇到了下面的报错 错误: SwipeDelAdapter不是抽象的, 并且未覆盖Adapter中的抽象方法onBindViewHolder(ViewHolder,int) public class SwipeDelAdapter extends RecyclerView.Adapter { ^ 在上面的…

java springboot word文档转pdf

java springboot word文档转pdf 1、环境2、依赖3、代码 1、环境 1、java、springboot 2、maven或者gradle 3、办公软件(自己电脑上的wps或者office等,如果部署到服务器上也要安装,linux、Mac 都有,自己安装) 可能会遇…

用zabbix实现web监控

上篇我们说到了用最简单的web页面监控,如果你的页面只有ip和port就可以访问的话,那么简单的监测没有问题了。如果……开发给你的网站在后边加了个目录呢?那么就绕不开了web场景监控了。 一、添加模板 在【模板】上新建一个模板,…

操作系统—调度算法

进程调度算法 进程调度算法也称CPU调度算法 调度发生时期 当进程从运行状态转到等待状态;当进程从运行状态转到就绪状态;当进程从等待状态转到就绪状态;当进程从运行状态转到终止状态; 其中发生在 1 和 4 两种情况下的调度称为…

[QCM6125][Android13] 关闭救援模式

文章目录 开发平台基本信息问题描述解决方法 开发平台基本信息 芯片: QCM6125 版本: Android 13 kernel: msm-4.14 问题描述 安装系统在未响应5分钟的时候,系统会自动进入救援模式,这时候需要通过音量键和电源键进行操作才能再次进入系统。对于无人值…

物理层扩展以太网

扩展站点与集线器之间的距离:   在10BASE-T星型以太网中,可使用光纤和一对光纤调制解调器来扩展站点与集线器之间的距离。   为站点和集线器各增加一个用于电信号和光信息号转换的光纤调制解调器,以及他们之间的通信光纤。 扩展共享式以太…

Unity开发笔记:截取指定位置含有UI的场景截图并输出

学习记录整理,自用,也希望能帮助到有相同需求的人。 如果直接截全图: string screenshotName "Assets/Textures/UI/20230803/2.png";ScreenCapture.CaptureScreenshot(screenshotName);截取指定位置含有UI的场景截图: …