vue和axios发起请求并显示结果

Question

我正在尝试设置一个向后端发出请求然后在页面上显示结果的 vue 应用程序。我编造了这个例子

new Vue({
    data: {
        message: '{}'
    },
    el: '.login-app',
});

Vue.component('message-section', {
    template: '<div>Message Section</div>'
});

Vue.component('login-component', {
    template: '<div><button v-on:click="login(\'mike@fake.com\', \'passwd\')">Login</button></div>',
    methods: {
        login: function (username, password) {
            axios.post("http://192.168.1.10:8080/login", {username: username, password: password})
                .then(response => {this.message = response.data})
        }
    }
});

和一个像这样的索引：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Test</title>
  </head>
  <body>
    <div class="login-app">
      {{ message }}
      <message-section></message-section>
      <login-component></login-component>
    </div>
    <script src="/static/testvue.bundle.js"></script>
  </body>
</html>

这个想法是一个简单的应用程序，它应该发送 username/password 并返回 "success" 之类的内容或它可以显示的任何内容。但是我完全不熟悉 vue 和 javascript 所以我被卡住了。我不确定如何让响应显示在任何地方。我在那里有一个 {{ message }} 但它什么也没做。我所看到的只是 Vue 对象的 "message" 属性中的 {} 我猜是在渲染。那些 user/pass 是硬编码的......我不确定如何让它与表单字段一起工作。

我可以看到数据被发送到后端，所以我知道它正在工作...

此外，您如何构建一个 Vue 项目，以便将其分成多个 "modules" 或其他什么？

编辑：

如果我改变它，那么只有一个组件是这样的：

new Vue({
    data: {
        message: '{}'
    },
    el: '.login-app',
    methods: {
        login: function (username, password) {
            axios.post("http://192.168.91.30:8080/login", {username: username, password: password})
                .then(response => {this.message = response.data})
        }
    }

})

和

<div class="login-app">
  {{ message }}
  <button v-on:click="login(\'mike@fake.com\', \'passwd\')">Login</button>
</div>

然后什么都没有呈现...这应该将它们放在同一个容器或其他容器中，对吧？

Answer 1

问题是您的组件 login-component 无法访问属于根 Vue 应用程序的 message 属性。

解决这个问题的一种方法是简单地将 message 放到组件中：

Vue.component('login-component', {
  template: '<div><button v-on:click="login(\'mike@fake.com\', \'passwd\')">Login</button></div>',
  data() { 
    return { message: '' }
  },
  methods: {
    login: function (username, password) {
      axios.post("http://192.168.1.10:8080/login", {username: username, password: password})
        .then(response => {this.message = response.data})
      }
    }
});

但是，如果 message 不是您 login-component 可以单独访问的属性，您可能需要考虑 Vuex 或发出自定义事件（this and this).

Answer 2

这是您编辑后的代码。

console.clear()

new Vue({
  data: {
    message: '{}'
  },
  el: '#login-app',
  methods: {
    login: function(username, password) {
      axios.post("https://httpbin.org/post", {username, password})
        .then(response => this.message = response.data.json)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>

<div id="login-app">
  {{ message }}
  <button v-on:click="login('mike@fake.com', 'passwd')">Login</button>
</div>

这里是从一个组件开始工作的。

console.clear()

Vue.component('login-component', {
  template: `
    <div>
      <button v-on:click="login('mike@fake.com', 'passwd')">Login</button>
    </div>`,
  methods: {
    login: function(username, password) {
      axios.post("https://httpbin.org/post", {username, password})
        .then(response => this.$emit('login-success', response.data.json))
    }
  }
});

new Vue({
  data: {
    message: '{}'
  },
  el: '#login-app',
  methods: {
    onSuccess(message) { this.message = message }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>

<div id="login-app">
  {{ message }}
  <login-component @login-success="onSuccess"></login-component>
</div>

在第二个示例中，请注意 message 是 parent 的数据属性；根 Vue。 login-component 无法直接访问 到 message。在这种情况下，如果 ajax 调用是在组件中进行的，为了设置 message 值必须从组件发出。该代码通过发出自定义事件 login-success 并将成功值作为参数传递来实现。父级使用以下语法侦听该事件：

<login-component @login-success="onSuccess"></login-component>

vue和axios发起请求并显示结果

Vue and axios make request and display result

javascript

vue.js

axios

vuejs2