前端需调用后端数据作为判断条件

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量366 收藏 4
点赞数 8
分类专栏： 前端开发踩坑记录 前端 Vue 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50298323/article/details/141568467
版权

前端需调用后端数据作为判断条件

一、需求场景

  • 需求分析：前端需要后端返回的的数据做为前端的判断条件

思考：
1.后端数据是异步的
2.前端如何将拿到的异步数据放入同步的函数中做为条件判断且需要实时监听是否更新

二、实现逻辑

2.1 使用computed+ watch实现

  • 前端使用computed进行计算： 但是computed不能异步，它是有缓存的，所以此时需要借助watch进行辅助监听
  • watch中监听后端数据是否有返回： 若有返回则设置flag字段告知前端，后端已返回数据，可使用该条件进行判断

2.2 使用setTimeout实现

  • 借助setTimeout实现数据更新

2.3 使用methods代替computed

  • methods代替： 即在methods中进行请求后端接口作为条件判断，但此方案存在性能问题

2.4 具体方案需要根据computed、watch、methods的优缺点去实现

Vamp_Piece
关注
专栏目录
数据分析【前端分析后台传过来的数据以及向后台传值】
weixin_43932281的博客
12-10 1265
 后台传值的两种数据格式  json对象字符：var str=  '{"name":"胡小威" , "age":20 , "male":true}' json数组 ：[{"name":"胡小威" , "age":20 , "male":true},{"name":"赵小亮" , "age&quot
前端调用后端接口,并把数据做分页处理
weixin_57400398的博客
02-08 2807
在methods方法下方进行调用封装的接口,方法名随便起,调用接口方法中的变量和在封装接口中require保持一直,最下方做成功返回数据,若是做数据分页处理,在成功返回下方进行做(下方详细说明)如下图:封装了一个接口,默认值处如果有默认值就写,如果没有默认值就直接写参数名,request下方记得把参数写全。methods中的方法处理好后,先在script下方声明that,格式就是。前端最主要的工作就是联合后端,调用后端接口,把页面用后端数据渲染出来。,记得导入你所封装的接口,,最后调用接口的方法名。
如何判断BUG是前端BUG还是后端BUG
了解➔熟悉➔掌握➔精通
09-10 5189
一般像界面上的错别字、字体大小、控件显示、输入框超出边界、字符被截断、字符重叠等问题，不要犹豫、不要徘徊，肯定是前端问题。界面报404的八成是前端写错了请求地址，指给前端开发；报500的，一般是后端问题，指给后端开发。
前端如何使用后端提供的接口拿数据，文件配置及详细使用
m0_61663332的博客
01-06 7491
前端如何使用后端提供的接口，怎么通过后端返回的数据渲染页面，通过vuex和localstorage对用户登录后的token进行持久化处理，通过携带登陆成功的token获取后端的值
前端根据后端数据展示表格 处理数据 动态合并单元格
hy2356891299的博客
05-23 1998
前端根据后端数据展示表格 处理数据 动态合并单元格
前端渲染与后端渲染
weixin_52584067的博客
02-08 2497
1.后端渲染（服务器端渲染）： 语言：jsp(java server page)/php 端数：两端开发（浏览器+服务器） 过程：当用户对浏览器请求一个地址时，比如https://space.bilibili.com/，这个url=https://space.bilibili.com/，我们可以暂时称其为url1，url1请求的地址到达服务器之后，服务器会自己进行判断，原来这次请求是请求这个url1的地址，对url1进行解析，通过后台有一种jsp的技术会把你的网页给你写好，言而总之：就是你的网页已经在服务器
前端选中ID批量删除后端数据完整步骤
qq_40859823的博客
10-25 4185
数据库的表和数据 创建product表 CREATE TABLE `product` ( `id` int(11) NOT NULL, `productNum` varchar(50) DEFAULT NULL, `productName` varchar(50) DEFAULT NULL, `cityName` varchar(50) DEFAULT NULL, `Dep...
判断bug属于前端还是后端
Maverickps的博客
11-26 1万+
测试人员，有效快速地判断bug属于前端/后端
前端模拟后端接口返回数据的方法
清晨-阳光的博客
11-09 7375
前端模拟后端接口返回数据的方法： 1.直接在接口代码中写死数据 2.将模拟数据存放在json文件或者js脚本中，通过请求的方式获取数据 3.使用server-mock服务模拟数据 4.使用node搭建简单服务器接收请求返回数据
python前端调用后端模型_【Python】【Flask】前端调用后端方法
weixin_39908588的博客
12-07 764
后端代码：@app.route("/test",methods=['POST','GET'])def test():return "我是测试的"前端代码：1、使用标签我是测试这个是最简单的，点击一下，就自动跳转了。2、使用的onclick说起这个，光这个click就折腾了我一整天了。网上找不到啊。初学 网页+Python+Flask，所以根本不懂啊，又找不到。最后终于解决。点我啊之前为什么一直失败...
【Python】【Flask】前端调用后端方法
weixin_34167043的博客
12-24 3218
后端代码： @app.route("/test",methods=['POST','GET']) def test(): return "我是测试的" 前端代码： 1、使用<a>标签 <a href="{{url_for('test')}}">我是测试</a> 这个是最简单的，点击一下，就自动跳转了。 2、使用<bu...
前后端项目分离之前端（vue项目）如何调用后端接口
热门推荐
Luomaomao_baby的博客
06-09 3万+
本文所用vue-cli是3.0版本的，所以首先需要创建一个vue.config.js文件，然后配置axios，就可以请求接口获取数据了。 1.main.js文件中： import axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL = '请求地址';//后端开发环境地址 axios.defaults.headers.post['Content-Type'] = 'application/json;charset
【学习笔记】Web前端到后端数据的交互
m0_67402341的博客
03-02 660
【学习笔记】Web前端到后端数据的交互 ??博客首页：** ?? ??文章目的：HTML—入门篇?? ??博主也在学习阶段，如若发现问题，请告知，非常感谢?? ??同时也非常感谢各位小伙伴们的支持?? ??每日一语：拿的起放的下！ ?? ??本文参考了尚硅谷的最新JavaWeb?? 文章目录 【学习笔记】Web前端到后端数据的交互 前言 使用工具 完成HTML代码 表单 form web.xml的配置 后端获取前端传递的数据 前言 相信大家都在一些网站上面经历过注册和登录过，当我们在
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 366
Vue根实例、实例总结
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 590
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
2303_81204446的博客
09-30 369
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5823
Webpack 打包后文件过大，如何优化？
vue前端调用后端接口在.then()中添加if判断如果判断条件通过停止向下运行
05-31
在 Vue 前端调用后端接口时，可以使用 Promise 来处理异步请求，然后在 `.then()` 方法中添加条件判断，如果条件不通过，可以使用 `return` 语句来停止向下执行。例如： ```javascript axios.get('/api/data') ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值