前端接口的一些使用技巧

左手的ㄟ右手 2021-08-26 18:13 443阅读 0赞

需求

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

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

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

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

![在这里插入图片描述][20200314133545339.png]  
第二种可能就是接口返回的数据，你只取到data，其实data下面还有层级  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]  
res.data.result

[20200313111622952.png]: /images/20210813/f5a8f9f9af754f818fd84e38406ea6f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/8fe8de9fd25c4b2da1c97bbc1e7fc457.png
[2]: https://blog.csdn.net/qq_38845858/article/details/104835347
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210813/02f843cd8a044369a9c323c0a36fad6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210813/c7e4fd61c9704a6fb04e8d23dd08f2a6.png
[20200314133346936.png]: /images/20210813/9cc49ccbf141428187bf359832b1b15c.png
[20200314133545339.png]: /images/20210813/a2e6b97ae4554d28b8804aa71d104751.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020031413371281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]: /images/20210813/0922663255864827835cbfbd93612962.png