Eventsource problems with webpack and vuejs

991 views Asked by At

I'm making my own blog using express and vuejs. In login.vue, I found that websites redirected to localhost:8080/?#/login after i pushed 'submit button' in Chrome. (It works perfect in Firefox) so I had to log in 'twice' in order to sign in.

after post 'request', following errors occur before (response) => { ... }

EventSource failed loading : GET "localhost:8080/__webpack_hmr"
XHR failed loading: POST "localhost:8080/login"
Navigated to localhost:8080/?

but funny thing is after redirected to /?#/login, it worked successful. I just want to know about why this errors occured. I guess it might be Webpack error but I don't know how to fix it.

<template>
<div id="app">
 <div class="alert alert-primary" role="alert" v-if="showAlert">
    <h4 class="alert-heading">{{alertStatus ? "Success":"Warning"}}</h4>
    <p>{{alertMsg}}</p>
  </div>
  <div v-if="!isLogged">
     <form>
        <ul class="nav nav-pills justify-content-center">
          <li class="nav-item">
            <a class="nav-link" v-bind:class="{ active: logMode }" v-on:click="changeMode">Sign In</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" v-bind:class="{ active: regMode }" v-on:click="changeMode">Sign Up</a>
          </li>
        </ul>
        <div class="form-group" key="email">
          <input type="email" class="form-control" id="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group" v-if="regMode" key="email2">
          <input type="email" class="form-control" id="emailConfirm" v-model="emailConfirm" placeholder="Enter email again">
        </div>
        <div class="form-group" v-if="regMode" key="nick">
          <input type="text" class="form-control" id="nickname" v-model="nick" placeholder="Enter nickname">
        </div>
        <div class="form-group"  key="password">
          <input type="password" class="form-control" id="password" v-model="password" placeholder="Password">
        </div>
        <div class="form-check" key="check">
          <label class="form-check-label">
            <input type="checkbox" class="form-check-input">
              Check me out
          </label>
        </div>
        <button v-on:click="submit" class="btn btn-primary">{{isMode}}</button>
      </form>
    </div>
    <div v-else>
      <span> Already Signed in. </span>
    </div>
</div>
</template>
<script>
export default {
  name: 'login',
  computed: {
    logMode: function () {
      if (this.isMode === 'Login') return true
      else return false
    },
    regMode: function () {
      if (this.isMode === 'Register') return true
      else return false
    }
  },
  methods: {
    changeMode: function () {
      if (this.isMode === 'Login') this.isMode = 'Register'
      else if (this.isMode === 'Register') this.isMode = 'Login'
    },
    submit: function () {
      console.log('submit on')
      if (this.isMode === 'Register') {
        this.$http.post('/register', {
          email: this.email,
          nick: this.nick,
          password: this.password
        })
        .then((response) => {
          console.log('get response!')
        })
        .catch(function (error) {
          console.log(error)
        })
      } else {
        if (this.email) {
          console.log('email exist')
          this.$http.post('/login', {
            email: this.email,
            password: this.password
          })
          .then((response) => {
            console.log('hello response!', response.data)
            var token = response.data.token
            if (token) {
              console.log('param test: ', this.email, response.data.nick, token)
              this.isLogged = true
              this.token = token
            }
          })
          .catch(function (error) {
            console.log(error)
          })
        }
      }
    }
  },
  data () {
    return {
      email: '',
      emailConfirm: '',
      nick: '',
      password: '',
      showAlert: false,
      alertMsg: '',
      alertStatus: false,
      isLogged: false,
      isMode: 'Login',
      token: ''
    }
  }
}
</script>
<style>
#login{
 margin: 50px;
}
.nav{
 width: 320px;
 padding: 10px;
}
.inputs-move {
  transition: all 1s;
}
.inputs-item {
  display: inline-block;
}
.inputs-enter-active, .inputs-leave-active {
  transition: all 1s;
}
.inputs-enter, .inputs-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

</style>
also source codes are in https://github.com/Azurepeal/kajarga

0

There are 0 answers