Django实现用户注册登录，表单提交后跳转网页(学习笔记)
效果圖如下：
1.新建項目和APP?
使用命令提示符，進入想存放項目的目錄：
//新建項目coco
django-admin startproject coco
//新建app
python manage.py startapp coco_app
?
在項目coco目錄下新建static文件夾，用于存放網頁文件的css，js，imgs?
?
在coco_app目錄下新建文件夾templates,用于存放需要用到的HTML網頁?
?
2.配置settings.py
打開coco文件夾中的settings.py注冊coco_app
INSTALLED_APPS = [
? ? 'django.contrib.admin',
? ? 'django.contrib.auth',
? ? 'django.contrib.contenttypes',
? ? 'django.contrib.sessions',
? ? 'django.contrib.messages',
? ? 'django.contrib.staticfiles',
? ? 'coco_app'
]
?
引用templates?
TEMPLATES = [
? ? {
? ? ? ? 'BACKEND': 'django.template.backends.django.DjangoTemplates',
? ? ? ? 'DIRS': [os.path.join(BASE_DIR, 'templates')],
? ? ? ? 'APP_DIRS': True,
? ? ? ? 'OPTIONS': {
? ? ? ? ? ? 'context_processors': [
? ? ? ? ? ? ? ? 'django.template.context_processors.debug',
? ? ? ? ? ? ? ? 'django.template.context_processors.request',
? ? ? ? ? ? ? ? 'django.contrib.auth.context_processors.auth',
? ? ? ? ? ? ? ? 'django.contrib.messages.context_processors.messages',
? ? ? ? ? ? ],
? ? ? ? },
? ? },
]
連接數據庫，這里我用的MySQL數據庫
DATABASES = {
? ? 'default': {
? ? ? ? 'ENGINE': 'django.db.backends.mysql',
? ? ? ? 'NAME': '這里填寫自己創建的數據庫名',
? ? ? ? 'USER': 'root',
? ? ? ? 'PASSWORD': '數據庫的密碼',
? ? ? ? 'HOST': '127.0.0.1',
? ? ? ? 'PORT': 3306,
? ? }
}
記得在coco目錄下的__init__.py中導入pymysql
import pymysql
pymysql.install_as_MySQLdb()
?
3.配置主路由和子路由
在coco_app目錄下新建文件urls.py作為項目的子路由，并添加內容：
from django.urls import path
from . import ?views
app_name = 'coco_app'
urlpatterns = [
? ? path('', views.login_view),
? ? path('index/', views.login_view_submit),
? ? path('register/', views.register_view),
? ? path('registergoto/', views.register_view_submit),
?
]
?
在coco目錄下的urls.py主路由中添加內容：
from django.contrib import admin
from django.urls import path,include
import coco_app
from coco_app import urls
urlpatterns = [
? ? path('admin/', admin.site.urls),
? ? path('',include(coco_app.urls))
]
4.編寫views.py
在coco_app目錄下的views.py中添加內容：
import random
?
from django.shortcuts import render
from django.http import HttpResponse
from . models import *
?
# 登錄頁面
def login_view(requst):
? ? ? ? return render(requst, 'login.html')
?
# 登錄按鈕提交后，驗證數據庫中是否存在用戶,存在就跳轉主網頁
def login_view_submit(requst):
? ? u = requst.POST.get('user','')
? ? p = requst.POST.get('pwd','')
? ? if u and p:
? ? ? ? user = UserInfo.objects.filter(user_name=u,user_pwd=p).count()
? ? ? ? if user>=1:
? ? ? ? ? ? return render(requst, 'index.html')
? ? ? ? else:
? ? ? ? ? ? return render(requst, 'login.html')
? ? else:
? ? ? ? return render(requst, 'login.html')
?
# 注冊頁面
def register_view(requst):
? ? return render(requst, 'register.html')
?
# 注冊用戶，將用戶信息存進數據庫
def register_view_submit(requst):
? ? u = requst.POST.get('user', '')
? ? p = requst.POST.get('pwd', '')
? ? if u and p:
? ? ? ? stu = UserInfo(user_id=str(random.randint(1,9999)),user_name=u,user_pwd=p)
? ? ? ? stu.save()
? ? ? ? return HttpResponse('注冊成功')
? ? else:
? ? ? ? return HttpResponse('注冊失敗')
?
# Create your views here.
5.編寫models.py，并遷移數據
在coco_app目錄下的models.py中添加內容：
from django.db import models
class UserInfo(models.Model):
? ? user_id = models.CharField(primary_key=True,max_length=20)
? ? user_name = models.CharField(max_length=20)
? ? user_pwd = models.CharField(max_length=20)
# Create your models here.
使用命令提示符，生成數據表，并遷移數據
//先生成數據表
python manage.py makemigrations
//遷移數據
python manage.py migrate
?
?
coco_app_userinfo表中就是新建的用戶id和賬號，密碼，注冊好的賬號就會添加到這里面?
6.添加HTML網頁和css，js，以及imgs
把要用到的三張html網頁放進templates文件夾中
以及把網頁要用到的css，js和imgs文件放進static文件夾中
在三張網頁的頂上添加代碼，引用static
?
{% load staticfiles %}{% load static %}?表單中添加代碼
{% csrf_token %}?替換所有的鏈接方式為：
{% static '這里是文件存放的目錄' %}?（1）login.html代碼
{% load staticfiles %}{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
?? ?<meta charset="UTF-8">
?? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
?? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
?? ?<title>登錄頁面</title>
?? ?<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}"/>
</head>
<body>
<form action="/index/" method="post">
? ? {% csrf_token %}
?? ?<div class="denglu-box">
? ? ? ? ? ? <div class="biaoti">登錄</div>
? ? ? ? ? ? <input type="text" placeholder="賬號" name="user">
? ? ? ? ? ? <input type="password" placeholder="密碼" name="pwd">
? ? ? ? ? ? <button type="submit">登錄</button>
? ? ? ? ? ? <span>沒有賬號？<a href="/register/">去注冊</a></span>
?? ?</div>
</form>
?? ?<div class="square">
?? ??? ?<ul>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ?</ul>
?? ?</div>
?? ?<div class="circle">
?? ??? ?<ul>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ?</ul>
?? ?</div>
? ? <div class="loader-animate">
?? ??? ?<div class="loading">
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ? ? ?<span></span>
?? ??? ?</div>
?? ?</div>
? ? <script src="{% static 'js/jquery-3.6.0.min.js' %}" type="text/javascript" charset="utf-8"></script>
?? ?<script type="text/javascript">
? ? ? ? $(function(){
?? ??? ??? ?$('.loader-animate').fadeOut('slow',function(){
?? ??? ??? ??? ?$('.denglu-box').show();
?? ??? ??? ?});
?? ??? ?})
? ? </script>
</body>
{% block content %} {% endblock %}
</html>
（2）register.html代碼
{% load staticfiles %}{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
?? ?<meta charset="UTF-8">
?? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
?? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
?? ?<title>注冊頁面</title>
?? ?<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"/>
?? ?<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}"/>
?
</head>
<body>
?? ?<form action="/registergoto/" method="post">
? ? ? ? {% csrf_token %}
?? ??? ?<div class="denglu-box">
?? ??? ??? ?<div class="biaoti">注冊</div>
?? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ?<input id="account" type="text" name="user" placeholder="郵箱賬號(例:1722445154@163.com)">
?? ??? ??? ??? ?<div id="txt" class=""></div>
?? ??? ??? ?</div>
?? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ?<input id="password" type="password" name="pwd" placeholder="密碼長度8-16">
?? ??? ??? ??? ?<div id="txt"></div>
?? ??? ??? ?</div>
?? ??? ??? ?<button type="submit">注冊</button>
? ? ? ? ? ? <span>已有賬號？<a href="/">去登錄</a></span>
?? ??? ?</div>
?? ?</form>
?
?? ?<div class="square">
?? ??? ?<ul>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ?</ul>
?? ?</div>
?? ?<div class="circle">
?? ??? ?<ul>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ??? ?<li></li>
?? ??? ?</ul>
?? ?</div>
?? ?</div>
?? ?<script src="{% static 'js/jquery-3.6.0.min.js' %}" type="text/javascript" charset="utf-8"></script>
?? ?<script type="text/javascript">
?? ??? ??? ?$(function(){
?? ??? ??? ??? ?// 郵箱驗證
?? ??? ??? ??? ?$('#account').blur(function(){
?? ??? ??? ??? ??? ?register_user()
?? ??? ??? ??? ?})
?? ??? ??? ??? ?function register_user(){
?? ??? ??? ??? ??? ?var val = $('#account').val()
?? ??? ??? ??? ??? ?var reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
?? ??? ??? ??? ??? ?if(val == ''){
?? ??? ??? ??? ??? ??? ?$('#account').next().show().html('不能為空！')
?? ??? ??? ??? ??? ??? ?$('#account').next().addClass('text-danger')
?? ??? ??? ??? ??? ??? ?$('#account').next().removeClass('text-success')
?? ??? ??? ??? ??? ?}else if(reg.test(val)){
?? ??? ??? ??? ??? ??? ?$('#account').next().show().html('驗證成功！')
?? ??? ??? ??? ??? ??? ?$('#account').next().addClass('text-success')
?? ??? ??? ??? ??? ??? ?$('#account').next().removeClass('text-danger')
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?$('#account').next().show().html('請輸入正確的郵箱！')
?? ??? ??? ??? ??? ??? ?$('#account').next().addClass('text-danger')
?? ??? ??? ??? ??? ??? ?$('#account').next().removeClass('text-success')
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?// 密碼驗證
?? ??? ??? ??? ?$('#password').blur(function(){
?? ??? ??? ??? ??? ?register_pwd()
?? ??? ??? ??? ?})
?? ??? ??? ??? ?function register_pwd(){
?? ??? ??? ??? ??? ?var val = $('#password').val()
?? ??? ??? ??? ??? ?var reg = /^\w{8,16}$/;
?? ??? ??? ??? ??? ?if(val == ''){
?? ??? ??? ??? ??? ??? ?$('#password').next().show().html('不能為空！')
?? ??? ??? ??? ??? ??? ?$('#password').next().addClass('text-danger')
?? ??? ??? ??? ??? ??? ?$('#password').next().removeClass('text-success')
?? ??? ??? ??? ??? ?}else if(reg.test(val)){
?? ??? ??? ??? ??? ??? ?$('#password').next().show().html('驗證成功！')
?? ??? ??? ??? ??? ??? ?$('#password').next().addClass('text-success')
?? ??? ??? ??? ??? ??? ?$('#password').next().removeClass('text-danger')
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?$('#password').next().show().html('請輸入正確的密碼！')
?? ??? ??? ??? ??? ??? ?$('#password').next().addClass('text-danger')
?? ??? ??? ??? ??? ??? ?$('#password').next().removeClass('text-success')
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ?</script>
</body>
{% block content %} {% endblock %}
</html>?
(3)index.html代碼
{% load staticfiles %}{% load static %}
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
? ? ? ? <link rel="stylesheet" href="{% static 'css/font-awesome-4.7.0/css/font-awesome.css' %}">
? ? ? ? <link rel="stylesheet" href="{% static 'css/index_one.css' %}">
?? ?</head>
?? ?<body>
?? ??? ?<!-- 過載動畫 -->
?? ??? ?<div class="loader-animate">
?? ??? ??? ?<div class="loading">
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ? ? ?<span></span>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ??? ?<!-- 過載動畫 -->
?
?? ??? ?<!-- 網頁內容 -->
?? ??? ?<div class="container">
?? ??? ??? ?<!-- left -->
?? ??? ??? ?<div class="left">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li class="item active">
?? ??? ??? ??? ??? ??? ?<i class="fa fa-home"></i>
?? ??? ??? ??? ??? ??? ?主頁
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li class="item">
?? ??? ??? ??? ??? ??? ?<i class="fa ?fa-commenting"></i>
?? ??? ??? ??? ??? ??? ?消息
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li class="item">
?? ??? ??? ??? ??? ??? ?<i class="fa fa-user-circle-o"></i>
?? ??? ??? ??? ??? ??? ?動態
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li class="item">
?? ??? ??? ??? ??? ??? ?<i class="fa fa-users"></i>
?? ??? ??? ??? ??? ??? ?好友
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li class="item">
?? ??? ??? ??? ??? ??? ?<i class="fa fa-star-o"></i>
?? ??? ??? ??? ??? ??? ?收藏
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li class="item">
?? ??? ??? ??? ??? ??? ?<i class="fa fa-gear"></i>
?? ??? ??? ??? ??? ??? ?設置
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<!-- hr -->
?? ??? ??? ??? ??? ?<hr>
?? ??? ??? ??? ??? ?<li class="item">
?? ??? ??? ??? ??? ??? ?<i class="fa fa-sign-out"></i>
?? ??? ??? ??? ??? ??? ?退出登錄
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ??? ?<div class="user">
?? ??? ??? ??? ??? ?<img src="{% static 'imgs/1.jpg' %}" >
?? ??? ??? ??? ??? ?<span>AkaliStore</span>
?? ??? ??? ??? ??? ?<i class="fa fa-wifi"></i>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ??? ?<!-- <lef></lef>t end -->
?
?? ??? ??? ?<!-- right -->
?? ??? ??? ?<div class="right">
?? ??? ??? ??? ?<div class="handler">
?? ??? ??? ??? ??? ?<!-- 側邊欄標 -->
?? ??? ??? ??? ?</div>
?
?? ??? ??? ??? ?<!-- right-top 內容 -->
?? ??? ??? ??? ?<div class="right-top">
?? ??? ??? ??? ??? ?<span class="tag">主頁</span>
?? ??? ??? ??? ??? ?<!-- 分享按鈕 -->
?? ??? ??? ??? ??? ?<div class="button-box">
?? ??? ??? ??? ??? ??? ?<div class="share-button">
?? ??? ??? ??? ??? ??? ??? ?<span><i class="fa fa-share-alt"></i>去分享</span>
?? ??? ??? ??? ??? ??? ??? ?<a href="#"><i class="fa fa-qq"></i></a>
?? ??? ??? ??? ??? ??? ??? ?<a href="#"><i class="fa fa-wechat"></i></a>
?? ??? ??? ??? ??? ??? ??? ?<a href="#"><i class="fa fa-weibo"></i></a>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?
?? ??? ??? ??? ?<!-- right-content 內容 -->
?? ??? ??? ??? ?<div class="right-content">
?? ??? ??? ??? ??? ?<div class="card">
?? ??? ??? ??? ??? ??? ?<div class="card-son">
?? ??? ??? ??? ??? ??? ??? ?<h2>栗山未來</h2>
?? ??? ??? ??? ??? ??? ??? ?<span>栗山未來是日本輕小說及其改編動畫《境界的彼方》中的女主角。高中一年級新生，戴著深藍色緞帶。擁有操縱血能力的異界士，但她擁有的這種能力被認為是異界士中的異端，因此被他人所敬而遠之。個性天然，反應遲鈍，內心憧憬著成為普通的女孩子。喜歡用“不愉快です”（我不高興）表達自己的任何情感。</span>
?? ??? ??? ??? ??? ??? ?</div>
?
?? ??? ??? ??? ??? ??? ?<img src="{% static 'imgs/栗山未來.be1af83.png' %}">
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="nav-content">
?? ??? ??? ??? ??? ??? ?<span>最新動態</span>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="new-namic">
?
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?
?? ??? ?</div>
?
?? ??? ?<script src="{% static 'js/jquery-3.6.0.min.js' %}" type="text/javascript" charset="utf-8"></script>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?$(function(){
?? ??? ??? ??? ?$('.loader-animate').fadeOut(1000,function(){
?? ??? ??? ??? ??? ?$('.container').show(200);
?? ??? ??? ??? ?});
?
?? ??? ??? ??? ?var count = 2
?? ??? ??? ??? ?// 側邊導航點擊事件
?? ??? ??? ??? ?$('ul').children('.item').click(function(){
?? ??? ??? ??? ??? ?$(this).addClass('active')
?? ??? ??? ??? ??? ?$(this).siblings().removeClass('active')
?? ??? ??? ??? ??? ?$('.tag').text($(this).text())
?? ??? ??? ??? ?})
?? ??? ??? ??? ?// 側邊欄按鈕點擊事件
?? ??? ??? ??? ?$('.handler').click(function(){
?? ??? ??? ??? ??? ?if(count%2 == 0){
?? ??? ??? ??? ??? ??? ?count++
?? ??? ??? ??? ??? ??? ?console.log(count)
?? ??? ??? ??? ??? ??? ?$('.left').css('width','0px')
?? ??? ??? ??? ??? ??? ?$(this).addClass('close')
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?count++
?? ??? ??? ??? ??? ??? ?$('.left').css('width','250px')
?? ??? ??? ??? ??? ??? ?$(this).removeClass('close')
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ??? ?//
?? ??? ??? ?})
?? ??? ?</script>
?? ?</body>
</html>?
總結
以上是生活随笔為你收集整理的Django实现用户注册登录，表单提交后跳转网页(学习笔记)的全部內容，希望文章能夠幫你解決所遇到的問題。
