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,
}
}

STATICFILES_DIRS = [os.path.join(BASE_DIR,'static'), ]

记得在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">
           
           <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>
                   <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>
           

           
           <div class="right">
               <div class="handler">
                   
               </div>

               
               <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>

               
               <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实现用户注册登录，表单提交后跳转网页(学习笔记)相关推荐

表单提交后跳转指定链接
表单的作用可以根据场景的变化而变化,可以是问卷调查.故障报修.自助下单等多种业务场景.如需提交后进行下一步操作,如成功提交咨询申请后自动跳转到咨询详情页,可以通过设置提交扩展,实现表单提交后跳转指定链 ...
DedeCMS实现自定义表单提交后发送指定QQ邮箱法
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_3_dg&wd=dedecms 邮箱&oq=d ...
form + iframe 获取表单提交后返回的数据
原理: submit 提交表单没有回调函数,但是可以用iframe来接收返回结果,最后进行格式转换就ok了: 原文地址: http://blog.csdn.net/simeng_1016/articl ...
DEDECMS自定义表单提交后的跳转链接如何修改
这篇文章给大家分享的是有关DEDECMS自定义表单提交后的跳转链接如何修改的内容.小编觉得挺实用的,因此分享给大家做个参考.一起跟随小编过来看看吧. dedecms自定义表单,点击提交后,默认跳转到 ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
PHP表单提交后页面跳转,PHP在表单提交后重定向到另一个页面
PHP在表单提交后重定向到另一个页面我已经阅读了有关将 Headers 插入到php表单文件中的所有帖子,以便在提交表单后将用户重定向到另一个URL - 但我无法弄清楚如何执行此操作 . 以下是我的 ...
layui提交表单自动刷新_layui form表单提交后实现自动刷新
刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪 ...
php502bad gateway,PHP表单提交后出现502 bad gateway解决办法
搜索热词 <PHP表单提交后出现502 bad gateway解决办法>要点: 本文介绍了PHP表单提交后出现502 bad gateway解决办法,希望对您有用.如果有疑问,可以联系我们 ...
html5 ,form表单提交不跳转
form表单是经常用到的一种提交数据的方法,经常用于登录或者注册功能. 可是form表单提交会跳转至提交的链接,这对于前后端分离的项目就有点不太友好.所以说我们需要在表单提交后不跳转,并且获取到接口返 ...

Django实现用户注册登录，表单提交后跳转网页(学习笔记)

6.添加HTML网页和css，js，以及imgs

Django实现用户注册登录，表单提交后跳转网页(学习笔记)相关推荐

最新文章

热门文章