目前前后端协作，遇到的问题及思考

最新推荐文章于 2024-05-21 20:39:04 发布
原创 最新推荐文章于 2024-05-21 20:39:04 发布 · 4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前后端分离

本文探讨了前后端分离的必要性及实施方案，强调前端独立开发的重要性，并提出使用Node.js、Webpack等技术实现自动化构建与部署，以提高开发效率。

前端与后端协同问题

  • 前端出的页面是中间产品，不是最终产品。
    • 需要二次加工，提取公共部分，header、footer
    • 二次修改，前端修改好页面，后端工程师需要再修改一次
    • 前端中的页面与实际应用的页面，不一样
      • 比如后台工程师修改了关于样式的小问题，前端工程师手中的页面就跟实际的不一致了
  • 前端修改时，依赖后端环境，依赖数据
    • 修改页面、样式，让前端工程师，来后端工程师处调试

从工程上来说存在的问题

  • 缓存问题
    • 修改样式，替换图片后，浏览器有缓存
  • 按需加载问题
    • 公共头部引入了全部的脚本、样式，比如jquery/bootstrap/date插件/下拉菜单插件/树插件，日期插件、下拉菜单插件，日期、树、下拉菜单不是每个页面都需要的
  • 脚本压缩
    • 开发时是原始版，上线是压缩版

理想的状态

  • 前端独立于后端
    • 前端工程可以独立启动，即时刷新，能提供数据，能测试。
    • 调样式，无须后台参与，前端工程师修改后，提交即可，后台工程师无需二次修改

解决方案

  • 前后端工程师共享前端工程，共同维护，人维持原样。
    • 前后端从代码上完全分离，前端（页面、样式、图片、字体）一个工程，可以独立启动，有模拟数据
      后端，只提供接口数据
  • 解决的问题
    • 前端产出的页面就是直接可用，无需二次加工
    • 前端开发、调试，都无需依赖后端
    • 实时刷新，生产效率高

具体操作步骤

  • 最初，前端工程师出前端工程，可用的、无需二次加工的、带模拟数据？
  • 前端开发完毕后，后台工程师接手，对接后台接口。
  • 有改动，前端工程师启动前端工程，修改后，提交即可。

技术方案

  • Nodejs+npm
    • 解决开发环境，依赖问题
  • Gulp/webpack
    • 解决自动化，代码分析、压缩、打包、优化，版本号管理
  • Babel
    • 编译es6语法
  • Eslint
    • check js语法
  • React/vue/angular?
    • 一期可以不使用，带来的问题，拼html等问题
