python学习第7天---django框架---视图补充
目录
文章目录
内容
1、书籍管理添加登录模块
在之前视图讲解项目-书籍管理系统中，进一步添加登录应用。
1.1、 新建登录应用-login
-
命令：在命令行切换到项目book_manage_system目录下
python manage.py startapp login
1.2、 应用注册
-
项目下settings.py:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'book', # book应用 'login', # 登录应用 ]
1.3、 路由配置
-
项目下urls.py:
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^book/', include('book.urls')), url(r'^login/', include('login.urls')), url(r'^', include('login.urls')), ] -
login应用下的urls.py:
from django.conf.urls import url from login import views urlpatterns = [ # 通过url函数设置url路要配置项 url(r'^index$', views.index), url(r'^login$', views.login), url(r'^register$', views.register), url(r'^', views.index), # 默认 ]
1.4、 用户模型类
-
login应用下models.py:
from django.db import models # Create your models here. class User(models.Model): """用户模型类""" username = models.CharField(max_length=20) password = models.CharField(max_length=32) class Meta: db_table = 'login_user'
1.5、数据迁移
-
命令
python manage.py makemigrations python manage.py migrate
1.6、视图
-
login应用下的views.py:
from django.shortcuts import render from django.http import HttpResponse from login.models import User # Create your views here. def index(request): """书籍管理登录首页""" return render(request, 'public/index.html') def login(request): """用户登录""" # 1、判断请求方法 if request.method == "GET": return render(request, 'login/login.html') # 2、获取表单数据 username = request.POST.get('username') password = request.POST.get('password') # 3、用户名和密码校验 try: user = User.objects.get(username=username) except Exception: # 3.1、用户名不匹配 return render(request, 'login/login.html') else: if user.password != password: # 3.2、密码不匹配 return render(request, 'login/login.html') # 4、验证通过，进入书籍管理首页 return render(request, 'book/index.html') def register(request): """用户注册""" # 1、判断请求方法 if request.method == 'GET': # 1.1、如果是GET方法返回注册页面 return render(request, 'login/register.html') # 1.2、如果是POST方法，获取表单数据 username = request.POST.get('username') password = request.POST.get('password') # 3、用户名校验 try: user = User.objects.get(username=username) except Exception: # 3.2、校验通过 # 3.2.1、用户表添加新用户 new_user = User() new_user.username = username new_user.password = password new_user.save() # 3.2.2、跳转登录页面 return render(request, 'login/login.html') else: if user: # 3.1、校验不通过，返回注册页面 return render(request, 'login/register.html')
1.7、模板
-
项目/templates/public
-
公用首页:index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .book { width: 200px; height: 100px; margin: 0 auto; } li { color: green; } </style> </head> <body> <div class="book"> <h3 style="color: orange">书籍管理用户登录</h3> <hr> <a href="http://127.0.0.1:8000/login/login">登录</a> <a href="http://127.0.0.1:8000/login/register">注册</a> </div> </body> </html>
-
-
项目/templates/login:
-
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .login { width: 300px; height: 200px; border: 1px solid black; margin: 100px auto; text-align: center; } </style> </head> <body> <div class="login"> <h3>书籍管理用户登录</h3> <hr> <form action="/login/login" method="post"> 用户名：<input type="text" name="username" placeholder="请输入用户名"><br> 密 码：<input type="password" name="password" placeholder="请输入密码"><br> <input type="submit" value="登录"> </form> </div> </body> </html>
-
-
register.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .login { width: 300px; height: 200px; border: 1px solid black; margin: 100px auto; text-align: center; } </style> </head> <body> <div class="login"> <h3>书籍管理用户注册</h3> <hr> <form action="/login/register" method="post"> 用户名：<input type="text" name="username" placeholder="请输入用户名"><br> 密 码：<input type="password" name="password" placeholder="请输入密码"><br> <input type="submit" value="注册"><br> </form> </div> </body> </html>
1.8、效果展示
-
项目结构：
-
首页：
-
注册：
-
登录：
-
数据表：
2、ajax
ajax知识，这里不再详述，给出参考地址：
- w3cschool:https://www.w3school.com.cn/ajax/index.asp
- csdn博客：https://blog.csdn.net/Ha_Girl/article/details/90710491
- cnblogs：https://www.cnblogs.com/zhangruisoldier/p/8006099.html
3、登录案例ajax改进
后端页面跳转的话，前端页面会整个页面刷新，造成资源浪费，用户体验差。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
3.1、应用login下urls.py添加路由
url(r'^login_ajax$', views.login_ajax),
3.2、 应用login下views.py添加视图函数
def login_ajax(request):
"""用户登录"""
# print(request)
# 1、判断请求方法
if request.method == "GET":
return render(request, 'login/login-ajax.html')
# 2、获取表单数据
username = request.POST.get('username')
password = request.POST.get('password')
# 3、用户名和密码校验
try:
user = User.objects.get(username=username)
except Exception:
# 3.1、用户名不匹配
return JsonResponse({
'res': 0
})
else:
if user.password != password:
# 3.2、密码不匹配
return JsonResponse({
'res': 0
})
# 4、验证通过，进入书籍管理首页
return JsonResponse({
'res': 1
})
3.3、 项目/templates/login/login-ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/public/js/jquery.min.js"></script>
<style>
.login {
width: 300px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
text-align: center;
}
#errorMsg {
display: none;
color: red;
}
</style>
<script>
$(function () {
$('#btnLogin').click(function () {
// 1、获取用户名和密码
let username = $('#username').val();
let password = $('#password').val();
// 2、发起ajax请求
$.ajax({
'url': '/login_ajax',
'type': 'POST',
'data': {'username': username, 'password': password},
'dataType': 'json',
success: function (data) {
// console.log(data)
if (data.res === 0) {
$('#errorMsg').show().html('用户名或者密码错误');
} else {
location.href = '/book/index';
}
},
error: function (data) {
console.log(data)
}
});
});
});
</script>
</head>
<body>
<div class="login">
<h3>书籍管理用户登录</h3>
<hr>
用户名：<input type="text" id="username" name="username" placeholder="请输入用户名"><br>
密 码：<input type="password" id="password" name="password" placeholder="请输入密码"><br>
<input type="button" id="btnLogin" value="登录"><br>
<div id="errorMsg"></div>
</div>
</body>
</html>
3.4、 效果图示
-
失败：
-
成功：
后记 ：
本项目为参考某音python系列视频。上面为自己参考写的学习笔记，持续更新。欢迎交流，本人QQ:806797785
扫一扫
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
