Use an existing DNSdig (golang) in a return to display JSON (VueJS)

Question

I'm fairly new to programming so sometimes when things are explained they get lost in translation.

This is the assignment.

would need a new component with a basic form (one for requested domain, then a drop down with values of A, AAAA, PTR, MX and CNAME) ---- on submit would use that wayfinderAPI.getDNSDig, and then display the results -- its all JSOn returned

   getDNSDig(domain: string, recordtype: string): Promise<any> {
        http.defaults.headers.post['Authorization'] = 'Bearer ' + localStorage.getItem('webApiToken')
        return http.post("/v1/dns/dig", {request: domain, record_type: recordtype})
    }

so would be a start from scratch component -- (can copy paste one to start with and just clear out the variables and methods, etc.) (edited) 

the golang function is already there is ready

can modify the return if its wonky

something like this but cleaner: https://toolbox.googleapps.com/apps/dig/#A/

I have created the basic component but am unsure how to do the actual api DNS call and the return as Json.

<template>
  <div>
    <form
      v-if="!formSubmitted"
      @submit.prevent="submitForm"
    >
      <span>Name</span><br>
      <input 
        v-model="name"
        type="text"
        placeholder="Name" 
      ><br>
      <span>Type</span><br>
      <div>
        <b-dropdown
          id="dropdown-left"
          text="Left align"
          variant="primary"
          class="m-2"
        >
          <b-dropdown-item href="#">
            A
          </b-dropdown-item>
          <b-dropdown-item href="#">
            AAAA
          </b-dropdown-item>
          <b-dropdown-item href="#">
            PTR
          </b-dropdown-item>
          <b-dropdown-item href="#">
            MX
          </b-dropdown-item>
          <b-dropdown-item href="#">
            CNAME
          </b-dropdown-item>
        </b-dropdown>
      </div>
    </form>
    <div v-if="formSubmitted">
      <h3>Form Submitted</h3>
      <p>Name: {{ name }}</p>
      <p>Type: {{ type }}</p>
    </div>
  </div>
</template>
  <script>
    export default {
      data() {
        return {
          name: "",
          type: "",
        };
      },
      methods: {
        submitForm: function () {
          this.formSubmitted = true
        }
      },
    };
  </script>
  <style>
    form {
      padding: 10px;
      border: 2px solid black;
      border-radius: 5px;
    }
  
    input {
      padding: 4px 8px;
      margin: 4px;
    }
  
    span {
      font-size: 18px;
      margin: 4px;
      font-weight: 500;
    }
  
    .submit {
      font-size: 15px;
      color: #fff;
      background: #222;
      padding: 6px 12px;
      border: none;
      margin-top: 8px;
      cursor: pointer;
      border-radius: 5px;
    }
  
  </style>

However I am struggling to figure out the return with the requested DNSDig call.

Any help on this would be greatly appreciated.

Use an existing DNSdig (golang) in a return to display JSON (VueJS)

0 Answers0