Python 在我的项目中使用angularJS时，Django登录不起作用
我正在使用django和angularJS登录页面。但由于某些原因，即使输入了正确的用户名和密码，我也无法登录到该页面。页面仍然存在，并显示“未定义”作为“未定义”拖入。以下是我的app.js文件：Python 在我的项目中使用angularJS时，Django登录不起作用,python,html,angularjs,django,django-authentication,Python,Html,Angularjs,Django,Django Authentication,我正在使用django和angularJS登录页面。但由于某些原因，即使输入了正确的用户名和密码，我也无法登录到该页面。页面仍然存在，并显示“未定义”作为“未定义”拖入。以下是我的app.js文件： var app = angular.module('exampleApp', ['ngDialog']); app.controller('MainCtrl', function ($scope, ngDialog) { $scope.clickToOpen = function () {
var app = angular.module('exampleApp', ['ngDialog']);
app.controller('MainCtrl', function ($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'view.html' });
};
});
$(function(){
var textfield = $("input[name=user]");
$('button[type="submit"]').click(function(e) {
e.preventDefault();
//little validation just to check username
if (textfield.val() != "") {
//$("body").scrollTo("#output");
$("#output").addClass("alert alert-success animated fadeInUp").html
("Welcome back " + "<span style='text-transform:uppercase'>" + textfield.val() + "</span>");
$("#output").removeClass(' alert-danger');
$("input").css({
"height":"0",
"padding":"0",
"margin":"0",
"opacity":"0"
});
//change button text
$('button[type="submit"]').html("continue")
.removeClass("btn-info")
.addClass("btn-default").click(function(){
$("input").css({
"height":"auto",
"padding":"10px",
"opacity":"1"
}).val("");
});
//show avatar
$(".avatar").css({
"background-image": "url('static/img/me.png')"
});
} else {
//remove success mesage replaced with error message
$("#output").removeClass(' alert alert-success');
$("#output").addClass("alert alert-danger animated fadeInUp").html("sorry enter a username ");
}
//console.log(textfield.val());
});
});
from django.conf import settings
from django.conf.urls import include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.views.generic import TemplateView
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^$', 'app.views.home', name='home'),
url(r'^view$', TemplateView.as_view(template_name ='pages/view.html'), name = 'go'),
url(r'^friends$', TemplateView.as_view(template_name ='pages/friends.html'), name = 'friends'),
url(r'^firstsite$', TemplateView.as_view(template_name ='pages/firstsite.html'), name = 'firstsite'),
url(r'^marriage$', TemplateView.as_view(template_name ='pages/marriage.html'), name = 'marriage'),
url(r'^responsive', TemplateView.as_view(template_name ='pages/responsive.html'), name = 'responsive'),
# url(r'^login/$', 'app.views.login_user'),
url(r'^login', 'app.views.login'),
url(r'^auth$', 'app.views.auth_view'),
url(r'^logout', 'app.views.logout'),
url(r'^loggedin', 'app.views.loggedin'),
url(r'^invalid', 'app.views.invalid_login'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_URL)
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Parasol.</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
{% block additional_styles %}
<style>
body{
background:url(static/img/login.jpg) no-repeat center center fixed;
-webkit-background-size: cover
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
{% endblock %}
</head>
<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
{% block content %}
<body>
<div class="container">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
{% if form.errors%}
<P> Sorry Peep, dont try to cheat me.. ehaa ehaa </P>
{% endif %}
<form action="/auth" method="post">{% csrf_token %}
<input name="username" type="text" placeholder="username" value="">
<input name="password" type="password" value="" placeholder="password">
<button class="btn btn-info btn-block login" type="submit" value="login">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="static/js/angular.min.js"></script>
<script src="static/js/app.js"></script>
</body>
{% endblock %}
{%load staticfiles%}
阳伞。
{%block-additional_-styles%}
身体{
背景：url（static/img/login.jpg）无重复中心；
-webkit背景尺寸：封面
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
{%endblock%}
{%block content%}
{%if form.errors%}
对不起，别想骗我..ehaa-ehaa
{%endif%}
{%csrf_令牌%}
登录
{%endblock%}
请在这个问题上帮助我。提前感谢各位。您询问了angular，但您的大部分代码都是jquery 您还需要知道如何将服务器端链接到客户端。 （对于Django，我推荐JSONResponseMixin） 出于安全考虑，用户名和密码的身份验证应该在服务器端进行。网络上有一个很好的例子 意见 有棱角的 模板
你好注销
{%csrf_令牌%}
登录
你好注销
{%csrf_令牌%}
登录
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Parasol.</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
{% block additional_styles %}
<style>
body{
background:url(static/img/login.jpg) no-repeat center center fixed;
-webkit-background-size: cover
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
{% endblock %}
</head>
<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
{% block content %}
<body>
<div class="container">
<div class="login-container">
<div id="output"></div>
<div class="avatar"></div>
<div class="form-box">
{% if form.errors%}
<P> Sorry Peep, dont try to cheat me.. ehaa ehaa </P>
{% endif %}
<form action="/auth" method="post">{% csrf_token %}
<input name="username" type="text" placeholder="username" value="">
<input name="password" type="password" value="" placeholder="password">
<button class="btn btn-info btn-block login" type="submit" value="login">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="static/js/angular.min.js"></script>
<script src="static/js/app.js"></script>
</body>
{% endblock %}
import json
from django.shortcuts import render_to_response
from django.contrib.auth import authenticate, login
class MultiVioDisposeView(JSONResponseMixin, View):
def post(self, request, *args, **kwargs):
post_body = json.loads(self.request.body)
status = 'error'
username = post_body['username']
password = post_body['password'])
user = authenticate(username=username, password=password)
if user is not None:
if user.is_active:
login(request, user)
msg = "You're successfully logged in!"
status = 'success'
else:
msg = "Your account is not active, please contact the site admin."
else:
msg = "Your username and/or password were incorrect."
return self.render_json_response(dict(status=status, msg=msg))
var ngapp = angular.module('ngapp', 'ngResource','ngCookies']).config(
function($httpProvider) {
ngapp.default_post_headers = $httpProvider.defaults.headers.post;
});
ngapp.controller(
"NavBarCtrl",
function ($scope, $http, $cookies) {
$scope.loginuser = "{{ request.user.username }}";
$scope.user_logout = function() {
$http.get("{% url 'logout_view' %}").success(function(data) {
$scope.loginuser = "";
console.log(data);
}).error(function(data) {
console.log(data);
});
};
var csrfcookie = $cookies.csrftoken;
ngapp.default_post_headers['X-CSRFTOKEN'] = csrfcookie;
$scope.user_login = function(username, password) {
$http.post("{% url 'login_view' %}", {username: username, password: password}).success(function(data) {
$scope.loginuser = data.username;
console.log(data);
}).error(function(data) {
$scope.loginuser = "";
console.log(data);
});
};
});
<p ng-show="loginuser" class="navbar-text">Hello <span ng-bind="loginuser"></span><button type='button' ng-click="user_logout()" class="btn btn-small btn-info">Logout</button></p>
<form ng-show="!loginuser" class="navbar-form pull-left">
{% csrf_token %}
<input type="text" placeholder="username" class="span1" ng-model="username">
<input type="password" placeholder="password" class="span1" ng-model="password">
<button type="button" class="btn btn-small btn-success" ng-click="user_login(username, password)">Login</button>
</form>