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:

  • 相关阅读:
    NoSQL数据库 Couchbase Server
    百度推广账户搭建思路
    禅道发邮件配置
    ASP 500错误解决方法
    MYSQL无法连接,提示10055错误尝试解决
    制作不随浏览器滚动的DIV-带关闭按钮
    [CSS3] :nth-child的用法
    [JS] 四角度旋转特效
    [JS] 瀑布流加载
    [CSS3] 二级下拉导航
  • 原文地址:https://www.cnblogs.com/Bccd/p/13215013.html
Copyright © 2011-2022 走看看