余烬应用程序不发布到服务器与余烬数据

Ember app not posting to server with Ember Data

本文关键字：余烬 服务器 数据 应用程序      更新时间：2023-09-26

我正试图将我的ember应用程序连接到后端节点服务器。现在，我有一个注册和登录表单，当用户提交任何一个表单时，它将通过使用Passport在节点中设置的身份验证过程。然而，当提交按钮被按下时，它只是重新加载当前页面，甚至不发送HTTP post请求。关于为什么会发生这种情况/如何解决它的任何想法?

这是我的适配器:

import DS from "ember-data";
var ApplicationAdapter = DS.RESTAdapter.extend({  
    host: 'http://localhost:8080'
});
export default ApplicationAdapter;

这是我的注册控制器:

import Ember from 'ember'; 
export default Ember.Controller.extend({
    actions: {
    new: function() {
      console.log('creating new user...');
      var model = this.get('user');
      user = this.get('store').createRecord('user', {
        title: model.get('title'),
        password: model.get('password')
      });
      user.save().then(function(data) {
        // Clear the form.
        Ember.$(':input').val('');
      });
    },
  }
});
这是我的模型: 
import DS from 'ember-data';
export default DS.Model.extend({
    username: DS.attr('string'),
    password: DS.attr('string')
});

格式如下:

<div class="row text-center">
    <h1>Signup</h1>
</div>
<form>
    <div class="row">
      <div class="medium-6 medium-centered columns">
        {{input value=username type="text" placeholder="Username"}}
      </div>
    </div>
    <div class="row">
      <div class="medium-6 medium-centered columns">
        {{input value=password type="password" placeholder="Password"}}
      </div>
    </div>
    <div class="row">
      <div class="medium-6 medium-centered columns">
        {{input class="button" type="submit" value="Signup"}}
      </div>
    </div>

</form>

好的，这里似乎有一些问题。

首先，看看你发布的控制器，有一些事情看起来不正确:

  • 从未声明user变量
  • 您尝试从控制器user属性get，但它从未定义
  • 您尝试使用Ember.$(':input').val('');清除表单，这实际上没有任何意义，如果输入绑定到模板。

我们将从清理模板开始，这将推动对控制器的改进:

<div class="row text-center">
  <h1>Signup</h1>
</div>
<form>
  <div class="row">
    <div class="medium-6 medium-centered columns">
      {{input value=username type="text" placeholder="Username"}}
    </div>
  </div>
  <div class="row">
    <div class="medium-6 medium-centered columns">
      {{input value=password type="password" placeholder="Password"}}
    </div>
  </div>
  <div class="row">
    <div class="medium-6 medium-centered columns">
      <button class="button" type="submit" {{action 'createUser'}}>Signup</button>
    </div>
  </div>
</form>

主要问题似乎是你使用{{input}}帮助按钮，这真的没有任何意义。{{input}}帮助器用于输入文本。我们还将动作绑定到被点击的按钮上，这就是你想要的行为。

现在控制器:

import Ember from 'ember'; 
export default Ember.Controller.extend({
  // Username for the new user
  username: '',
  // Password for the new user
  password: '',
  actions: {
    // Create a new user
    createUser() {
      const username = this.get('username');
      const password = this.get('password');
      this.get('store').createRecord('user', {
        username,
        password
      }).save()
      .then(() => {
        this.send('clearForm');  // Invokes the `clearForm` action on the controller
      })
      .catch(() => {
        // Do some kind of error handling if the creation fails
      });
    },
    // Clear the form
    clearForm() {
      this.set('username', '');
      this.set('password', '');
    }
  }
});

现在我们有了一个定义了两个属性的控制器，用于保存新用户的用户名和密码。它们被绑定到模板中的输入字段，我们对它们进行操作，既可以将值从模板中取出，也可以再次清除它们。

您有一个提交按钮，默认情况下执行post请求。您可以执行以下操作:

<form {{action 'new' on='submit'}}>
    <div class="row">
      <div class="medium-6 medium-centered columns">
        {{input value=user.username type="text" placeholder="Username"}}
      </div>
    </div>
    <div class="row">
      <div class="medium-6 medium-centered columns">
        {{input value=user.password type="password" placeholder="Password"}}
      </div>
    </div>
    <div class="row">
      <div class="medium-6 medium-centered columns">
        <button class="button" type="submit">Signup</button>
      </div>
    </div>
</form>

这基本上是说拦截提交事件并调用动作。

请注意，我还将user.添加到您的输入值中，否则您将从控制器获得this.get('username')等

相关文章：