django前后端不分离——图片验证码，基于Bootstrap3的自定义分页器，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'

即可正常使用模态框.