Django+mysql+html实现一个简单的登录注册页面

夜深人静，难免有些emo，感觉这个暑假过的真是有点累，好多好多事儿都堆在了一起，也有很多对未来不确定性的反复焦虑，不管怎样，人还是活在当下吧！今天想了想学的东西足够做一个Django+mysql+html结合起来的登陆注册页面了，那就来吧！

Django配置

首先Django前面的创建项目和app就不去写啦前面博客里也有写过，然后因为我打算用mysql，而默认配置是sqlite3，我们需要做完前面那些，包括app注册（很重要！很重要！很重要！），然后首先来创建一个数据库吧！

我这里先看了一下有个同名的test1，应该是我之前创建的，就先把它删除了

然后下一步我们就去settings里面修改一下数据库配置吧

可以看到这是已经修改好的数据库配置

数据库表的创建和字段设置

下一步我们就要利用Django内部的ORM去创建数据库表和其内部字段了，我们就先创建一个数据库表吧！

然后执行命令：

python manage.py makemigrations
python manage.py migrate

然后我们就搞定了数据库方面

html页面方面

首先我们创建基础文件夹templates，static及其下的css，js，img，plugins

悄悄说要把前面整合起来对我这个菜鸡来说还是花费了点时间

下面附上html代码和我做的过程的一些错误！~

首先便是导入{% load static %}，这是Django通用的一个导入形式，然后后续href都以这种导入形式来搞，有一个好处是什么，就是如果项目上线需要更改文件夹名称等等，他会在自动帮我们把所有导入修改，比较方便。

然后下一步便是打开bootstrap官网，找到我们导入版本的css样式组件，找到表单把它copy进来

下一步修改表单，删除我们不需要的部分，然后添加样式account和account h2，其中的样式细节需要我们依据前面的内容自行进行微调。

然后考虑到我们需要有一个用户名或密码错误的选项，我们用模板语法加入了

，这个后面如果用render传值那么就会显示，如果不传值默认不显示。

这里记得表单设为post提交，然后要加{% csrf_token %}，因为django有csrf校验，我们需要把他免除。

然后要把注册按钮在表单外显示，因为如果在表单内，他会默认提交表单进行操作，而我们这里仅仅只是想跳转到注册页面。

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <style>
        .account {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;
        }

        .account h2 {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="account">
    <h2>用户登录</h2>
    <form method="post" action="/login/">
        {% csrf_token %}
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" name="user" class="form-control" id="exampleInputEmail1" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" name="pwd" class="form-control" id="exampleInputPassword1" placeholder="密码">
        </div>
        <div>
            <button style="margin-left:125px;" type="submit" onclick="myfunc()" class="btn btn-primary">登录</button>
        </div>

    </form>
    <a href="/register/">
        <button style="margin-left:125px;" type="submit" onclick="myfunc()" class="btn btn-primary">注册</button>
    </a>
    <div style="color: red;">{{ error_msg }}</div>
</div>
</body>
</html>

下面是register界面代码：

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册界面</title>
    <style>.account {
        width: 500px;
        height: 400px;
        border: 2px solid #dddddd;
        border-radius: 5px;
        box-shadow: 5px 5px 20px #aaa;

        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        padding: 20px 40px;
    }

    .account h2 {
        margin-top: 10px;
        text-align: center;
    }
    </style>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
</head>
<body>
<div class="account">
    <h2>用户注册</h2>
    <form method="post" action="/register/">
        {% csrf_token %}
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" class="form-control" name="user" id="exampleInputEmail1" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" name="pwd" id="exampleInputPassword1" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">年龄</label>
            <input type="text" class="form-control" name="age" id="exampleInputPassword1" placeholder="请输入年龄">
        </div>
        <div style="margin-left:180px;display: inline-block">
            <button style="margin-top: 25px" type="submit" onclick="myfunc()" class="btn btn-primary">确认</button>
        </div>
    </form>
</div>
<script type="text/javascript"> function myfunc() {
    alert("注册成功！~")
} </script>
</body>
</html>

下面是views代码：

思路就是get请求访问时返回页面，post请求访问时相当于提交表单，然后我们在views里用Django内置的ORM进行数据库操作，从而去验证登录和把注册信息返回到登录里面，如果登录成功就跳转到百度页面，这里重定向到百度页面了直接，然后如果不成功，render后面加error_msg参数传递错误即可，跳转后会显示错误。

from django.shortcuts import render, HttpResponse, redirect
from web import models


# Create your views here.
def index(request):
    return HttpResponse("欢迎欢迎！~")


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

    # 如果是POST请求，获取用户提交的数据
    # print(request.POST)
    username = request.POST.get("user")
    password = request.POST.get("pwd")
    if models.UserInfo.objects.filter(name=username, password=password):
        return redirect("http://www.baidu.com/")
    # return HttpResponse("登录失败")
    return render(request, "login.html", {"error_msg": "用户名或密码错误"})


def register(request):
    if request.method == "GET":
        return render(request, "register.html")
    username = request.POST.get("user")
    password = request.POST.get("pwd")
    age = request.POST.get("age")
    models.UserInfo.objects.create(name=username, password=password, age=age)
    return render(request,"login.html")