练习1：登录和注册的数据交互的练习(前端不分离）

1、新建pycharm.project.

2、新建app并激活app:在终端执行命令:python manage.py startapp demo ，如果没有创建成功，试着重启一下pycharm.

然后在setting.py中激活App如下

并创建路径：'DIRS': [os.path.join(BASE_DIR, 'templates')]如下

 在urls.py中：

from django.contrib import admin
from django.urls import path
from demo import account, user

urlpatterns = {
    path('admin/', admin.site.urls),
    # 登录
    path(r'login/', user.login),
    # 注册
    path('register/', user.register),
}

在user.py 中：

def login(request):
    if request.method == "GET":
        return render(request, 'login.html')

    if request.method == "POST":

        username = request.POST.getlist("username")[0]
        password = request.POST.getlist("password")[0]

        print(username, password)

        if username == "admin" and password == "admin123":

            return render(request, 'Index.html', {'username': "登录成功"})
        else:
            return render(request, 'login.html', {'username': "登录失败,账号或者密码错误"})


def Register(request):
    if request.method == "GET":
        return render(request, 'register.html')

    if request.method == "POST":

        username = request.POST.getlist("username")[0]
        password = request.POST.getlist("password")[0]

        print(username, password)

        if username == "admin" and password == "admin123":

            return render(request, ''login.html', {'username': "注册成功"})
        else:
            return render(request, 'Index.html', {'username': "注册失败,请重新注册"})

 

在login.html.中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="account">
    <h2>用户登录</h2>
    <form method="post" action="/login/">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="username" placeholder="用户名">
        </div>
        <div class="form-group">
            <label>密码</label>
             <input type="password" class="form-control" name="password"  placeholder="密码">
        </div>
        <input type="submit" value="登录" class="btn btn-primary">
    </form>
</div>

</body>
</html>

 

在register.html中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="user">
    <h2>用户注册</h2>
    <form method="post" action="/login/">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="username" placeholder="用户名">
        </div>
        <div class="form-group">
            <label>密码</label>
             <input type="password" class="form-control" name="password"  placeholder="密码">
        </div>
         <div class="form-group">
            <label>确认密码</label>
            <input type="password" class="form-control" name="re-password" placeholder="重新输入密码">
        </div>
        <input type="submit" value="登录" class="btn btn-primary">
    </form>
</div>
</body>
</html>

 

posted @ 2022-05-15 18:49  费皿啊  阅读(36)  评论(0)    收藏  举报