Django与Vue交互，实现注册的图片验证码没有加载的原因
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Django与Vue交互，实现注册的图片验证码没有加载的原因，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4022字，纯文字阅读大概需要6分钟。
内容图文
注册功能之图片验证码：
1.实现过程
传递uuid给后端，再发送图片验证码的请求给后端，后端存储uuid并生成图片验证码保存到redis，然后将图片验证码返回给前端。
当用户输入图片验证码的时候，前端会发送uuid和用户输入的图片验证码内容给后端，后端进行比较校验。
2.实现步骤
后端：实现接口，获取图片验证码，生成图片验证码，保存图片验证码到redis，返回图片验证码到前端
前端：uuid作为验证码图片的标识，并通过url传递到后端，实现uuid生成，实现获取验证码的src内容，绑定用户点击事件
3.BUG1
Vue的js函数实现完成后，前端页面没有显示出图片相关信息
产生原因：前端获取验证码图片的函数有问题；
解决方案：修改函数名，解决问题
4.BUG2
Vue的js函数实现完成后，前端页面有图片，但是不是目标图片
产生原因：前端获取验证码的请求路径不能成功访问，请求函数有问题；
解决方案：修改后端url正则表达式，成功匹配到uuid，可以正常访问
总结：图片的显示是前端在页面加载完成后，进入到Vue入口函数加载js，前端加载js的时候，会生成url中需要传递的图片id以及生成获取图片验证码的url，
不论是src属性还是用户点击都可以发送获取图片验证码的请求，在前后端服务都开启的情况下，如果出现异常，通过url访问进行测试。
5.后端代码
url+视图：
1 urlpatterns = [
2 url(r‘^image_codes/(?P<image_code_id>[\w-]+)/$‘,views.ImageCodeView.as_view())
3]
4 5class ImageCodeView(APIView):
6""" 7 接收图片ｉｄ
8 校验图片id
9 生成图片验证码
10 保存验证码内容
11 返回验证码图片
12"""13def get(self,request,image_code_id):
14# 生成图片验证码 图片验证码返回的是文本和图片15 text, image = captcha.generate_captcha()
16 redis_conn = get_redis_connection(‘verify_codes‘)
17 redis_conn.setex("img_%s"%image_code_id,constants.IMAGE_CODE_REDIS_EXPIRES,text)
1819return HttpResponse(image,content_type=‘images/jpg‘)
6.前端代码
html + Vue
<
li
>
<
label
>图形验证码:</label><input type="text" v-model="image_code" @blur="check_image_code" name="pic_code" id="pic_code" class="msg_input"><img :src="image_code_url" @click="get_image_code" alt="图形验证码" class="pic_code"><span v-show="error_image_code" class="error_tip">请填写图片验证码</span></li>
Vue
1
var vm = new Vue({
2 el: ‘#app‘,
3 data: {
4 host:host,
5 error_name: false,
6 error_password: false,
7 error_check_password: false,
8 error_phone: false,
9 error_allow: false,
10 error_image_code: false,
11 error_sms_code: false,
12 13 username: ‘‘,
14 password: ‘‘,
15 password2: ‘‘,
16 mobile: ‘‘,
17 image_code: ‘‘,
18 sms_code: ‘‘,
19 allow: false,
20 21 image_code_id:‘‘,
22 image_code_url:‘‘,
23 },
24 mounted:function(){
25this.get_image_code()
26 },
27 methods: {
28// 生成uuid 29 generate_uuid: function(){
30var d = new Date().getTime();
31if(window.performance && typeof window.performance.now === "function"){
32 d += performance.now(); //use high-precision timer if available 33 }
34var uuid = ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function(c) {
35var r = (d + Math.random()*16)%16 | 0;
36 d = Math.floor(d/16);
37return (c ==‘x‘ ? r : (r&0x3|0x8)).toString(16);
38 });
39return uuid;
40 },
41 42 get_image_code: function(){
43 console.log(document.querySelector(".pic_code").getAttribute(‘src‘)),
44// 保存ｕｕｉｄ 45this.image_code_id = this.generate_uuid();
46// 生成图片获取路径 47this.image_code_url = this.host + ‘/image_codes/‘ + this.image_code_id + ‘/‘;
48 },
49 50 check_username: function (){
51var len = this.username.length;
52if(len<5||len>20) {
53this.error_name = true;
54 } else {
55this.error_name = false;
56 }
57 },
58 check_pwd: function (){
59var len = this.password.length;
60if(len<8||len>20){
61this.error_password = true;
62 } else {
63this.error_password = false;
64 }
65 },
66 check_cpwd: function (){
67if(this.password!=this.password2) {
68this.error_check_password = true;
69 } else {
70this.error_check_password = false;
71 }
72 },
73 check_phone: function (){
74var re = /^1[345789]\d{9}$/;
75if(re.test(this.mobile)) {
76this.error_phone = false;
77 } else {
78this.error_phone = true;
79 }
80 },
81 check_image_code: function (){
82if(!this.image_code) {
83this.error_image_code = true;
84 } else {
85this.error_image_code = false;
86 }
87 },
88 check_sms_code: function(){
89if(!this.sms_code){
90this.error_sms_code = true;
91 } else {
92this.error_sms_code = false;
93 }
94 },
95 check_allow: function(){
96if(!this.allow) {
97this.error_allow = true;
98 } else {
99this.error_allow = false;
100 }
101 },
102// 注册103 on_submit: function(){
104this.check_username();
105this.check_pwd();
106this.check_cpwd();
107this.check_phone();
108this.check_sms_code();
109this.check_allow();
110 }
111 }
112 });
原文：https://www.cnblogs.com/sq1995liu/p/12611720.html
内容总结
以上是互联网集市为您收集整理的Django与Vue交互，实现注册的图片验证码没有加载的原因全部内容，希望文章能够帮你解决Django与Vue交互，实现注册的图片验证码没有加载的原因所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。