django_layui+jquery+token实现平台的登录

最新推荐文章于 2023-05-16 11:39:52 发布
最新推荐文章于 2023-05-16 11:39:52 发布
阅读量743 收藏 7
点赞数 1
分类专栏： django 文章标签： 其他 数据库 database django python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43258703/article/details/121448595
版权

一、我们现在做一个登录页面
1、layui ：前端开发框架，类似vue
2、jquery：js代码

二、layui的静态资源引用
layui静态资源下载：Layui - 经典开源模块化前端 UI 框架

image.png

image.png

三、下载js静态资源
https://code.jquery.com/jquery-3.6.0.min.js
打开后不要害怕，你没看错

image.png

image.png


点击右键，另存为就行了

四、django中加载layui和js的静态资源

在项目的根目录下建一个 static文件夹，把下载的都放进去

image.png

image.png

然后在settings.py中把路径加载进去

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

五、现在我们来看前端代码

{% load static %}   {#加载静态资源路径#}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
   {#加载所有静态资源#}
    <link rel="stylesheet" href="{% static 'css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'css/modules/laydate/default/laydate.css' %}">
    <link rel="stylesheet" href="{% static 'css/modules/layer/default/layer.css' %}">
</head>
<body>
<div class="layui-container">
    <div class="layui-row" style="margin-top: 200px">
        <div class="layui-col-xs6layui-col-sm6 layui-col-md6 layui-col-xs-offset3 layui-col-sm-offset3 layui-col-md-offset3">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                    <div class="layui-panel">
                        <div style="padding: 30px;">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                <legend>自动化测试平台登录</legend>
                            </fieldset>
                            <form class="layui-form" action="" lay-filter="example">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-block">
                                        <label>
                                            <input type="text" name="username" lay-verify="title"  autocomplete="off"
                                                   placeholder="请输入用户名"
                                                   class="layui-input">
                                        </label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-block">
                                        <label>
                                            <input type="password" name="password" placeholder="请输入密码"
                                                   autocomplete="off"
                                                   class="layui-input">
                                        </label>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button class="layui-btn layui-btn-primary">注册</button>
                                    </div>
                                </div>

                            </form>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
{#加载js资源#}
<script src={% static "jquery-3.6.0.min.js" %}></script>
<script src={% static "layui.js" %}></script>
<script src={% static "layui.all.js" %}></script>
<script src="{% static 'lay/modules/layer.js' %}"></script>

<script>

    layui.use('layer', function () {
        layer = layui.layer;

    });
    layui.use('form', function () {
        form = layui.form;

    });
{# 发送ajax请求#}
    form.on('submit(formDemo)', function (data) {
        {#/do_login/代表发送请求的链接，data.field是form表单中请求的所有参数，function (result)是回调函数#}
        $.post("/do_login/", data.field, function (result) {
            if (result.code == 0) {
                layer.msg(result.message, {time: 3000}, function () {
                    window.location.href = "/basic/"; 
                });

            } else  {
                layer.msg(result.message, {time: 3000});
            }
        });
        return false;
    });
</script>

</body>
</html>

2、后端代码
（1）登录

from django.core.signing import BadSignature
from django.db import IntegrityError
from django.shortcuts import render
from rest_framework.decorators import api_view
from rest_framework.authtoken.models import Token
from django.contrib.auth import authenticate
from django.contrib.auth.models import User
from django.http import JsonResponse

@api_view(["POST", ])
def api_do_login(request):
    username = request.POST.get("username")
    print("username:" + str(username))
    password = request.POST.get("password")
    print("password:" + str(password))
    uid = 0
    token = ""
    if username not in [None, ""]:
        if password not in [None, ""]:
            user = authenticate(username=username, password=password)
            if user not in [None, ""]:
                uid = user.id
                token = Token.objects.filter(user=user).first().key
                res = {"code": 0, "message": "登录成功", "uid": uid, "token": token}
            else:
                res = {"code": 10000, "message": "用户名或密码错误"}

        else:
            res = {"code": 10001, "message": "密码不能为空"}

    else:
        res = {"code": 10001, "message": "用户名不能为空"}
    response = JsonResponse(res)
    if res["code"] == 0: #如果登录成功，则种cookie,max_age是cookie超时时间
        response.set_signed_cookie("uid", uid, salt="adbc", max_age=600)
        response.set_signed_cookie("token", token, salt="adbc", max_age=600)
    return response

(2)再次登录，如果token存在，且正确，直接显示首页

@api_view(["GET", ])
def api_basic(request):
    try:
        uid = request.get_signed_cookie("uid", salt="adbc")
        token = request.get_signed_cookie("token", salt="adbc")
        if uid not in ["", None]:
            if token not in ["", None]:
                key = Token.objects.filter(user_id=uid).first().key
                print("key=" + key)
                print("token=" + token)
                if token == key:
                    res = render(request, "basic.html")
                else:
                    res = render(request, "login.html")
            else:
                res = render(request, "login.html")
        else:
            res = render(request, "login.html")
    except BadSignature:   #加的盐校验不正确
        res = render(request, "login.html")
    except KeyError: #token错误
        res = render(request, "login.html")
    return res
你是猴子请来的救兵吗！！
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DataMingingPaper:基于Django+LayUI+HBase的文献数据挖掘系统的实现
05-17
基于Django+LayUI+HBase的文献数据挖掘系统的实现 引言：本系统的目标是设计并实现一个基于分布式数据库HBase的文献数据挖掘系统，以帮助科研人员分析出相关科技前沿领域的专家、机构等的学术影响力。并挖掘领域高频词和不同协作者之间的关系图谱，如此便可达到科研决策支持的目的。以下将从几个方面进行简要介绍。 一、开发意义 科研文献是科技与学术的载体，高效的分析科研文献对科技的发展有着重要的推动作用。准确地提取出期刊会议中科研文献元数据里所隐藏的信息，可提高科研文献分析的准确度与效率。 二、功能架构设计 本系统的功能主要分为三个模块，分别是数据统计分析结果展示平台、后台管理系统和数据存储平台，其总体功能架构如图所示。 三、系统实现 3.1 开发环境及框架配置 考虑到系统需求，采用在CentOS系统上，搭建整个开发和运行环境，其中包括Hadoop分布式平台以及HBase分布式数据库，在
Python后台管理系统Django+Layui框架搭建教程
一米阳光的博客
03-09 331
一款 Python 语言基于Django、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
基于Django+LayUI+HBase的文献数据挖掘系统的实现
SL_World的博客
06-01 3500
引言：本系统的目标是设计并实现一个基于分布式数据库HBase的文献数据挖掘系统，以帮助科研人员分析出相关科技前沿领域的专家、机构等的学术影响力。并挖掘领域高频词和不同协作者之间的关系图谱，如此便可达到科研决策支持的目的。以下将从几个方面进行简要介绍。 一、开发意义 科研文献是科技与学术的载体，高效的分析科研文献对科技的发展有着重要的推动作用。准确地提取出期刊会议中科研文献元数据里所隐藏的信息，...
UI自动化脚本--解决登录滑动缺口验证
weixin_50501942的博客
05-08 255
将cookie和token拿过来，跳过登录滑动缺口验证。
Django+layui 实现多文件上传，文件下载
SilentWu的博客
05-13 5724
Django+layui 实现多文件上传、文件下载 django教程：http://www.liujiangblog.com/course/django/84 https://www.runoob.com/django/django-tutorial.html layui官网： https://www.layui.com/doc/ l...
基于 python3+django 开发的一套 web 可视化的运维自动化项目源码.zip
05-08
基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+django 开发的一套 web 可视化的运维自动化项目源码 基于 python3+djang
基于Django+Layui框架快速入门教程
一米阳光的博客
03-11 1040
一款 Python 语言基于Django、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
集成Layui前端+Django
awu_ya的博客
05-16 1194
这是前端页面的样式展示，下面我们开始配置并做一下增删查改的功能。url之前介绍了，也就是我们常说的路由层。路由是根据不同的url地址展示不同的内容或页面，一般在【urls.py】中配置访问的URL。这是项目的结构图，把layui的前端放到templates和static静态资源下，同时templates和static放到子应用下，就可以了。这个博客下的path的函数介绍特别详细：https://www.cnblogs.com/renshaoqi/p/10537279.html。
django+layui表格数据管理
qq_43606857的博客
03-28 4544
之前做项目对表格数据管理一直都很头疼，表格通常会包含分页、筛选、单行表格数据操作、多行表格数据操作、排序这些功能。同时对vue这个前端框架不熟悉，前后端不分离导致在表格这一项上需要捋大量逻辑、写大量的代码。后来试了一下layui这个前端框架中的表格，意外发现十分好用 layui layui框架和其他前端框架并没有什么区别，拥有比较齐全的组件，使用文档看的是有点难受，因为代码部分和组件部分各自堆积在一起，找起来让人头疼。 虽然但是，用起来的时候还是很香的layui官网 layui表格 查看layui表格文档，
python web项目（django+Layui+mysql）
热门推荐
qq_48185464的博客
06-09 1万+
python web项目（djiango+Layui+mysql）1.结果图2目录结构3.开干4.总结 为了完成期末作业，做的一个学生成绩管理系统，采用djiango+Layui+mysql5.5，实现了学生成绩的增删改查，分页显示，批量从文件导入数据，将学生数据导出为excel文件，用pyecharts对学生成绩进行分析，登录、等功能整个采用异步请求，看这篇文章首先你要对ajax有了解，对layui框架有了解，会简单实用即可 1.结果图 导入的文件格式必须是.csv，学生学号字段不能重复
python+Django+layui 实现web 列表增删改查
04-30
Django 学习实例 第四节：实现列表的增删改查 代码如下: views.py  dblist.js  dblist.html  dbadd.html
Django_layui后台模板
10-09
Django_layui后台模板
基于Django+LayUI+HBase的文献数据挖掘系统的实现项目源码
最新发布
06-30
基于Django+LayUI+HBase的文献数据挖掘系统的实现项目源码 引言：本系统的目标是设计并实现一个基于分布式数据库HBase的文献数据挖掘系统，以帮助科研人员分析出相关科技前沿领域的专家、机构等的学术影响力。并挖掘...
基于Django+LayUI+HBase的文献数据挖掘系统
01-27
基于Django+LayUI+HBase的文献数据挖掘系统、基于Django+LayUI+HBase的文献数据挖掘系统、基于Django+LayUI+HBase的文献数据挖掘系统、基于Django+LayUI+HBase的文献数据挖掘系统、基于Django+LayUI+HBase的文献数据...
js easyui 标签页_【实战演练】Python+Django网站开发系列04-Django导航BASE页开发
weixin_39715907的博客
11-20 88
#本文欢迎转载，转载请注明出处和作者。上一篇讨论了如何编写静态页面，静态页面通过html语言书写，但是html写出来的页面实在是丑，所以需要进行美化，这就需要用到CSS与JS了。另外，像导航条，每一页都是一样的，因此没必要每个html页面里面把代码重复写一遍，就需要制作BASE页面了。1、CSS1.1 CSS语法CSS叫层叠样式表，主要是用来批量修改html元素的样式的（例如字体、颜色、大小等）。...
PythonUI自动化如何解决图形验证登录之-cookie注入绕过登录
qq_41752647的博客
12-08 1253
PythonUI自动化如何解决图形验证登录之-cookie注入绕过登录
基于Django、Layui的前后端分离的学生成绩管理系统。
weixin_42252798的博客
03-19 734
基于Django、Django Rest framework、Layui的前后端分离的学生成绩管理系统。默认就是本机的8000端口启动,只能本机访问。创建的数据库信息和配置文件需要保持一样.三连之后我会在评论区挨个私信发给你们~5. 执行Django数据库迁移脚本。1. 安装环境poetry。6. 启动Django服务。四、Django原生部署。4. 创建对应的数据库。
Django+Layui后台管理系统框架
一米阳光的博客
03-12 497
一款 Python 语言基于Django、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
基于Django+Layui的组件化开发框架
一米阳光的博客
03-09 763
一款 Python 语言基于Django、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
django+layui+原生sql语句实现登录详细
06-08
好的，以下是一个基于 Django + Layui + 原生 SQL 语句实现登录的详细步骤： 1. 创建 Django 项目并安装必要的包，包括 Django、pymysql 等。可以使用以下命令创建一个名为 myproject 的 Django 项目： ``` django-admin startproject myproject ``` 2. 在 myproject 项目中创建一个名为 login 的应用程序，可以使用以下命令： ``` python manage.py startapp login ``` 3. 在 login 应用程序中创建一个名为 models.py 的文件，并定义一个 User 模型，其中包含用户名和密码： ```python from django.db import models class User(models.Model): username = models.CharField(max_length=50) password = models.CharField(max_length=50) ``` 4. 在 myproject 项目的 settings.py 文件中配置数据库连接，例如使用 MySQL 数据库： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'myproject', 'USER': 'root', 'PASSWORD': 'password', 'HOST': 'localhost', 'PORT': '3306', } } ``` 5. 在 login 应用程序中创建一个名为 views.py 的文件，并编写一个名为 login 的视图函数，用于处理登录请求： ```python from django.shortcuts import render from django.http import JsonResponse from django.db import connection def login(request): if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') with connection.cursor() as cursor: cursor.execute('SELECT * FROM login_user WHERE username=%s AND password=%s', [username, password]) user = cursor.fetchone() if user: # 登录成功 return JsonResponse({'code': 0, 'msg': '登录成功'}) else: # 登录失败 return JsonResponse({'code': 1, 'msg': '用户名或密码错误'}) else: return render(request, 'login.html') ``` 6. 在 login 应用程序中创建一个名为 templates 的文件夹，并在其中创建一个名为 login.html 的模板文件，用于显示登录页面： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}"> </head> <body> <div class="layui-container"> <div class="layui-row layui-col-space15"> <div class="layui-col-md6 layui-col-md-offset3"> <form class="layui-form" action="{% url 'login' %}" method="post"> {% csrf_token %} <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> </div> </div> </form> </div> </div> </div> <script src="{% static 'layui/layui.js' %}"></script> <script> layui.use(['form'], function(){ var form = layui.form, $ = layui.jquery; }); </script> </body> </html> ``` 7. 在 myproject 项目中的 urls.py 文件中配置路由，例如： ```python from django.urls import path from login import views urlpatterns = [ path('login/', views.login, name='login'), ] ``` 8. 运行 Django 项目并访问登录页面，例如： ``` python manage.py runserver ``` 然后在浏览器中访问 http://localhost:8000/login/ 即可看到登录页面。 以上就是一个基于 Django + Layui + 原生 SQL 语句实现登录的详细步骤。希望对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值