一、第三方库
爬虫:bs4、requests库、lxml
生成二维码:qrcode
二、django开发框架
1.urls.py:函数(假如A)和路由的对应关系
2.templates:书写html文件
3.views:将请求的业务逻辑写在函数中(对应urls.py的函数,假如A)
三、生成二维码
做了两种生成二维码的方式,一个通过调用后端接口获取二维码图片,显示在前端的情况,另一种是通过前端代码直接产生二维码图片,后者更优:
第一种方式:
1.利用qrcode生成二维码图片,并将产生的图片保存到静态文件中,然后通过ajax获取图片路径,赋值给img标签的src属性(在对应的url中添加随机数,以更新二维码的url)
def create_qrcode(waybillno):
#创建qrcode对象,设置相关参数
# (version:用于控制二维码尺寸;error_correction:用于控制二维码的错误纠正程度;box_size:用于控制二维码中每个格子的像素值,默认值为10;border用于控制边框包含的格子数,默认值为4)
# waybillno = waybill_no()
print('$$$$$$$$$' + str(waybillno))
qr = qrcode.QRCode(
version=None,
error_correction=qrcode.constants.ERROR_CORRECT_L,
box_size=10,
border=4,
)
#添加二维码数据
qr.add_data("具体的url" + str(waybillno))
#生成二维码图片
qr.make(fit=True) #自动适应生成的二维码大小
# 设置二维码图片填充色和背景色
img = qr.make_image(fill_color="black", back_color="white")
#获得图片二维码
qr_img = img.get_image()
#保存二维码图片
num = random.randint(1,1000)
path = './static/img/qrcode' + str(num) + '.png'
# qr_img.save('./static/img/qrcode.png')
qr_img.save(path)
# code_url = './static/img/qrcode.png'
code_url = path
print(code_url)
return code_url
2.书写业务函数qr_code:1)如果数据不传给html用,要传给js用,必须使用HttpResponse返回字符串;2)用 json.dumps()
处理,用于将dict类型的数据转成str
def qr_code(request):
print(request.method)
if request.method == 'GET':
return render(request, 'waybillno.html')
else:
waybillno = request.POST.get('q')
print('=======' + str(waybillno))
if waybillno:
code_url = create_qrcode(waybillno)
context = {
'code_url': code_url
}
print('******' + str(code_url))
# return render(request, 'waybillno.html',context)
return HttpResponse(json.dumps(context))
else:
return HttpResponse('获取运单号失败')
3.jquery实现点击事件:请求后端的事件,必须要使用ajax;2)事件成功时,必须使用JSON.parse()将字符串转换为json对象;3)将生成的二维码链接复制给img的src属性即可
$(function(){
$("#submit").click(function(){
var waybillno = $('.waybillno').val()
console.log(waybillno)
$.ajax({
type: "post",
data: {q: waybillno},
url: "qrcode", //生成二维码
cache: false,
success: function (data){
data = JSON.parse(data)
console.log(data['code_url'])
$("#code-img").attr('src', data['code_url'])
$("#code-img").show()
},
error:function(){
alert("请重试!")
}
})
})
return false
})
</script>
第二种方式:通过爬虫爬取二维码的src属性,并将其赋值给html的img标签的src属性
1.通过调用草料二维码的接口,拼接成可以生成项目所用的二维码url,并通过requests库获取相应的html
注意:获取img标签的src属性时,直接写img['src']是获取不到值的,提示<class 'bs4.element.ResultSet'>这是字典外套了一个列表的形式,不能直接取值,使用for循环,此时得到的img标签属性为<class 'bs4.element.Tag'>标签可以直接获取属性值img['src']
def create_qrcode(waybillno):
url = 'https://cli.im/api/qrcode/code?text=具体的信息'+ str(waybillno)
response = requests.get(url)
html = response.text
soup = BeautifulSoup(html, 'lxml')
# print(soup)
# 获取img的src属性
for img in soup.find_all('img'):
print(type(img))
data = img['src']
print(data)
return data
2.业务函数,并将得到的二维码链接传给html中Img的src属性,所以直接用render传值就行了
第三种方式:直接将二进制图片流通过url赋值给src属性。此种方式不能通过ajax来实现,ajax不能处理图片流。
<script> $(function () { $('#get_code').click(function () { var name = $('#select').val() if(name == 'default'){ $('#wxapp_img').attr('src', "/wxapp_code?select=" + name) } $('#wxapp_img').attr('src', "/wxapp_code?select=" + name) }) }) </script>
表述上可能存在异议,望指正!