Я создаю форму авторизации для своей веб-страницы с помощью Javascript и использую Vue JS на стороне клиента и NodeJS с Express JS на стороне сервера.

На стороне сервера я написал свой метод сообщения:

server.app.post("/login", function(req, res) {
    console.log(req.body.username);
})

На стороне клиента у меня есть форма в html-ссылке на экземпляр Vue:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
  <div id="authent">
      <p>Username :</p>
      <input type="text" name="username" v-model="username" required>
      <p>Pwd :</p>
      <input type="password" name="password" v-model="password" required>
      <button v-on:click="authent">Login</button>
    </div>
    <script src='/authent/vue.js'></script>
    <script src='/authent/vue-resource.min.js'></script>
    <script src="authent.js"></script>
  </body>
</html>
window.onload = function () {
  var authent = new Vue({
    el: '#authent',
    data: {
      username: null,
      password: null
    },
    methods: {
      authent: function() {
        try {
          this.$http.post('/login', {"username": authent.username, "password": authent.password})
            .then(function(response) {
                console.log(response.body);
          })
        } catch (e) {
          console.log(e);
        }
      }
    }
  })
}

Видимо, я неправильно отправляю параметры в экземпляр vue, потому что на стороне сервера req.body не определен.

< Сильный > ИЗМЕНИТЬ Параметры отправляются, но я не знаю, как получить к ним доступ в своем методе post на стороне сервера.

0
MissKnacki 7 Фев 2020 в 13:03

2 ответа

Лучший ответ

Вы отправляете его через Ajax-путь. и вы, вероятно, также отправляете его как объект json, а не как настоящие почтовые данные. в экспрессе вы должны написать (иметь анализатор json)

app.use(express.json());

И просто чтобы быть в безопасности. добавьте парсер тела тоже :-)

app.use(express.urlencoded({ extended: true }))

Вам, вероятно, понадобится это слишком рано или поздно

Просто добавьте вышеупомянутое промежуточное ПО

1
eli chen 7 Фев 2020 в 10:36

Я не знаком с Vue, но вы можете попробовать использовать this.username вместо authent.username?

В ваших devTools вы видите, что params был послан? Конечно, это проблема переднего плана.

1
Anthony Rimet 7 Фев 2020 в 10:15