前端环境：vue
使用的vue 组件：iview
后端项目框架：beego
实现功能：从数据库中读取数据绑定到选择菜单栏
前端定义请求的路由地址
文件：src/api/demands.js
// 获取集群列表
export const getClusterList = ()=>{
return SiodAxios.request(
{
url: baseURL + ‘demand/clusterList‘,
method: ‘get‘,
})
}
vue页面demo
<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
}
原文：https://www.cnblogs.com/Bccd/p/13215013.html