实战django（一）--（你也能看懂的）注册与登录（带前端模板）

发布时间：2020-12-15 17:08:18 所属栏目：大数据来源：网络整理

导读：先是具体目录：（主要是注意templates和static的位置），其中person文件夹是上一期实战的，不用理会，login是本节实战app ? ? 项目urls.py from django.contrib import admin from django.urls path,includeurlpatterns = [ path( ' admin/ ' ,admin.site.ur

先是具体目录：（主要是注意templates和static的位置），其中person文件夹是上一期实战的，不用理会，login是本节实战app

项目urls.py

from django.contrib import admin
from django.urls  path,include


urlpatterns = [
    path('admin/',admin.site.urls),path('',include(person.urls',namespace=person)),1)">login/login.urlslogin))
]

app中urls.py

 path
from .  views

app_name=
urlpatterns=[
    path(),1)">register/registerregister/savereg/saveregtologin/tologin
from django.db  models

# Create your models here.
class Users(models.Model):
    id=models.AutoField(primary_key=True)
    phone=models.CharField(max_length=20)
    username=models.CharField(max_length=20)
    password=models.CharField(max_length=50)
    repassword=models.CharField(max_length=50)
    birthday=models.DateField()
    regday=models.DateField()

views.py

from django.shortcuts  render
from .models  Users
 datetime

 Create your views here.
def login(request):
    return render(request,login/login.html)
 register(request):
    login/register.html)

 save_register(request):
    if request.method == POST:
        phone=request.POST.get(phone)
        username=request.POST.get(username)
        password=request.POST.get(password)
        repassword=request.POST.get(repassword)
        birthday=request.POST.get(birthday)
        errormsg=''
        if phone =='':
            errormsg=手机号不能为空'
        elif password ==密码不能为空else:
            if password!=repassword:
                errormsg=确认密码与密码不一致if errormsg == :
            Users.objects.create(phone=phone,username=username,password=password,birthday=birthday,regday=datetime.datetime.now().strftime(%Y-%m-%d))
            login/pagejump.html)
        errormsg:errormsg})

 to_login(request):
    if phone == ': 用户名不能为空})
        try:
            user_obj = Users.objects.get(phone=phone)
        except Users.DoesNotExist:
            ':账号不存在,请重新输入})
        pwd=user_obj.password
        password = request.POST.get(if password != :
            repwd=password
            if pwd == repwd:
                username=user_obj.username
                login/index.html:username})
            :
                密码错误'})

<!doctype html>
<html lang="en">
<head>
    <meta charset=UTF-8">
    <title>盒老师</title>
    <meta name=keywords" content=盒老师">
    <meta name=content">
    <meta http-equiv=X-UA-CompatibleIE=edge,chrome=1">
    <link type=text/css" rel=stylesheet" href=/static/login/css/login.css">
    <script type=text/javascript" src=/static/login/js/jquery.min.js"></script>
</head>
<body class=login_bj" >
<div zhuce_body" style=position:absolute;left:130px;top:300px;">
    <div zhuce_kong login_kuang" >
        <div zc">
            <div bj_baiheight:330px;">
            <h3>登录</h3>
                   <form action={% url 'login:tologin'%}" method=post">
                <p style=color: red;margin-top: 0px;">{{errormsg}}</p>
                <input name=" type=text" kuang_txt" placeholder=手机号">
                <input name=密码">
                <div>
                       <input name="" type=checkbox" value="" checked><span>记住我</span><a href=#float:rigth;">忘记密码</a>
                </div>
                <div>
                       <p>没有账号？<a href={% url 'login:register'%}">立即注册</a></p>
                </div>
                <input style=margin-top:2px;" name=登录submitbtn_zhuce">
                </form>
            </div>
        </div>
    </div>

</div>
    
</body>
</html>

View Code

<!doctype html>
<html lang="></script>

</head>
<body " >

<div position:absolute;left:150px;top:300px;zhuce_kong">
        <div ">
            <h3>欢迎注册</h3>
                   <form action={% url 'login:savereg'%}color: red">{{errormsg}}</p>
                <input style=margin-top: 3px;kuang_txt 用户名确认密码"><br>
                <input name=生日">
                <div stytle=">
                    <input name=注册"></span>
                </div>
                </form>
            </div>
        </div>
    </div>

</div>
    

</body>
</html>

View Code

pagejump.html

<body>
<div align=centerborder: 1px solid blueviolet;
        position:absolute;left:500px;top: 200px;width: 400px;height: 50px;>
    <p style=text-align: center;font-size: 20px;">注册成功！还有<span id=sp">4</span>秒跳转到登录界面...</p>
</div>
<script>
    //onload事件会在页面加载完后立即发生
    onload=function () {
        //etInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
        setInterval(go,1000)
    };
    var x=3;
    function go() {

        if (x>=0){
            document.getElementById(").innerText=x;
        } {
            location.href={% url 'login:login'%}";
        }
        x--;
    }
</script>
</body>

View Code

index.html

<!doctype html>
<html lang=viewport
          content=width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0ie=edge">
    <title>Document</title>
</head>
<body>
    <h3><p>hello {{username}}</p></h3>
</body>
</html>

View Code

启动服务器：http://127.0.0.1:8000/login/，来到初始页面：

?点击立即注册，跳转到http://127.0.0.1:8000/login/register/

?我们输入相应信息（后端会有一些简单的验证，如何有错误就会在前端显示，假设我们什么都不输入）：

?其他的更复杂的验证就没怎么写了。我们输入以下数据：

?点击注册：若注册成功，则会跳转到pagejump页：否则返回错误信息给注册页

?三秒后会跳转到登录页，同样的，我们在登录页也有简单的验证，先是登录账号（手机号）不能为空，然后如果在数据库中找不到该手机号，则返回错误信息‘账号不存在，请重新输入’，否则找到该条记录，找到对应密码，将数据库中的密码与输入的进行比较，如果相同，则可以登录，跳转到index界面，否则就返回错误信息，‘密码错误’。

?登录成功后获取用户名，并进行显示。

总结：也不知道该总结啥。。。。

补充：

（1）忘记密码：这个就不实现了，就是绑定手机号或邮箱之类的，发送短信验证进行修改。

（2）注册和登录时输入密码显示为*，也就是不可见。

（3）记住我，将用户放在cookie或session中，下次直接跳转至index页面，而不用进行登录（下一步要实现的）。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!