项目实战典型案例5——发送调查问卷流程图例子(将不必要的逻辑放入前端)

简介: 项目实战典型案例5——发送调查问卷流程图例子(将不必要的逻辑放入前端)

发送调查问卷流程图例子

一:背景介绍

本篇博客是对**发送调查问卷流程图例子(将不必要的逻辑放入前端)**进行的总结和进行的改进。

目的是将经历转变为自己的经验。通过博客的方式分享给大家,大家一起共同进步和提高。

背景


主要的逻辑:1.在章节推送页面,查询三个执行的章节颗粒会调用后端接口保存规则在redis中。

2.当章节颗粒执行的倒计时进入到10时,前端再调用后端接口获取该章节颗粒的激励配置,并返回个给前端。

3.当章节颗粒结束时判断是否配置发送调查问卷如果配置了,就调用后端发送调查问卷的接口发送问卷,之后继续该流程,执行下一个章节颗粒。如果没有配置则继续该流程,执行下一个章节颗粒。

二:思路&方案

出现的问题

1.将前端逻辑落了多入口和多循环

2. 将不必要的逻辑写入到前端进行处理,导致逻辑混乱难以维护和管理

思路

  1. 将及时器放入到后端:这样的话在后端进行倒计时到十秒的时候调用获取激励规则,计时器到零秒时发送调查问卷。这样的话减少了前端的逻辑判断,将逻辑放入到后端进行。并且减少了入口。
  2. 取消不必要的循环,在流程图上去除循环,没有必要进行调用。


好处

  1. 单独对于发送调查问卷这个业务来说,前端调用后端只有一个入口。单进单出,便于后续的维护工作。
  2. 前端没有复杂的逻辑处理,目前是将逻辑处理都放入到了后端进行。职责分明,前端主要做页面渲染工作,后端进行逻辑运算。

四:总结

  1. 需要明确什么时候必须将复杂的逻辑放入到前端,什么时候需要将复杂的逻辑放入到后端。能放入后端尽量放入到后端。
  2. 对于一个功能模块来说前端调用后端的次数越少越好,减少前端的循环调用后端的接口进行复杂的逻辑处理。
目录
相关文章
|
3月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
59 1
前端一键回到顶部案例
|
3月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`<select>` 和 `<option>`)、文本域(`<textarea>`)、标签解释(`<label>`)、各类按钮(`<button>`)及表单重置功能、无语义布局标签(`<div>` 和 `<span>`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
236 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
3月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
51 0
前端基础(十)_Dom自定义属性(带案例)
|
3月前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
47 2
|
3月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
69 11
|
3月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
167 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
46 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。