python中django用户登录与前端交互

╰+攻爆jí腚メ 2022-08-31 05:58 152阅读 0赞

我们最终目的是要在前端显示异常。

![image-20210723102707596][]

#### 关键代码： ####

return render(request, "login.html",{ 'error_msg':error_msg})

### 完整代码： ###

# -*- coding: utf-8 -*-
    from __future__ import unicode_literals
    
    import os.path
    
    
    # Create your views here.
    from django.shortcuts import HttpResponse
    from django.shortcuts import render
    from django.shortcuts import redirect
    
    
    def index(request):
        return HttpResponse("CMDB")
    
    
    def login(request):
        error_msg=""
        if request.method == "POST":
            username = request.POST.get("username",None)
            password = request.POST.get("password",None)
            print (username,password)
            if username=='root' and password=='admin123':
                #去跳转到
                return redirect('http://www.baidu.com')
            else:
                error_msg='用户名或密码错误'
        return render(request, "login.html",{ 'error_msg':error_msg})

### 前端页面 ###

以`{ {error_msg}}`形式写，可以理解为是一个占位符。

<span style="color: red">{ {  error_msg }}</span>

当后端传值过来的时候，就做一个替换。

### 完整代码如上： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/static/commons.css">
    </head>
    <style>
        label { 
            width: 80px;
            text-align: right;
            display: inline-block;
        }
    
        #submit { 
            margin-left: 100px;
            width: 100px;
            height: 30px;
        }
    </style>
    <body>
    <form action="/login" method="post">
        <p>
            <label for="username">用户名:</label>
            <input type="text" name="username"><br>
        </p>
        <p>
            <label for="passoword">密码:</label>
            <input type="password" name="password">
            <span style="color: red">{ {  error_msg }}</span>
            <br>
        </p>
        <input type="submit" id="submit">
    </form>
    <script src="/static/jquery-3.6.0.min.js"></script>
    </body>
    </html>

[image-20210723102707596]: /images/20220829/794a13dfa63943a49b1631dae2b59d1e.png