前端接口的一些使用技巧

需求

  1. 点击编辑按钮,弹出编辑的对话框,但是,对话框里面的信息,必须是原来的信息

在这里插入图片描述
在这里插入图片描述
做法: 别看是编辑按钮,但是在你点击编辑按钮的时候,调用的是根据id查询到的数据的接口,先展示在对话框里,当你编辑完数据,点击确定按钮,调用的才是编辑提交接口

  1. 请求接口,出现参数不能为空? 我也不知道你要什么数据,可不就是为空?
    详见这篇博客 问题2
  2. 关于数据的修改和保存操作
    数据的修改,首先是调用查询数据的接口,将数据显示在页面。 保存修改的数据,可以使用查询接口获取到的参数
    在这里插入图片描述
  3. 删除数据的接口,一般都是有一个删除的提示,一般人都是删除完,重新调用页面的所有数据,单数这样会形成数据全部重载,操作人如果想留在当前操作的界面,是不行的。那么直接刷新页面数据行不通
    由于调用删除的接口,已经返回的是角色下最新的数据。所以直接进行赋值操作就ok
    在这里插入图片描述
  4. 不管是删除操作,查询操作,添加操作,都需要根据id来查找操作对象
    这个时候,作用域插槽就显得尤为重要 ,将需要操作的按钮,用作用域插槽包裹起来
<template s;ot-scope="scope">
<el-button type=“primary”  @click="delete(scope.row.id)">删除</el-button>
 </template>

这样就可以很轻松的获取到id 值
6. 接口需要字段拼接,建议使用模板字符串 ${name}
7. 接口出现
在这里插入图片描述
很有可能是你在定义数据的时候,需要数组,你定义的是对象

在这里插入图片描述
第二种可能就是接口返回的数据,你只取到data,其实data下面还有层级
在这里插入图片描述在这里插入图片描述
res.data.result

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章