问题
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 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
}
}
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/
Update 1)
These are the last lines of /var/log/nginx/ggcworld-access.log corresponding to my last POST attempt :
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$
How to correctly exchange data between the golang web-server and the vue.js frontend? Looking forward to your kind help. Marco
回答1:
Looks like your backend server is running at port 3000 whereas your frontend is running at post 8080. If yes, then please configure the proxy rules in your frontend application following document - API Proxying During Development
来源：https://stackoverflow.com/questions/61520048/how-to-exchange-data-between-go-web-server-and-vue-js-frontend-http-post-404