vue 实现从后端获取数据渲染选择框

前端环境：vue

使用的vue 组件：iview

后端项目框架：beego

实现功能：从数据库中读取数据绑定到选择菜单栏

前端定义请求的路由地址

文件：src/api/demands.js

// 获取集群列表
export const getClusterList = ()=>{
  return SiodAxios.request(
    {
      url: baseURL +  'demand/clusterList',
      method: 'get',
    })
}

vue页面demo

1. 导入在外部定义的api路径
2. 在mount或者create阶段调用方法从后端获取数据，并将结果集赋值给在data中定义的变量

<template>
    <Select
     v-model="applyInfo.clusterName"
     clearable>
     <Option v-for="item in clusterNameList" :key="item.ClusterName" :value="item.ClusterName">
       {{item.ClusterName}}
     </Option>
    </Select>
</template>
<script> import {getClusterList} from "@/api/demands"; export default { data(){ clusterNameList:[], applyInfo:{ clusterName:"" } }, mounted() { //获取集群列表  getClusterList().then(res=>{ if(res.status === 0 ){ this.clusterNameList=res.messageInfo }else{ this.clusterNameList=[] } }) }, } </script>

 

 

后端功能函数

 

//给前端提供服务器列表
func (c ClusterController) GetClusterList() {
	var clusterList models.ClusterInfo
	var resultInfo = global.ResultInfo{}
	cluterNameResult, err := clusterList.ReadAllDbaInfo()
	if err != nil {
		common.Log.Warn("Fail to get clusterList,err=[%v]", err)
		resultInfo = common.GenResultInfo(global.TASK_FAIL, "", err)
		c.Data["json"] = resultInfo
		c.ServeJSON()
		return
	}
	resultInfo = common.GenResultInfo(global.TASK_SUCCESS, cluterNameResult, nil)
	c.Data["json"] = resultInfo
	c.ServeJSON()
	return
}

　　

• 通过orm读取全表数据返回的数据结构无需处理，可以直接适用于前端组件，clusterNameResult: