Vue Js Форма отправки сообщений на сервер - PullRequest
0 голосов
/ 30 января 2020

Я создаю веб-сайт и не могу найти способ отправки данных формы регистрации на мой сервер с помощью почтового сообщения. Я пытался с топором ios, но это не сработало. Вот как выглядит моя страница регистрации

<template>
  <div id = "app">
    <!-- <router-view /> -->
    <h1>{{ $t('signup') }}</h1>
    <p>{{ $t('signupMsg') }}</p>
    <b-form @submit="onSubmit" @reset="onReset" method="post" >
      <b-form-group
        id="input-group-1"
        label-for="input-1"
      >
      <p1> Name: </p1>
        <b-form-input
          id="input-1"
          v-model="form.name"
          required
          placeholder="Enter Name and Vorname"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label-for="input-2" >
        <p1>{{ $t('tech') }}</p1>
        <b-form-input
          id="input-2"
          v-model="form.technicianID"
          required
          placeholder="Enter assigned Technician ID"
        ></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-3" label-for="input-3">
        <p1> Email ID: </p1>
        <b-form-input
          id="input-3"
          v-model="form.email"
          required
          placeholder="Enter assigned Email ID"
        ></b-form-input>
      </b-form-group>
      <b-form-group id="input-group-4" label-for="input-4">
        <p1> {{ $t('branch') }} </p1>
        <b-form-input
          id="input-4"
          v-model="form.branch"
          required
          placeholder="Enter your branch"
        ></b-form-input>
      </b-form-group>

      <!-- <b-button type="submit" > <router-link to="/requestsuccess">{{ $t('signup') }}</router-link> </b-button> -->
      <b-button type="submit" >{{ $t('signup') }} </b-button>
      <b-button type="reset" variant="danger">{{ $t('reset') }}</b-button>
      <router-link to="/" class="btn btn-link">{{ $t('back') }}</router-link>
    </b-form>
  </div>
</template>

<script>
import axios from 'vue-axios'
export default {
  name: 'signup',

  data() {
      return {
        form: {
          name: '',
          technicianID: '',
          email:'',
          branch: ''
        }
    }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        axios({
          method: 'post',
          url: '/insert',
          data: this.form
          })
        .then(function (response) {
        //handle success
          console.log(response);
          })
        .catch(function (response) {
        //handle error
        console.log(response);
    });

      },
      onReset(evt) {
        evt.preventDefault()
        // Reset our form values
        this.form.name = ''
        this.form.technicianID = ''
        this.form.email = ''
        this.form.branch = ''
        // Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

Так выглядит мой индекс. js выглядит как сообщение

router.post('/insert', function(req, res, next) {
  var item = {
    name: req.body.name,
    technicianID: req.body.technicianID,
    email: req.body.email,
    branch: req.body.branch
  };

  mongo.connect(url, function(err, db) {
    assert.equal(null, err);
    db.collection('users').insertOne(item, function(err, result) {
      assert.equal(null, err);
      console.log('Item inserted');
      db.close();
    });
  });

  res.redirect('../components/requestsuccess');
});

Я новичок в этом, но я не могу ' Не могу отправить мои данные на сервер.

1 Ответ

0 голосов
/ 30 января 2020

Вы можете попробовать этот код ниже:

Backend: Вы можете изменить свой бэкэнд с этим кодом ниже

router.post('/insert', function(req, res, next) {
  console.log(req.body);
  mongo.connect(url, function(err, db) {
    db.collection('users').insertOne(req.body, function(err, result) {
      if(err) return res.status(500).send(err);
      return res.status(200).send(result.ops[0]);
      db.close();
    });
  });
});

Код выше только пример для простого случая. Если вы хотите добавить assert, то убедитесь, что он работает нормально. Если приведенный выше простой код работает, то вы можете добавить assert.

. Убедитесь, что вы установили cors на свой сервер и добавили его в app.js или server.js. этот код ниже:

app.use(cord({origin: "*"});

И затем, убедитесь, что вы называете использование своей конечной точки: http://. Не только localhost, но http://localhost.

FrontEnd

onSubmit(evt) {
  evt.preventDefault()
  axios({
          method: 'post',
          url: '/insert', // make sure your endpoint is correct
          data: this.form
      })
      .then(response => {
          //handle success
          console.log(response.data);
          // do some stuff here: redirect or something you want
      })
      .catch(error => {
          //handle error
          console.log(error.data);
      });
},

Убедитесь, что ваша конечная точка верна.

Я надеюсь, что это может помочь вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...