1. Toy模板网首页
  2. >Toy博客

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

1年前作者：这个名字我想了一天分类：Toy博客阅读(27)违法举报

这篇具有很好参考价值的文章主要介绍了Django实现用户注册登录，表单提交后跳转网页(学习笔记)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图如下：

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

 

1.新建项目和APP

使用命令提示符，进入想存放项目的目录：

//新建项目coco
django-admin startproject coco
//新建app
python manage.py startapp coco_app

在项目coco目录下新建static文件夹，用于存放网页文件的css，js，imgs

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

在coco_app目录下新建文件夹templates,用于存放需要用到的HTML网页

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

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

在settings的最后加上

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

此时生成的表就添加打了数据库中 

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

coco_app_userinfo表中就是新建的用户id和账号，密码，注册好的账号就会添加到这里面

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

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

把要用到的三张html网页放进templates文件夹中

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

以及把网页要用到的css，js和imgs文件放进static文件夹中

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

在三张网页的顶上添加代码，引用static

{% load staticfiles %}{% load static %}

 表单中添加代码

{% csrf_token %}

 替换所有的链接方式为：文章来源地址https://www.toymoban.com/news/detail-410164.html

{% 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实现用户注册登录，表单提交后跳转网页(学习笔记)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用

相关文章

  • Java开发：实现用户注册登录的功能

    Java开发：实现用户注册登录的功能

    一、前言 在Java开发过程中，实现用户的注册功能是最基本的，用户通过手机号或者邮箱作为注册账号也是非常常见的操作方式，不管是通过手机号注册或者邮箱注册，原理都差不多，那么本文就来分享一下在Java开发过程中的用户注册账号的功能实现。 二、准备工作 1、通过

    2023年04月09日
    浏览(15)

  • 使用Django Rest Framework设计与实现用户注册API

    在现代Web应用开发中，RESTful API已成为前后端分离架构中的关键组件。Django Rest Framework (DRF) 是一款基于Django的优秀库，提供了丰富的工具和接口，极大地简化了RESTful API的设计与实现。本文将以用户注册功能为例，展示如何运用DRF构建一个完整的API端点，包括数据验证、模型

    2024年04月25日
    浏览(9)
  • 使用element的form表单，实现显示后端错误信息，并且如果有错误信息（前端通过rules检测的错误信息或者后端传过来的错误信息（如该用户已经注册或该邮箱已经存））点击提交按钮不会再次发起异步请求

    使用element的form表单，实现显示后端错误信息，并且如果有错误信息（前端通过rules检测的错误信息或者后端传过来的错误信息（如该用户已经注册或该邮箱已经存））点击提交按钮不会再次发起异步请求

    前提（触发方式可以有两种触发 trigger: \\\'blur\\\'   或 trigger: \\\'change\\\' ） 主要是三个要点： 1.给el-form-item标签设置error属性，并且绑定data里面的数据(也即:error=\\\"emailError\\\")： 2.设置rules规则为 改变trigger触发方式，设置为trigger: \\\'change\\\' （如果是trigger: \\\'blur\\\'，表单项(el-form-item)的input输入

    2024年02月03日
    浏览(13)
  • MVC框架实现用户登录注册功能（连接数据库）

    MVC框架实现用户登录注册功能（连接数据库）

    一、简单理解MVC框架 二、项目结构 三、项目源码 3.1 User 3.2 UserDao 3.3 RegisterDao 3.4 servletControll 3.5 servletControllRegister 3.6 web.xml 3.7 login.jsp 3.8 register.jsp 3.9 success.jsp 3.10 failure.jsp  四、实现效果 总结 本篇文章主要介绍利用MVC框架去实现一个简单的用户登录注册功能，内容主

    2024年02月06日
    浏览(25)
  • “Layui用户认证：实现安全高效的登录和注册体验”

    “Layui用户认证：实现安全高效的登录和注册体验”

    layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基

    2024年02月16日
    浏览(8)
  • 用Java代码实现学生管理系统（可实现用户登录注册功能）

    用Java代码实现学生管理系统（可实现用户登录注册功能）

    简单实现学生系统的登录和注册，以及学生信息添加、删除，修改、查询功能。根据需求，创建一个学生类和和用户类以及学生系统类，在登录管理系统之前需要先注册用户，只有输入正确的用户名和密码才可以登录，忘记密码后可以根据用户信息进行修改，用容器存储学生

    2024年02月05日
    浏览(13)
  • Javaweb程序设计基础入门eclipse实现用户注册登录和session存储

    Javaweb程序设计基础入门eclipse实现用户注册登录和session存储

    通过HTML，CSS，JavaScript和JSP实现页面的注册，登录和信息显示的三个界面的设计。 1.1注册界面 2.登录界面 3.通过Java代码进行登录界面的校验 1.用request.getParameter()获取表单提交的数据来存储账号和密码 2.if语句来进行账号和密码的校验 4.信息显示界面HTML 通过requst.getParameter()获

    2024年02月05日
    浏览(10)
  • JavaWeb项目----实现用户登录、注册、对商品信息进行的添加、删除、修改功能

    JavaWeb项目----实现用户登录、注册、对商品信息进行的添加、删除、修改功能

    在idea中创建有关类   web中写jsp页面，index.jsp是首页布局 运行效果如下：  登录页面 运行效果如下：   注册页面  运行效果如下：   登陆正确时跳转到zhuye.jsp主页页面（ 使用Java脚本获取集合中对象的元素，放html标签中） 运行效果如下：   在登陆页面，密码或用户名输入

    2024年02月11日
    浏览(13)

  • Django用户注册和用户配置扩展

    本篇是在完成用户登录登出，密码修改功能后，扩展用户注册功能。 关于用户登录、注销、更改密码和重置密码。请查看 Django身份验证初试-CSDN博客 Django登录注销视图-CSDN博客 Django密码修改和重置视图-CSDN博客 创建一个表单，让用户输入用户名、真实姓名和密码。 编辑位于

    2024年01月17日
    浏览(13)

  • 100 行代码实现用户登录注册与 RESTful 接口 - 手把手教程附 Python 源码

    在开发大多数应用时，用户系统都是必不可少的部分，而我们总是需要开发围绕用户的登录，注册，获取，更新等接口。在这篇文章将带你用一百多行代码简洁地实现一套这样的用户鉴权与 RESTful 接口，并使用 Session 来处理用户的登录登出 我们将使用 UtilMeta 框架 完成接口开

    2024年02月19日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包