我尝试使用Angular4使用django登录

时间:2018-03-27 07:55:31

标签: django angular

我在Django中创建了用于登录的Rest API,我想在angular4中调用它 heare是我的angular4代码

login.components.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response, Headers} from '@angular/http';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router:Router, private http:Http) { }

  getData = [];

使用此功能我从我的API获取数据,我正在尝试将此数据与表单数据进行比较

  fatchData = function(){
    this.http.get("http://127.0.0.1:8000/loginAdmin/").subscribe((res:Response) => {
      this.getData = res.json();
    })
  }

  loginUser(e){
    e.preventDefault();
    var username = e.target.elements[0].value;
    var password = e.target.elements[1].value;
    if(username == 'this.getData.username' && password == 'this.getData.password')
    {
      this.router.navigate(['/deshbord'])
    }
    else{
      console.log('Error Find');
    }
  }
  ngOnInit() {
    this.fatchData();
  }

}

这是我的login.comonents.login我希望当用户提供用户名和密码时,将其与我的API数据进行比较,这是真的,然后导航到其他页面..

<form (submit)="loginUser($event)">
  <div class="input">
    <label>UserName</label>
    <input type="text">
  </div>

  <div class="input">
    <label>password</label>
    <input type="password">
  </div>

  <div class="input">
    <input type="submit" value="Login">
  </div>
</form>

0 个答案:

没有答案