登录

验证码逻辑：
    生成随机数之后，将随机数保存在服务端。待用户输入的时候，在验证和服务端是不是一致

Python用户修改密码_开发语言

验证码的显示：

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">登录页面</h1>
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="username">密码：</label>
                <input type="text" id="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="username">验证码：</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" id="code" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <img src="/get_code/" width="365" height="40" alt="">
                    </div>
                </div>


            </div>
            <input type="button" class="btn btn-success" value="登录">
        </div>
    </div>
</div>

</body>
</html>

views.py

def login(request):
    return render(request, "login.html")


def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)


def get_code(request):  #生成随机数验证码
    # 最终步骤4:写图片验证码
    img_obj = Image.new('RGB', (430, 35), get_random())
    img_draw = ImageDraw.Draw(img_obj)  # 产生一个画笔对象
    img_font = ImageFont.truetype('static/font/qq.ttf', 30)  # 字体样式 大小 # 可以在zhaozi.cn里面下载

    # 随机验证码  五位数的随机验证码  数字 小写字母 大写字母
    code = ''
    for i in range(5):
        random_upper = chr(random.randint(65, 90))  # A-Z
        random_lower = chr(random.randint(97, 122))  # a-z
        random_int = str(random.randint(0, 9))  # 0-9
        # 从上面三个里面随机选择一个
        tmp = random.choice([random_lower, random_upper, random_int])
        # 将产生的随机字符串写入到图片上
        # 为什么一个个写而不是生成好了之后再写
        # 因为一个个写能够控制每个字体的间隙 而生成好之后再写的话
        # 间隙就没法控制了
        img_draw.text((i * 60 + 60, -2), tmp, get_random(), img_font)
        # 拼接随机字符串
        code += tmp
    print(code)
    # 随机验证码在登陆的视图函数里面需要用到 要比对 所以要找地方存起来并且其他视图函数也能拿到
    request.session['code'] = code
    io_obj = BytesIO()
    img_obj.save(io_obj, 'png')
    return HttpResponse(io_obj.getvalue())

写后端的登录功能

def login(request):
    if request.method == "POST":
        back_dic = {"code": 200, "msg": "登陆成功"}
        username = request.POST.get("username")
        password = request.POST.get("password")
        code = request.POST.get("code")
        # 验证参数（先验证验证码，不对的话，直接干掉）

        # 验证码是否正确(先看不正确的情况，这种写法的阅读性特别好)
        if request.session.get("code") != code:
            back_dic["code"] = 1005
            back_dic["msg"] = "验证码错误"
            return JsonResponse(back_dic)

        # 把拿到的密码hash一下，和库里面的数据比较（库里面就是hash的数据）
        m = hashlib.md5()
        m.update(password.encode("utf-8"))
        password = m.hexdigest()  # 现在密码就是hash之后的
        res = models.UserInfo.objects.filter(username=username, password=password).first()
        if not res:  # 直接用户名密码一起查，模糊提示
            back_dic["code"] = 1006
            back_dic["msg"] = "用户名或者密码错误"
            return JsonResponse(back_dic)
        # 保存用户信息（都正确的情况下）
        request.session["username"] = username
        back_dic["url"] = "/home/"  # 可以参考之前的功能，跳转到用户输入的压面
        return JsonResponse(back_dic)

        # 业务复杂的话，会存username，和全部用户信息，后面要哪个数据都可以从这个res里面取
        # request.session["userinfo"] = res

    return render(request, "login.html")

写首页

Python用户修改密码_验证码_02


Python用户修改密码_开发语言_03

Python用户修改密码_python_04

现在实现一个这样的功能：没有登录的时候，显示注册和登录，登录的时候不显示

在首页里面判断一下

Python用户修改密码_Python用户修改密码_05

现在写改密码

前段点击修改密码，直接出来一个弹框，或者一个新的页面都可以

Python用户修改密码_Python用户修改密码_06

