将Python/Flask后端呈现给Vue.js前端

Question

我对后端通信的前端概念还不太熟悉，这就是为什么我编写了小型后端程序来使用boto3模块和python获取数据。

我的后端程序工作得很好。

import boto3 
import logging
from botocore.exceptions import ClientError

logging.basicConfig(format='%(message)s')
logger = logging.getLogger('LUCIFER')
logger.setLevel(logging.INFO)

def main():
    try:
        client = boto3.client('iam')
        roles = client.list_roles(PathPrefix='/', MaxItems=1000)
        role_names = []
        for i in roles["Roles"]:
            if "sts:AssumeRoleWithSAML".lower() in str(i).lower():
                role_names.append(i["RoleName"])
                logger.info(role_names)
        return role_names
    
    except ClientError:
        logger.exception("Couldn't list roles for the account")
        raise

if __name__ == "__main__":
    main()

我的烧瓶程序也很好。

from flask import Flask, jsonify
from main import main

app = Flask(__name__)

@app.route("/", methods = ['GET'])
def index():
    role_names = main()
    return jsonify(role_names)

if __name__ == "__main__":
    app.run(debug=True)

现在，我的下一个也是最后一个目标是使用Vue.js将返回的数据呈现给前端。我当前的Home.vue如下所示，它可以很好地处理硬编码值，请参见注释行。

如何在<script> squad: [],下的脚本部分中显示从后端返回的数据(这是班长名称)

任何提示/帮助都将不胜感激。

  <div>
    <v-container fluid>
      <v-row align="center" class="mt-16">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="squad"
            label="Squad Name"
            v-model="selected_squad"
            outlined
          ></v-select>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="accounts"
            item-text="name"
            item-value="id"
            v-model="selected_aws_account"
            label="AWS Account"
            outlined
          ></v-select>
        </v-col>
      </v-row>
      <v-row>
        <v-col class="d-flex justify-center">
          <v-btn elevation="17" x-large @click="printResult">Submit</v-btn>
        </v-col>
      </v-row>
      <v-row v-if="showResult">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <h3>
            Please go to
            <a href="https://provider.com"
              >Okta Self-Service Portal</a
            >
            then go to the left side of the page to Manage Access button then to
            Self Service , Choose Application to be AWS
          </h3>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-text-field
        class
            :value="output"
            label="Role is :"
            outlined
            readonly
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      squad: [],
    };
    // squad: [
    //   "adex",
    //   "catalog",
    //   "cart-checkout-experience",
    //   "checkout-payments",
    //   "customer-care",
    //   "datascience",
    //   "datafridge",
    //   "devx",
    //   "discovery",
    //   "fraud",
    //   "fintech",
    //   "frontend",
    //   "grocery-fulfillment",
    //   "grocery-discovery",
    //   "grocery-basket",
    //   "growth",
    //   "incentive-management",
    //   "integration-platform",
    //   "life",
    //   "nfv",
    //   "ncr",
    //   "menu",
    //   "mobile-automation",
    //   "operations",
    //   "ops-platform",
    //   "order-platform",
    //   "partner-care",
    //   "pickup",
    //   "platform-backend",
    //   "pos",
    //   "pos-integration-platform",
    //   "post-order",
    //   "pricing",
    //   "ratings",
    //   "search-discovery",
    //   "shopping",
    //   "transmission",
    //   "user-location",
    //   "vendor-availability",
    //   "vendor-growth",
    //   "vendor-ops",
    //   "vendor-performance",
    //   "vendor-portal",
    //   "voip",
    //   "wallet",
    // ],
  //   aws_accounts: [
  //     "account1(123456789)",
  //     "account2(123456789)",
  //     "account3(123456789)",
  //     "account4(123456789)",
  //     "account5(123456789)",
  //     "account6(123456789)",
  //   ],
  //   result: "",
  //   selected_squad: "",
  //   selected_aws_account: "",
  //   selected_aws_role: "",
  //   output: "",
  //   accounts: [
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //     { id: xxxx, name: "xxxx" },
  //   ],
  //   showResult: false,
  // }),
  },
  methods: {
    getSquads() {
      const path = 'http://localhost:5000';
      axios.get(path)
        .then((res) => {
          this.squad = res.data.squad;
        })
        .catch((error) => {
          console.error(error);
        });
    }
},
//     printResult() {
//       this.showResult = true;
//       this.output = `AWS ${this.selected_aws_account} - ${this.selected_squad}`;
//     },
//   },
//   components: {},
// };
created() {
    this.getSquads();
  }
}
</script>

Answer 1

终于能让它像下面这样工作了。

<template>
  <div>
    <v-container fluid>
      <v-row align="center" class="mt-16">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="squads"
            label="Squads Name"
            v-model="selected_squad"
            outlined
          ></v-select>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-select
            :items="accounts"
            item-text="name"
            item-value="id"
            v-model="selected_aws_account"
            label="AWS Accounts"
            outlined
          ></v-select>
        </v-col>
      </v-row>
      <v-row>
        <v-col class="d-flex justify-center">
          <v-btn elevation="17" x-large @click="printResult">Submit</v-btn>
        </v-col>
      </v-row>
      <v-row v-if="showResult">
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <h4>
            Please browse to
            <a href="https://provider.com"
              >Okta Self Service Portal</a
            >
            then on the left pane of the page click on "Manage Access" and then click on "Self Service Access Request" and finally select "AWS" as the application. Good to fire the request!
          </h4>
        </v-col>
        <v-col class="d-flex" cols="12" sm="4" offset-sm="4">
          <v-text-field
        class
            :value="output"
            label="Role is:"
            outlined
            readonly
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Home",
  data: () => ({
    squads: '',
    aws_accounts: [
      "account1(123456789)",
      "account2(123456789)",
      "account3(123456789)",
      "account4(123456789)",
      "account5(123456789)",
      "account6(123456789)",
    ],
    result: "",
    selected_squad: "",
    selected_aws_account: "",
    selected_aws_role: "",
    output: "",
    accounts: [
      { id: 123456789, name: "account1" },
      { id: 123456789, name: "account2" },
      { id: 123456789, name: "account3" },
      { id: 123456789, name: "account4" },
      { id: 123456789, name: "account5" },
      { id: 123456789, name: "account6" },
    ],
    showResult: false,
  }),
  methods: {
    getSquads() {
      const path = 'http://localhost:5000';
      axios.get(path)
        .then((res) => {
          this.squads = res.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    printResult() {
      this.showResult = true;
      this.output = `AWS ${this.selected_aws_account} - ${this.selected_squad}`;
    },
  },
  created() {
    this.getSquads();
  },
  components: {},
};
</script>