生成验证码

  • 没使用pycharm时,只通过命令行创建Django项目

首先需要安装一下pillow包,命令行输入:

1
pip install -i https://pypi.doubanio.com/simple/ --trusted-host pypi.doubanio.com pillow

检查一下pip的版本,idea自动配对的版本有时过低.如果过低就更新它.

1
2
pip list
python -m pip install --upgrade pip
  • 在pycharm里安装Pillow

选择setting,点击pproject interpreter,点击’+'好,输入Pillow,再点击install.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# 验证码
def verifycode(request):
  #引入绘图模块
  from PIL import Image, ImageDraw, ImageFont
  #引入随机函数模块
  import random
  #定义变量，用于画面的背景色、宽、高
  bgcolor = (random.randrange(20, 100), random.randrange(
      20, 100), 255)
  width = 100
  height = 25
  #创建画面对象
  im = Image.new('RGB', (width, height), bgcolor)
  #创建画笔对象
  draw = ImageDraw.Draw(im)
  #调用画笔的point()函数绘制噪点
  for i in range(0, 100):
      xy = (random.randrange(0, width), random.randrange(0, height))
      fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
      draw.point(xy, fill=fill)
  #定义验证码的备选值
  str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
  # str1 = '123456789'
  #随机选取4个值作为验证码
  rand_str = ''
  for i in range(0, 4):
      rand_str += str1[random.randrange(0, len(str1))]
  #构造字体对象,字体'...ttf'要是系统中存在的字体
  font = ImageFont.truetype('simhei.ttf', 23)
  #构造字体颜色
  fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
  #绘制4个字
  draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
  draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
  draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
  draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
  #释放画笔
  del draw
  #存入session，用于做进一步验证
  request.session['verifycode'] = rand_str
  #内存文件操作
  import io
  buf = io.BytesIO()
  #将图片保存在内存中，文件类型为png
  im.save(buf, 'png')
  #将内存中的图片数据返回给客户端，MIME类型为图片png
  return HttpResponse(buf.getvalue(), 'image/png')

注意:要在应用的子路由里加入相应的路径.

显示验证码

在模板中使用img标签，src指向验证码视图

1
<img id='verifycode' src="/verifycode/" alt="CheckCode"/>

验证验证码

把接收请求的信息，与session中的内容对比

1
2
3
4
5
6
7
8
from django.http import HttpResponse

def verifycodeValid(request):
  vc = request.POST['vc']
  if vc.upper() == request.session['verifycode']:
      return HttpResponse('ok')
  else:
      return HttpResponse('no')

ajax城市联动

根据sql表创建模板,导入sql文件到数据库.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 城市数据
class Citys(models.Model):
  '''
  # id    name level upid
      1   北京   1     0
      2   昌平区  2    1
      3   沙河镇   3   2
  '''
  name = models.CharField(max_length=255)
  level = models.IntegerField()
  upid = models.IntegerField()

  class Meta:
      db_table = 'citys'

创建视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 城市联动页面
def citys(request):
  # 从数据库中获取所有的一级城市信息
  data = Citys.objects.filter(upid=0)

  # 分配数据
  context = {'data':data}
  # 加载模板
  return render(request,'citys.html',context)

# 获取 城市信息
def get_city(request):
  # 获取请求的参数
  cid = request.GET.get('cid')
  # 根据请求的参数,查询对应的城市数据
  data = list(Citys.objects.filter(upid=cid).values())
  # select * from citys where upid=15;

  # 返回json数据 {} [{},{}]
  return JsonResponse(data,safe=False)

创建网页的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<select>
    <option>--请选择--</option>
    {% for v in data %}
    <option value="{{ v.id }}">{{ v.name }}</option>
    {% endfor %}
</select>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
   $(document).delegate('select',"change",function(){
        var cid = $(this).val()
        $(this).nextAll().remove()
        $.get('{% url 'get_city' %}',{'cid':cid},function(data){
            console.log(data);
            if(data.length == 0){return;}
            var sel = $('<select></select>')
            var ops = '<option>--请选择--</option>'
            for (var i = 0; i < data.length; i++) {
                ops+= '<option value="'+data[i].id+'">'+data[i].name+'</option>'
            }
            sel.html(ops)
            $('body').append(sel)
        },'json')
    })
</script>

注意: 应用的子路由要加入路径.