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: