python學習第7天---django框架---視圖補充

文章目錄

1、書籍管理添加登錄模塊

***後記*** ：

內容

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:

  <!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>
  		密&emsp;碼：<input type="password" name="password" placeholder="請輸入密碼"><br>
  		<input type="submit" value="登錄">
  	</form>
  </div>
  </body>
  </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>
  		密&emsp;碼：<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>
		密&emsp;碼：<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

原視頻地址：https://space.bilibili.com/277754748?spm_id_from=333.788.b_765f7570696e666f.1
筆記項目源代碼地址：https://gitee.com/gaogzhen/python

python學習第7天---django框架---視圖補充

python學習第7天---django框架---視圖補充

目錄

文章目錄

內容

1、書籍管理添加登錄模塊

1.1、新建登錄應用-login

1.2、應用註冊

1.3、路由配置

1.4、用戶模型類

1.5、數據遷移

1.6、視圖

1.7、模板

1.8、效果展示

2、ajax

3、登錄案例ajax改進

3.1、應用login下urls.py添加路由

3.2、應用login下views.py添加視圖函數

3.3、項目/templates/login/login-ajax.html

3.4、效果圖示

後記：

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

京東面試：如何進行JVM調優？

Python 將PowerPoint (PPT/PPTX) 轉爲HTML

SQL優化-20231016

Java-IDEA2020 報錯:找不到包或者找不到符號

Java-IDEA-Maven-Unable to import maven project :see logs for details

Java-IDEA2020集成MAVEN(3.6.3)

Java-Maven（3.6.3）安裝與配置

設計模式-工廠方法模式(FactoryMethod)-Java

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

python學習第7天---django框架---視圖補充

python學習第7天---django框架---視圖補充

目錄

文章目錄

內容

1、書籍管理添加登錄模塊

1.1、 新建登錄應用-login

1.2、 應用註冊

1.3、 路由配置

1.4、 用戶模型類

1.5、數據遷移

1.6、視圖

1.7、模板

1.8、效果展示

2、ajax

3、登錄案例ajax改進

3.1、應用login下urls.py添加路由

3.2、 應用login下views.py添加視圖函數

3.3、 項目/templates/login/login-ajax.html

3.4、 效果圖示

後記 ：

1.1、新建登錄應用-login

1.2、應用註冊

1.3、路由配置

1.4、用戶模型類

3.2、應用login下views.py添加視圖函數

3.3、項目/templates/login/login-ajax.html

3.4、效果圖示

後記：