django前后端不分离——图片验证码,基于Bootstrap3的自定义分页器,Bootstrap模态框无法使用解决方案
目录
- 验证码
- 效果
- 对应模块
- 源码
- 后端
- 前端
- 字体网站
- 自定义分页器
- 效果
- 源码
- 后端
- 前端
- 视图
- Bootstrap模态框无法使用解决方案(点击无法触发)
- 解决方案
验证码
效果
对应模块
- from io import BytesIO, StringIO
- from PIL import Image, ImageDraw, ImageFont
- import random
源码
后端
def code(request):
img_obj = Image.new('RGB', (450, 35), get_random())
'''
生成图片对象
参数1:图片类型,这里用rgb
参数2:图片大小,根据前端验证码框设置
参数3:图片颜色,可以放rgb值,这里使用random.randint(0,255)生成
'''
img_draw = ImageDraw.Draw(img_obj)
# 生成画笔对象
img_font = ImageFont.truetype('static/font/font-01.ttf', 30)
# 生成字体对象
'''
参数1:.ttf文件路径
参数2:字体大小
'''
code = ''
for i in range(5):
random_upper = chr(random.randint(65, 90))
random_lower = chr(random.randint(97, 122))
random_int = str(random.randint(0, 9))
tmp = random.choice([random_int, random_lower, random_upper])
img_draw.text((i * 60 + 70, 0), tmp, get_random(), img_font)
code += tmp
request.session['code'] = code
# 验证码利用session存起来
io_obj = BytesIO()
# 使用内存管理模块处理,可以看成文件句柄
img_obj.save(io_obj, 'png')
# 不用再存储到服务器的static文件下,方便省事
return HttpResponse(io_obj.getvalue())
# 返回给前端
前端
<div class="form-group">
<label for="">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" name="code" id="id_code" class="form-control">
</div>
<div class="col-md-6">
<img src="/get_code/" alt="" width="450" height="35" id="id_img">
</div>
</div>
</div>
注:img标签的src属性是可以放url的,所以放/get_code/
路由到视图函数生成图片丢到前端。
这里有个问题,如果用户看不清验证码怎么办?这里再添加一个点击事件:
$('#id_img').click(function (){
//修改src
let oldSrc=$(this).attr('src');
$(this).attr('src',oldSrc+='?')
})
注: 在/get_code/
后加字符串会导致重新向get_code()发送请求,所以就不用ajax局部刷新验证码
字体网站
自定义分页器
效果
源码
后端
class Page(object):
def __init__(self, all_data, current_page, per_page_data=10, show_page_count=11):
"""
分页器
:param all_data: 总数据条数(int)
:param current_page: 当前页(str)
:param per_page_data: 每页要显示的数据条数(int)
:param show_page_count: 要显示的分页长度(int)
"""
current_page = int(current_page)
self.per = per_page_data
self.all_data = all_data
if current_page <= 1:
current_page = 1
self.current_page = current_page
self.show_page_count = show_page_count
# 切片起点
@property
def start(self):
return (self.current_page - 1) * self.per
# 切片终点
@property
def end(self):
return self.current_page * self.per
# 上一页
@property
def before_page(self):
return self.current_page - 1
# 下一页
@property
def next_page(self):
return self.current_page + 1
# 返回前端的html代码
def html(self):
html = ''
page_count, more = divmod(self.all_data, self.per)
if more:
page_count += 1
temp = self.current_page
if self.current_page < 6:
self.current_page = 6
for i in range(self.current_page - (self.show_page_count // 2),
self.current_page + (self.show_page_count // 2 + 1)):
if temp == i:
html += '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i)
else:
html += '<li class=><a href="?page=%s">%s</a></li>' % (i, i)
return html
前端
<nav class="text-center" aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="?page={{ page_before|safe }}" aria-label="上页">
<span aria-hidden="true">«</span>
</a>
</li>
{{ html|safe }}
<li>
<a href="?page={{ page_next|safe }}" aria-label="下页">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
视图
def user_list(request):
user_list = models.User.objects.all()
all_data = user_list.count()
from utils import my_page
page = my_page.Page(all_data=all_data, current_page=request.GET.get('page', 1), per_page_data=20)
new_user_list = models.User.objects.all()[page.start:page.end]
page_next = page.next_page
page_before = page.before_page
html = page.html()
return render(request, 't_creat_user.html', locals())
Bootstrap模态框无法使用解决方案(点击无法触发)
解决方案
- 方法一:jQuery优先于Bootstrap导入,毕竟Bootstrap依赖jQuery,网上大多是犯了导入的错误。
- 方法二:加id值,代码如下
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="mymodel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form_group">
<label for="">用户名</label>
<input type="text" disabled value="{{ request.user.username }}" class="form-control">
</div>
<div class="form_group">
<label for="">新密码</label>
<input type="password" id="new_password" class="form-control">
</div>
<div class="form_group">
<label for="">确认密码</label>
<input type="password" id="confirm_password" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
调用模态框:
<li><a href='#' data-toggle="modal" data-target="#mymodel">修改密码</a></li>
这里只有两个重要属性:
- data-toggle
- data-target
将原本的 data-target='.modal-dialog modal-lg'
改为 data-target='#mymodal'
即可正常使用模态框.