Vue-element-admin 学习之路

Vue - Get类型接口步骤

2019-12-04  本文已影响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接口的连接方式。

上一篇下一篇

猜你喜欢

热点阅读