当前位置: 首页 > article >正文

django前后端不分离——图片验证码,基于Bootstrap3的自定义分页器,Bootstrap模态框无法使用解决方案

目录

  • 验证码
    • 效果
    • 对应模块
    • 源码
      • 后端
      • 前端
    • 字体网站
  • 自定义分页器
    • 效果
    • 源码
      • 后端
      • 前端
      • 视图
  • Bootstrap模态框无法使用解决方案(点击无法触发)
    • 解决方案

验证码

效果

在这里插入图片描述

对应模块

  1. from io import BytesIO, StringIO
  2. from PIL import Image, ImageDraw, ImageFont
  3. 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">&laquo;</span>
      </a>
    </li>
    {{ html|safe }}
    <li>
      <a href="?page={{ page_next|safe }}" aria-label="下页">
        <span aria-hidden="true">&raquo;</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'

即可正常使用模态框.


http://www.kler.cn/a/6642.html

相关文章:

  • SQL语句练习
  • 【设计模式】空接口
  • springboot453工资信息管理系统(论文+源码)_kaic
  • 深度学习推理速度优化指南
  • 【长城杯】Web题 hello_web 解题思路
  • 谷歌浏览器的界面调整与设置方法
  • list模拟实现
  • 00后面试华为软件测试工程师,竭尽全力拿到15K。。。。。
  • 解析安装程序使用指南
  • 华为OD机试-最优资源分配-2022Q4 A卷-Py/Java/JS
  • 美团暑期实习
  • 【python设计模式】10、组合模式
  • 从大厂到创业公司,管理上需要怎样转变?
  • ChatGPT背后的技术和多模态异构数据处理的未来展望——我与一位资深工程师的走心探讨
  • 获取元素通常使用的两种方式
  • 【华为机试真题详解JAVA实现】—坐标移动
  • 携手共进 智享未来丨美格智能2023年代理商合作伙伴大会成功举办
  • MAC干净卸载IDEA
  • 阿里9年测试经验告诉你:作为一名年薪40w自动化测试需要具备那些能力
  • PLC - 笔记
  • 嵌入式--C++程序入门
  • 2022国赛22:免密码ssh登录到其他Linux主机
  • 机械硬盘的工作原理
  • Idea 插件、快捷键
  • O2O、C2C、B2B、B2C是什么意思
  • IDE装上ChatGPT,一天开发一个系统