day61
view.py
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from app01 import models
import hashlib
import random
from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO, StringIO
# Create your views here.
def register(request):
# 获取到前端传入的数据
if request.method == 'POST':
back_dic = {'code': 200, 'msg': '注册成功'}
username = request.POST.get('username')
password = request.POST.get('password')
re_password = request.POST.get('re_password')
avatar = request.FILES.get('avatar')
# print(username)
# 进行验证
if not username:
back_dic['code'] = 1001
back_dic['msg'] = '用户名不能为空'
return JsonResponse(back_dic)
if not password:
back_dic['code'] = 1002
back_dic['msg'] = '密码不能为空'
return JsonResponse(back_dic)
res = models.UserInfo.objects.filter(username=username).first()
if res:
back_dic['code'] = 1003
back_dic['msg'] = '用户名已经存在'
return JsonResponse(back_dic)
# 入库
m = hashlib.md5()
m.update(password.encode('utf-8'))
password = m.hexdigest()
print(password)
dic = {}
if avatar:
dic['avatar'] = avatar
dic['username'] = username
dic['password'] = password
models.UserInfo.objects.create(**dic)
back_dic['url'] = '/login/'
return JsonResponse(back_dic)
return render(request, 'register.html')
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'] = 1004
back_dic['msg'] = '验证码错误'
return JsonResponse(back_dic)
m = hashlib.md5()
m.update(password.encode('utf-8'))
password = m.hexdigest()
res = models.UserInfo.objects.filter(username=username, password=password).first()
if not res:
back_dic['code'] = 1005
back_dic['msg'] = '用户名或者密码不正确'
return JsonResponse(back_dic)
# 保存用户信息
request.session['username'] = username
request.session['id'] = res.id
back_dic['url'] = '/home/'
return JsonResponse(back_dic)
return render(request, 'login.html')
def home(request):
return render(request, 'home.html', locals())
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) # 字体样式 大小
# 随机验证码 五位数的随机验证码 数字 小写字母 大写字母
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 logout(request):
request.session.flush()
return redirect('/login/')
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()
res = models.UserInfo.objects.filter(username=request.session.get('username'), password=old_pwd).first()
print(res)
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()
ret = models.UserInfo.objects.filter(id=request.session.get('id')).update(password=new_pwd)
return JsonResponse(back_dic)
register.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>
{% load static %}
<script src="{% static 'layer-v3.5.1/layer/layer.js' %}"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 class="text-center">注册页面</h1>
<div class="col-md-8 col-md-offset-2">
<form action="">
<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="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="username">确认密码：</label>
<input type="password" id="re_password" class="form-control">
</div>
<div class="form-group">
<label for="myfile">上传头像：
<img src="/static/img/default.jpg" id="myimg" alt="" width="120">
</label>
<input type="file" id="myfile" class="form-control" style="display: none">
</div>
<input type="button" class="btn btn-success pull-right" value="注册">
</form>
</div>
</div>
</div>
<script>
$("#myfile").change(function () {
//借助于文件阅读器对象
let myFileReadObj = new FileReader()
//获得一个文件对象
let FileObj = $('#myfile')[0].files[0]
//将文件对象交给文件阅读器阅读
myFileReadObj.readAsDataURL(FileObj) // 异步操作
myFileReadObj.onload = function () {
console.log(myFileReadObj.result)
$('#myimg').attr('src', myFileReadObj.result)
}
})
$('.btn').click(function () {
let FormDataObj = new FormData()
// 拿到前端用户输入的数据
let username = $('#username').val()
let password = $('#password').val()
let re_password = $('#re_password').val()
if (!username){
layer.msg('用户名不能为空')
return
}
if (!password){
layer.msg('密码不能为空')
return
}
if (!re_password){
layer.msg('确认密码不能为空')
return
}
// 加入普通数据
FormDataObj.append('username', username)
FormDataObj.append('password', password)
FormDataObj.append('re_password', re_password)
// 加入文件数据
FormDataObj.append('avatar', $('#myfile')[0].files[0])
$.ajax({
url:'',
type:'post',
data:FormDataObj,
contentType:false,
processData:false,
success:function (res) {
console.log(123)
if (res.code == 200){
layer.msg(res.msg, {}, function () {
location.href = res.url //跳转页面
})
} else {
layer.msg(res.msg, {icon:2})
}
}
})
})
</script>
</body>
</html>
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>
{% load static %}
<script src="{% static 'layer-v3.5.1/layer/layer.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="password">密码：</label>
<input type="text" id="password" class="form-control">
</div>
<div class="form-group">
<label for="code">验证码：</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>
<script>
$('.btn').click(function () {
var username = $('#username').val()
var password = $('#password').val()
var code = $('#code').val()
if (!username) {
layer.msg('请输入用户名')
return
}
// 发送ajax请求
$.ajax({
url:'',
type:'post',
data:{
'username':username,
'password':password,
'code':code,
},
success:function (res) {
if (res.code == 200){
layer.msg(res.msg, {}, function () {
location.href = res.url
})
} else {
layer.msg(res.msg, {})
}
}
})
})
</script>
</body>
</html>
home.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>
{% load static %}
<script src="{% static 'layer-v3.5.1/layer/layer.js' %}"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BBS18</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">博客</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">修改密码</a></li>
<li><a href="#">修改头像</a></li>
<li><a href="#">后台管理</a></li>
<li><a href="#">退出登录</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
<li><a href="#">修改头像</a></li>
<li><a href="#">后台管理</a></li>
<li><a href="/logout/">退出登录</a></li>
{% else %}
<li><a href="/reg/">注册</a>></li>
<li><a href="/login/">登录</a>></li>
{% endif %}
</ul>
<!-- Large modal -->
{# <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">#}
{# Large modal#}
{# </button>#}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" disabled id="username" class="form-control" value="{{ request.session.username }}">
</div>
<div class="form-group">
<label for="username">旧密码：</label>
<input type="password" id="old_pwd" class="form-control">
</div>
<div class="form-group">
<label for="username">新密码：</label>
<input type="password" id="new_pwd" class="form-control">
</div>
<div class="form-group">
<label for="username">确认密码：</label>
<input type="password" id="re_pwd" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary edit">提交</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script>
$('.edit').click(function () {
var old_pwd = $('#old_pwd').val();
var new_pwd = $('#new_pwd').val();
var re_pwd = $('#re_pwd').val();
if (!old_pwd){
layer.msg('请输入原密码')
return
}
if (!new_pwd){
layer.msg('请输入新密码')
return
}
if (!old_pwd){
layer.msg('请输入确认密码')
return
}
$.ajax({
url:'/set_pwd/',
type:'post',
data:{'old_pwd':old_pwd, 'new_pwd':new_pwd, 're_pwd':re_pwd},
success: function (res) {
if (res.code == 200){
layer.msg(res.msg, {}, function () {
location.reload()
})
}
}
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号