zoukankan      html  css  js  c++  java
  • 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:

  • 相关阅读:
    syslog+rsyslog+logstash+elasticsearch+kibana搭建日志收集
    行为型模式(一)
    spring cloud Sleuth
    Java面试题(基础)
    Java笔试题
    Idea创建SpringBoot项目整合Hibernate
    Java中遍历Map的四种方式
    SQL面试题
    Linux入门
    Spring Boot AOP Demo
  • 原文地址:https://www.cnblogs.com/Bccd/p/13215013.html
Copyright © 2011-2022 走看看