最近从B定制app开发站上面跟着敲 vue 的项目,定制app开发多次看到有关于前台拿定制app开发到后端的接口地址文档,定制app开发写前端接口,定制app开发然后请求后台数据,放到 vuex 当中,定制app开发再然后再在需要展示数定制app开发据时渲染出来,于是做个输出小结,分享出来,供大家一起学习进步。
一、先看后台提供的相关接口文档(如下图)
-其中我感觉最重要的就是我用红框圈起来的 4.1请求地址
二、然后找到自己项目中对应写接口的文件下添加相应符合要求的接口
上图所示的文件下有很多个接口,红框圈起来的是本次的接口,此次项目用到的是 ,发请求有两种写法,一种是对象写法( axios.post(‘url’)),另一种是函数写法( axios({})) 上图这次接口用到的是函数写法。其中也有对象写法,在红框上方的两个 mock 数据的请求,有关 mock的知识 后期我再单独写篇博客输出。
三、前端接口写好后,去相应的 vuex 模块仓库引入接口函数(一般项目的vuex仓库都放在名为 “store” 文件夹下),并在对应的配置对象下,写“三连环的套路” (如下图)
上图 关于仓库我是把 vuex 的仓库分成了若干个 小仓库 ,每个 小仓库 对应项目中的一个组件模块的数据保存,然后再把它们统一放到 大仓库 中(如下图所示)
可以看到 store 文件夹中有 home 和 search 两个子文件夹,与home 和 search 文件夹并列有一个 index.js 是 大仓库,两个 小仓库 分别在 home 和 search 两个子文件夹下的 index.js 相关大仓库合并小仓库代码入下图所示
呃··· 扯偏了,继续看如何在 vuex 仓库中请求后拿到后台数据,然后 “三连环” 式的放到 state 配置对象下,供全局组件使用从后台拿过来的数据 (看下图)
四、到此,就可以在全局相应的组件使用 this.$store.dispatch(‘getSearchList’) 这条语句来触发 仓库中的 actions 配置对象中的相应 接口函数 进行数据请求,然后接收了(这条语句请求的是 getSearchList 这个函数对应的接口)。(如下图)
一般是在组件挂载完毕的生命周期钩子函数写这条语句(根据个人业务需求)
五、我写在了我项目中的一个组件里,当组件被挂载完毕时,这条语句便会执行了,相应的一系列连锁反应就会发生了(三连环完毕后),通过 vue 的开发者调试工具可以看到最终拿到的数据 (看下图)
六、当然也可以在用到此组件的相关页面渲染完毕后,通过浏览器的 F12 调试工具下 的 NetWork 查看数据的请求情况(看下图)
七、在代码中 log 打印出来也方便查看数据和相应的调试
总结:刚开始写博客,没有什么书写经验、分享经验、会慢慢学习进步,大家多多包涵。一同进步!!!
呃呃呃··· 大总结:
- 先根据后台给的接口文档,在 前端项目 API 接口文件下写前台接口 (一般在 src 的 api 文件夹下)
- 然后从前台项目的 store 文件夹的相关仓库 写三连环
- 在相应组件中的合适位置 利用 this.$store.dispatch(‘xxx’) 触发相关store对应组件仓库 中的 actions配置对象的请求函数,拿到数据。over over