Vue Js表单发布到服务器

Question

我正在建立一个网站，我找不到一种方法来发送我的SignUp表单数据到我的服务器使用post。我尝试使用axios，但它不起作用。这基本上就是我的注册页面的样子

<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>

这是我的index.js在post中的样子

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');
});

我对此相当陌生，但我找不到一种方法将我的数据发送到服务器。

Answer 1

你可以尝试下面的代码：

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);
      });
},

请确保您的终结点正确。

我希望它能帮助你。