Я пытаюсь понять, как обмениваться данными между очень скудным golang веб-сервером и vue. js внешним интерфейсом.
Это сервер-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 ass :: %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
}
}
И это /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>
Выполнение веб-сервера golang:
(base) marco@pc01:~/webMatters/vueMatters/GraspGlobalChances/goServer$ go run server-
gorillamux.go
И компилирование и запуск vue. js внешнего интерфейса
DONE Compiled successfully in 1960ms 4:37:20 PM
App running at:
Local: http://localhost:8080
Network: http://ggc.world/
Обновление 1)
Это последние строки /var/log/nginx/ggcworld-access.log, соответствующие моей последней попытке POST:
2.36.119.16 - - [30/Apr/2020:16:01:41 +0200] "GET / HTTP/2.0" 200 694
"-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/81.0.4044.129 Safari/537.36"
2.36.119.16 - - [30/Apr/2020:16:01:41 +0200] "GET /js/app.js HTTP/2.0"
200 147353 "https://ggc.world/" "Mozilla/5.0 (X11; Linux x86_64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/$
2.36.119.16 - - [30/Apr/2020:16:01:42 +0200] "GET /js/chunk-vendors.js
HTTP/2.0" 200 4241853 "https://ggc.world/" "Mozilla/5.0 (X11; Linux
x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.$
2.36.119.16 - - [30/Apr/2020:16:01:42 +0200] "GET /sockjs-
node/info?t=1588255302671 HTTP/2.0" 200 79 "https://ggc.world/"
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/81$
2.36.119.16 - - [30/Apr/2020:16:03:50 +0200] "POST /puser/add
HTTP/2.0" 404 137 "https://ggc.world/" "Mozilla/5.0 (X11; Linux
x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129
Safari/53$
Как правильно обмениваться данными между веб-сервером golang и интерфейсом vue. js? Ждем вашей помощи. Marco