wangjun5159
关注
基于Java+Springboot+Vue前后端分离的商品进销存管管理系统
znbcj的博客
10-11 1201
当今社会，随着电子商务行业的快速发展和商品交易的日益增长，对商品进销存的管理需求也愈加迫切。传统的手工记录和管理方式已经无法满足高效、准确的需求，因此，研发一款基于Java+Springboot+Vue前后端分离的商品进销存管理系统具有重要的实际意义。研究背景主要体现在以下几个方面：提升管理效率：传统的商品进销存管理方式依赖于人工的物料统计、录入和查询等操作，存在着大量的人力资源浪费、信息不及时等问题。
DDD与微前端：前后端统一的领域模型设计
最新发布
架构师的AI之路，分享AI应用开发架构的学习与实践。
06-05 1004
在传统前后端分离开发中，我们常遇到这样的尴尬：后端定义了一套“订单”模型（包含orderIditemsstatus），前端却因为页面展示需求，重新定义了一套“展示订单”模型（多了userNameaddress当业务规则变更（比如“未支付订单30分钟自动取消”），后端改了逻辑但前端没同步，导致页面状态和实际数据不一致。本文将聚焦“如何用DDD和微前端统一前后端领域模型”，覆盖从概念理解到实战落地的全流程，帮助团队解决模型割裂、协作低效的问题。DDD如何用“限界上下文”划分业务边界。
前端和后端如何实现高效协作
qq_36764457的博客
11-05 3004
一、前后端分离 二、尽量避免后端模板渲染 web渲染方式分为服务器端渲染和客户端渲染，推荐使用客户端渲染，数据通过ajax方式交互 三、尽量避免大量线上调试 做好本地接口模拟开发 四、规范的接口文档 格式简洁、接口名、接口描述、接口地址、http方法、参数、响应数据等 五、去缓存 可以使用webpack，文件自动hash化命名 六、做好错误处理 七、运行时捕捉js脚本错误 八...
前后端对接的思考及总结
weixin_30236595的博客
04-22 591
说在前面的话 随着前端NodeJs技术的火爆,现在的前端已经非以前传统意义上的前端了,各种前端框架(Vue、React、Angular......)井喷式发展,配合NodeJs服务端渲染引擎,目前前端能完成的工作不仅仅局限于CSS，JS等方面，很多系统的业务逻辑都可以放在前端来完成，例如我司的管控 那可能有些人会说,前端这么火,NodeJs发展这么迅猛,后端是不是以后都没事情干了，其实不然,拿...
浅析前后端对接问题
hxtxsdcxy的博客
03-18 2003
浅析前后端对接问题 一、JSON 概念： JavaScript Object Notation :JavaScript对象表示法(早期：在JavaScript中，用json来表示对象) 例：var p = {“name”:“张三”,“age”:“23”,“gender”:“男”}; JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串,我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 语法： 数据在名称/值对中：json数据是由键值对构成的键用引号(单双都
谈谈前后端的分工协作
weixin_33841503的博客
08-03 395
前后端分工协作是一个老生常谈的大话题，很多公司都在尝试用工程化的方式去提升前后端之间交流的效率，降低沟通成本，并且也开发了大量的工具。但是几乎没有一种方式是令双方都很满意的。事实上，也不可能让所有人都满意。根本原因还是前后端之间的交集不够大，交流的核心往往只限于接口及接口往外扩散的一部分。这也是为什么很多公司在招聘的时候希望前端人员熟练掌握一门后台语言，后端同学了解前端的相关知识。 一、开发流程...
山东大学创新实训---前后端数据连通存在的困难
jishang_的博客
06-03 194
问题：后端给的数据和展示有较大出入 表一： 后端存储数据内容 我需要展示的表格形式 问题： 并不是大类小类区分即可，而是返回数据先统计到小类随后，小类计算得到大类。 最终实现： 把得到的后端数据按照我们小类进行累加计算，对最终结果微调，变得符合我们数据格式要求。表二同理。 ...
前后端分离架构：仓库管理系统的实施与深度思考
[前后端分离架构：仓库管理系统的实施与深度思考](https://community.fabric.microsoft.com/t5/image/serverpage/image-id/10507i643EE8D707E66E02/image-size/large?v=v2&px=999) # 摘要 本文系统介绍了前后端分离...
【前后端分离】：高效RuoYi前后端分离秘籍
![ruoyi框架前后端交互教程.docx]...进一步，本文对前后端分离的高级实践进行了探讨，涉及前端工程化、后端微服务架构、性能优化策略，并结合具体项目案例对实施过程和解决遇到的问题进行了详细分析。最后，文
ZYPLAYER影视源的前后端分离：提高开发效率与维护性的最佳实践
此外，文章还涉及了前后端协作流程的管理、工具使用以及ZYPLAYER项目的案例分析，包括需求分析、系统架构设计、测试与部署。最后，对前后端分离模式进行了总结，并对未来技术趋势进行了预测和展望。 # 关键字 前后...
springboot 前后端分离项目跨域配置
weixin_30525825的博客
01-25 267
@Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") ...
在网页开发中，前后端如何更好地协同工作？
xy520521的博客
05-21 1168
前端负责UI设计和交互逻辑的实现，后端负责数据库设计和服务器端逻辑的实现。通过以上的方法和技巧，前后端开发人员可以更好地协同工作，提高项目的质量和效率。1.明确需求和规范：前后端应该共同讨论和明确项目的需求和规范，包括功能、界面、数据格式等。前端需要明确告知后端需要的数据格式和接口需求，后端需要提供符合前端需求的接口。6.测试和调试：前后端应该共同进行测试和调试，确保项目的稳定性和可靠性并修复漏洞和错误。7.持续集成和部署：前后端应该进行持续集成和部署，确保项目的持续交付和快速反馈。
前后端配合小结
world6的博客
07-24 944
后台返回的 json 数据 字段最好只有三种， status , message, data. 具体情况如下： 如果请求的结果是 success的，不论调用的接口返回何种报错 都是 success ，结果的报错 直接透传到 前端，让前端的同学去处理，后端不要做任何处理。此时返回 status、 message  、 data。   如果请求的结果的 fail 的， 比如调用接口时返回异常了...
SVN协同开发出现的问题
小柯的博客
01-05 759
因为公司需求 需要把老版本的项目重新上传到SVN，中间遇到一些问题,正确操作总结如下。 1.需要这三个的选项钩去掉。 2.同事修改.idea文件夹下面的vcs的文件。 mapping directory="" vcs="svn" /> 改为 mapping directory="" vcs="" />3.用模糊搜索在 路径下面搜索.svn的目录 然后全部删除。（关键是解决svn: E15
前端如何高效的与后端协作开发
weixin_33735077的博客
10-30 714
前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。 可以参考：前后端分离、web与static服务器分离 2. 尽量避免后端模板渲染 web 应用的渲染方式分为服务器端渲染和客户端渲染，当下比较推荐的方式是客户端渲染，数据使用全...
前后端分离中遇到的哪些坑
qq_44722108的博客
10-14 565
前后端分离中遇到的哪些坑
关于团队协作开发的一些思考
zhichaosong的博客
07-04 2415
感觉现在存在一些问题： 阶段任务不明确 培养成长计划不完善 代码质量无法保证 团队成员间的任务互相不了解 解决措施： 明确每周每月任务，绩效如何评定 知识分享、培训（在线课程、知识库、GitHub）、成长计划 代码审核（gerrit，phibricator） 规范开发流程 硬件措施： 人体工学椅子 固态硬盘 操作系统 ...
【场景方案】与后端接口斗智斗勇的这几年，我帮前端小伙伴们提供了一些策略，也给后端大佬提点建议
庞囧的博客
04-27 1186
本次文章记录我个人在几年的工作中，对后端的接口输出工作，做了一些小小的总结。从一个前端小白的角度，提出一些接口工作中的注意事项。供大家参考！有共鸣的小伙伴记得赏我一个赞哈~
前后端websocket 解耦。 数据库加一条记录 前端订阅那个表 add 事件 获得最新的数据
03-20
<think>嗯，用户问的是前后端通过WebSocket解耦，具体场景是数据库加一条记录，前端订阅表的add事件来获取最新数据。首先，我需要理解用户的问题。他们可能是在开发一个实时应用，比如聊天应用或者实时数据监控，需要前端在数据库有新数据时自动更新，而不需要轮询或者手动刷新。 用户提到的解耦，应该是指前后端之间通过事件通信，而不是直接调用API接口。这样可以减少前后端的直接依赖，后端只需要发布事件，前端订阅这些事件，这样双方的变化不会互相影响。比如，如果后端改了数据库结构，只要事件的数据格式不变，前端就不需要修改。 接下来，用户的具体例子是数据库添加记录，前端订阅表的add事件。这里需要考虑如何实现数据库的触发器或者监听机制，当有新的记录插入时，后端如何捕获这个事件，并通过WebSocket推送给前端。常见的做法是，后端使用ORM框架的钩子函数，或者在数据库层面设置触发器，当插入操作发生时，触发一个事件，然后后端将这个事件通过WebSocket广播给所有订阅的前端客户端。 然后，需要思考前后端的架构。后端可能需要一个WebSocket服务器，比如使用Node.js的Socket.io或者Python的WebSockets库。当数据库插入新记录时，后端捕获这个事件，然后通过WebSocket发送给前端。前端则需要建立WebSocket连接，并订阅特定的事件，比如“table_add”，当收到事件时，更新界面。 还需要考虑安全性，比如如何验证前端用户的订阅权限，确保只有授权的用户才能收到特定的事件。另外，如何处理WebSocket的连接稳定性，比如断线重连，以及消息的确认机制，确保前端不会丢失数据。 可能用户遇到的问题包括如何在后端监听数据库的变化，如何高效地推送消息，以及如何管理多个前端客户端的订阅。解决方案可能涉及到使用消息队列，比如Redis的发布订阅功能，或者使用专门的实时数据库如Firebase，但用户可能希望用传统的数据库加上WebSocket实现。 此外，用户可能希望了解具体的实现步骤，比如后端如何配置WebSocket，如何与数据库交互，前端如何订阅事件等。需要给出一个清晰的架构图和代码示例，帮助用户理解整个流程。 总结下来，用户的需求是实现前后端通过WebSocket解耦，实时获取数据库新增记录。需要解释如何利用WebSocket建立实时通信，后端如何监听数据库变化并推送事件，前端如何订阅这些事件，以及这种架构的优势和注意事项。</think>--- ### **1. 场景需求分析** 当数据库插入新记录时，前端需实时获取最新数据，无需手动刷新。传统轮询（Polling）效率低且延迟高，而 **WebSocket + 事件订阅** 能实现高效实时通信，同时解耦前后端逻辑。 --- ### **2. 核心架构设计** ```mermaid graph TD A[前端] -- 订阅事件 --> B(WebSocket服务端) C[后端业务逻辑] -- 数据库插入 --> D[(数据库)] D -- 触发事件 --> C C -- 推送事件 --> B B -- 推送数据 --> A ``` --- ### **3. 实现步骤** #### **步骤 1：后端监听数据库变化** 以 **Node.js + Socket.io + MongoDB** 为例： ```javascript // 后端服务逻辑 const socketIo = require('socket.io'); const mongoose = require('mongoose'); // 连接 MongoDB mongoose.connect('mongodb://localhost:27017/mydb'); // 定义数据模型 const Record = mongoose.model('Record', { content: String, createdAt: Date }); // 监听 MongoDB 插入操作（通过 Mongoose Hook） Record.watch([{ $match: { operationType: 'insert' } // 仅监听插入事件 }]).on('change', (change) => { const newRecord = change.fullDocument; // 触发 WebSocket 事件 io.emit('record_added', newRecord); // 推送新增记录 }); // 启动 WebSocket 服务 const io = socketIo(server); io.on('connection', (socket) => { console.log('客户端已连接:', socket.id); }); ``` #### **步骤 2：前端订阅事件** ```javascript // 前端代码（浏览器端） const socket = io('http://backend:3000'); // 连接 WebSocket // 订阅 'record_added' 事件 socket.on('record_added', (newRecord) => { console.log('收到新记录:', newRecord); // 更新 UI（例如添加到表格） const table = document.getElementById('records-table'); const row = table.insertRow(); row.innerHTML = `<td>${newRecord.content}</td><td>${newRecord.createdAt}</td>`; }); ``` --- ### **4. 关键解耦点** | 模块 | 职责 | 依赖关系 | |---------------------|-----------------------------|-----------------------| | **前端** | 订阅事件，更新 UI | 仅依赖事件名和数据结构 | | **WebSocket 服务端** | 转发事件 | 不关心业务逻辑 | | **后端业务逻辑** | 监听数据库变化，触发事件 | 不依赖前端实现 | --- ### **5. 优势与适用场景** #### **优势** 1. **实时性** WebSocket 全双工通信，数据直达前端，无 HTTP 轮询开销。 2. **解耦性** - 前端无需知道后端如何监听数据库。 - 后端无需知道前端如何渲染数据。 3. **扩展性** 新增订阅方（如移动端）只需监听同一事件。 #### **适用场景** - 实时聊天、通知系统 - 股票价格、物流状态实时更新 - 多人协作编辑（如在线文档） - IoT 设备数据监控 --- ### **6. 扩展优化** #### **优化 1：事件过滤** 若前端仅需特定类型数据，可细化订阅逻辑： ```javascript // 前端发送筛选条件 socket.emit('subscribe', { event: 'record_added', filter: { category: 'news' } // 仅接收分类为 news 的记录 }); // 后端按条件推送 Record.watch(...).on('change', (change) => { if (change.fullDocument.category === 'news') { io.emit('record_added', newRecord); } }); ``` #### **优化 2：历史记录同步** 首次连接时发送历史数据： ```javascript // 后端 socket.on('connection', async (socket) => { const history = await Record.find().sort({ createdAt: -1 }).limit(10); socket.emit('initial_records', history); // 发送最近 10 条记录 }); ``` #### **优化 3：断线重传** 通过消息队列（如 Redis）缓存未确认事件： ```javascript // 使用 Redis 存储未送达事件 const redis = require('redis'); const redisClient = redis.createClient(); // 发送事件时缓存 redisClient.lpush('pending_events', JSON.stringify(newRecord)); // 客户端重连后重新发送 socket.on('reconnect', () => { redisClient.lrange('pending_events', 0, -1, (err, events) => { events.forEach(event => socket.emit('record_added', JSON.parse(event))); redisClient.del('pending_events'); }); }); ``` --- ### **7. 注意事项** 1. **安全性** - 验证订阅权限（如 JWT 鉴权）。 - 过滤敏感字段（如 `user.password`）。 2. **性能** - 高并发时使用集群化 WebSocket（如 Socket.io 适配 Redis 多节点）。 3. **兼容性** - WebSocket 无法使用时降级为长轮询（Socket.io 自动支持）。 --- 通过 WebSocket 解耦前后端，既能实现实时数据同步，又能保持代码的灵活性和可维护性，是构建现代实时应用的理想方案。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值