How to exchange data between Go Web-Server and Vue.js frontend?

[marcoippolito]

I’m trying to understand how to exchange data between a very lean golang web-server and the vue.js frontend.

This is the server-gorillamux.go file :

package main

import (
        "encoding/json"
        "github.com/gorilla/mux"
        "log"
        "net/http"
)

const (
        CONN_HOST = "192.168.1.7"
        CONN_PORT = "3000"
)

type Puser struct {
        first_name   string `json:"first_name"`
        last_name    string `json:"last_name"`
        company_name string `json:"company_name"`
        email        string `json:"email"`
        tel          string `json:"tel"`
}

type Pusers []Puser

var pusers []Puser

type Route struct {
        Name        string
        Method      string
        Pattern     string
        HandlerFunc http.HandlerFunc
}

type Routes []Route

var routes = Routes{
        Route{
                "getPusers",
                "GET",
                "/pusers",
                getPusers,
        },
        Route{
                "addPuser",
                "POST",
                "/puser/add",
                addPuser,
        },
}

func getPusers(w http.ResponseWriter, r *http.Request) {
        json.NewEncoder(w).Encode(pusers)
}

func addPuser(w http.ResponseWriter, r *http.Request) {
        puser := Puser{}
        err := json.NewDecoder(r.Body).Decode(&puser)
        if err != nil {
                log.Print("error occured while decoding puser data :: ", err)
        }
        log.Printf("adding puser id :: % s with firstName ■■■ :: %s and lastName as :: %s ",   
puser.first_name, puser.last_name)
        pusers = append(pusers, Puser{first_name: puser.first_name,
                last_name: puser.last_name, company_name: puser.company_name,
                email: puser.email, tel: puser.tel})
        json.NewEncoder(w).Encode(pusers)
}

func AddRoutes(router *mux.Router) *mux.Router {
        for _, route := range routes {
                router.
                        Methods(route.Method).
                        Path(route.Pattern).
                        Name(route.Name).
                        Handler(route.HandlerFunc)
        }
        return router
 }

func main() {
        muxRouter := mux.NewRouter().StrictSlash(true)
        router := AddRoutes(muxRouter)
        router.PathPrefix("/").Handler(http.FileServer(http.Dir("../src/components/auth/Forms.vue")))
        //router.PathPrefix("/").Handler(http.FileServer(http.Dir("../public/")))
        err := http.ListenAndServe(CONN_HOST+":"+CONN_PORT, router)
        if err != nil {
                log.Fatal("error starting http server :: ", err)
                return
        }
}

And this is /src/components/auth/Forms.vue file:

<template>
  <div id="signupform">
    <div class="signup-form">
      <form @submit.prevent="onSubmit">
        <div class="firstname">
          <label for="firstname">First Name</label>
          <input
                 type="string"
                 id="firstname"
                 v-model="firstname" placeholder="First Name">
        </div>
        <div class="lastname">
          <label for="lastname">Last Name</label>
          <input
                 type="string"
                 id="lastname"
                 v-model="lastname" placeholder="Last Name">
        </div>
        <div class="companyname">
          <label for="companyname">Company Name</label>
          <input
                 type="string"
                 id="companyname"
                 v-model="companyname" placeholder="Company Name">
        </div>
        <div class="input">
          <label for="email">Mail</label>
          <input
                  type="email"
                  id="email"
                  v-model="email" placeholder="e-mail">
        </div>
        <div class="input">
          <label for="tel">Telephone Number</label>
          <vue-tel-input v-model="tel"></vue-tel-input>
        </div>
        <div class="input inline">
      <input type="checkbox" id="terms" v-model="terms">
          <label for="terms">Accept Terms of Use</label>
        </div>
        <div class="submit">
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  //import axios from '../../axios-auth';

  import Vue from 'vue';
  import { VueTelInput } from 'vue-tel-input';

  Vue.use(VueTelInput);

  export default {
    components: {
      VueTelInput,
    },
    data () {
      return {
        firstname: '',
        lastname: '',
        companyname: '',
        email: '',
        tel: '',
        terms: false
      }
    },
    methods: {
      onSubmit () {
        const formData = {
          first_name: this.firstname,
          last_name: this.lastname,
          company_name: this.lastname,
          email: this.email,
          tel: this.tel,
          terms: this.terms
        }
        this.addPuser(formData);
      },
      addPuser (fdata) {
        this.$http.post('/puser/add', {
            fdata
            //first_name:this.firstname,
            //last_name:this.lastname,
            //company_name:this.companyname,
            //email:this.email,
            //tel: this.tel
          }).then(response => {
              console.log(response);
           }, error => {
             console.error(error);
          });
      }
    } // end of methods
  }
</script>

<style scoped>
    ....
</style>

Executing the golang web-server:

(base) marco@pc01:~/webMatters/vueMatters/GraspGlobalChances/goServer$ go run server-   
gorillamux.go

and compiling and running the vue.js frontend

DONE Compiled successfully in 1960ms 4:37:20 PM

App running at:

• Local: http://localhost:8080
• Network: http://ggc.world/

Note that the development build is not optimized.
To create a production build, run npm run build.

How to correctly exchange data between the golang web-server and the vue.js frontend?
Looking forward to your kind help.
Marco