Vue - Get类型接口步骤

作者: 璃小灯吖 | 来源:发表于2019-12-04 17:35 被阅读0次

    最近学习怎么接接口,写个步骤文档以后用。有什么不对的地方,请多指教~
    以树形控件接口为例

     <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick" @click="handleCreate" />
    

    1、在user.js目录下写一个请求方法 "getDictInfo"

    由于是get方法所以在()中不需要入参。

    url由接口文档给出 接口文档示例.jpg
    // 护理等级获取护理单元字典列表
    export function getDictInfo() {
      return request({
        url: '/admin/busNursingClass/getDictInfo',
        method: 'get'
      })
    }
    

    2、在需要接接口的页面的script中引入方法

    import { getDictInfo } from '@/api/user'
    

    3、在data的retrun中定义一个数组list[ ]

    export default {
      data() {
        return {
          defaultProps: {//上面:props="defaultProps"
            label: 'name'
          },
          labelPosition: 'right',
          list: []//上面绑定:data="list"中的list
        }
      },
    

    4、写一个获取数据的方法"getTreeData"

     getTreeData() {
          getDictInfo().then(res => {
            this.list = res.data.list
          })
        },
    

    5、效果图

    树形get接口效果展示.jpg

    6、结语

    关于树形控件的样式修改在我的另外一篇文章有说明。
    https://www.jianshu.com/p/0c9acf78024e
    准备更新Post接口的连接方式。

    相关文章

      网友评论

        本文标题:Vue - Get类型接口步骤

        本文链接:https://www.haomeiwen.com/subject/whylgctx.html