模态框

Python用户修改密码_前端_07


Python用户修改密码_验证码_08

下面开始写功能，绑定事件

Python用户修改密码_验证码_09


Python用户修改密码_开发语言_10

def set_pwd(request):
    if request.method == "POST":
        back_dic = {"code": 200, "msg": "修改成功"}
        old_pwd = request.POST.get("old_pwd")
        new_pwd = request.POST.get("new_pwd")
        re_pwd = request.POST.get("re_pwd")
        # 验证参数：验证原密码是否正确
        m = hashlib.md5()
        m.update(old_pwd.encode("utf-8"))
        old_pwd = m.hexdigest()  # 现在密码就是hash之后的
        res = models.UserInfo.objects.filter(username=request.session.get("username"),
                                             password=old_pwd)  # username在session中，password需要加密
        if not res:  # 没有查到原密码，原密码不正确
            back_dic["code"] = 1007
            back_dic["msg"] = "原密码不正确"
            return JsonResponse(back_dic)

        if new_pwd != re_pwd:  # 如果两次输入的密码不正确
            back_dic["code"] = 1008
            back_dic["msg"] = "确认密码不正确"
            return JsonResponse(back_dic)

        # 修改操作
        m = hashlib.md5()
        m.update(new_pwd.encode("utf-8"))
        new_pwd = m.hexdigest()  # 现在密码就是hash之后的
        ret = models.UserInfo.objects.filter(id=request.session.get("id")).update(password=new_pwd)  # 这里要用id来筛选，因为username是会重复的。
        return JsonResponse(back_dic)

首页现在有了导航栏了，缺左边，右边中间的

{#下面是3块，先分一下#}

<div CLASS="container-fluid">
    {#左边#}
    <div class="col-md-2">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    {#中间#}
    <div class="col-md-8"></div>
    {#右边#}
    <div class="col-md-2">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

Python用户修改密码_前端_11

两边的弄好了，现在就差中间的了，中间的就是文章了，就是数据了。这里我们利用后台管理，admin

先创建超级用户

Python用户修改密码_验证码_12


Python用户修改密码_Python用户修改密码_13


Python用户修改密码_Python用户修改密码_14


Python用户修改密码_python_15

现在我们要添加文章，就需要添加文章表

这个admin后台，就是给表一个增删改查的功能

Python用户修改密码_前端_16


Python用户修改密码_验证码_17


Python用户修改密码_Python用户修改密码_18


Python用户修改密码_验证码_19

Python用户修改密码_验证码_20


Python用户修改密码_开发语言_21


Python用户修改密码_Python用户修改密码_22


Python用户修改密码_python_23


Python用户修改密码_python_24

null=True，是限制数据库可以为空。还需要加上 blank=True

Python用户修改密码_前端_25


Python用户修改密码_开发语言_26


Python用户修改密码_开发语言_27

现在还没有添加标签表，每个文章都需要标签的。我们现在添加一下

Python用户修改密码_开发语言_28


Python用户修改密码_验证码_29

站点是跟user表关联的，我们在user表里面添加一下站点信息

Python用户修改密码_验证码_30

这个就是把用户和站点关联起来了，用户个站点是一对一的关系

在加一下第三张表，是文章和标签之间关系的

Python用户修改密码_python_31

现在数据添加好了，就需要在页面上把读出来了
在def home(request)里面，还是得搞文章的样式
现在就是要给他加东西

Python用户修改密码_python_32


Python用户修改密码_python_33


Python用户修改密码_开发语言_34


Python用户修改密码_开发语言_35


Python用户修改密码_开发语言_36


Python用户修改密码_Python用户修改密码_37

但是感觉文章标题有点奇怪，调整一下

Python用户修改密码_验证码_38

但是现在感觉上下有点挤，可以加一个水平线

Python用户修改密码_验证码_39

Python用户修改密码_前端_40


Python用户修改密码_Python用户修改密码_41