您现在的位置是: 网站首页 >Django >Vue+Django REST framework前后端分离生鲜电商 Django

【Vue+DRF生鲜电商】16.Vue中注册、退出功能交互

admin2019年5月4日 22:30 Django | Vue 611人已围观

Vue+Django REST framework前后端分离生鲜电商简介 Vue+Django REST framework 打造前后端分离的生鲜电商项目(慕课网视频)。 Github地址:https://github.com/xyliurui/DjangoOnlineFreshSupermarket ; Django版本:2.2、djangorestframework:3.9.2。 前端Vue模板可以直接联系我拿。

### Vue中注册、退出功能交互 #### Vue中获取验证码逻辑 在 src/views/register/register.vue 中,就是前端页面的注册功能 ```html <input class="verify-code-btn sendcode" type="button" id="jsSendCode" @click="seedMessage" :value="getMessageText"> ``` 发送验证码逻辑 ```JavaScript seedMessage() { var that = this; //开启倒计时 var countdown = 60; settime(); function settime() { if (countdown === 0) { that.getMessageText = "免费获取验证码"; countdown = 60; return; } else { that.getMessageText = "重新发送(" + countdown + ")"; countdown--; } setTimeout(function () { settime() }, 1000) } getMessage({ mobile: that.mobile }).then((response) => { console.log(); }) .catch(function (error) { that.error.mobile = error.mobile ? error.mobile[0] : ''; }); } ``` #### Vue中register注册逻辑 在 src/views/register/register.vue 中,就是前端页面的注册功能 里面有一个`methods`写了注册的相关逻辑 html按钮点击 ```html <input class="btn btn-green" id="jsMobileRegBtn" @click="isRegister" type="button" value="注册并登录"> ``` 进入`isRegister`函数 ```JavaScript isRegister() { var that = this; register({ password: that.password, username: that.mobile, code: that.code, }).then((response) => { cookie.setCookie('name', response.data.username, 7); cookie.setCookie('token', response.data.access, 7); //存储在store // 更新store数据 that.$store.dispatch('setInfo'); //跳转到首页页面 this.$router.push({name: 'index'}) }) .catch(function (error) { that.error.mobile = error.username ? error.username[0] : ''; that.error.password = error.password ? error.password[0] : ''; that.error.username = error.mobile ? error.mobile[0] : ''; that.error.code = error.code ? error.code[0] : ''; }); }, ``` 传递的参数有`password`、`username`、`code`。 注册有两种模式:一是注册完成,自己跳转到登录页面登录;二是注册完成后就直接登录了。 第一种:假如要注册完成,需要自己手动登录,可以注释掉上方的保存cookie的逻辑。这种登录很简单。 ```JavaScript //cookie.setCookie('name', response.data.username, 7); //cookie.setCookie('token', response.data.access, 7); //存储在store // 更新store数据 //that.$store.dispatch('setInfo'); ``` 这样就直接跳回首页,或者也可以跳回登录页面。 第二种:如果注册完成就直接登录,就需要后端返回一个`token`。 配置注册的url,按住ctrl,点击上面的`register`就可以跳转到 src/api/api.js ,修改为后端注册的url ```JavaScript //注册 export const register = parmas => { return axios.post(`${local_host}/users/`, parmas) }; ``` #### 注册完成后台返回token 现使用第二种方法。注册完成后登录,并跳转到首页。但是后端并没有写返回`token`的接口。就需要在注册视图中`UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet)`重载`mixins.CreateModelMixin`的`create(self, request, *args, **kwargs)`函数。 ![BLOG_20190530_143945_83](/media/blog/images/2019/05/BLOG_20190530_143945_83.png "博客图集BLOG_20190530_143945_83.png") 直接将`create()`函数拷贝到注册视图中,其他逻辑基本不变 ```python class UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet): """ 创建用户 """ serializer_class = UserSerializer queryset = User.objects.all() def create(self, request, *args, **kwargs): serializer = self.get_serializer(data=request.data) serializer.is_valid(raise_exception=True) self.perform_create(serializer) # 添加自己的逻辑,通过user,生成token并返回 headers = self.get_success_headers(serializer.data) return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers) ``` 在生成token之前,`self.perform_create(serializer)`这个函数,他只是调用了`serializer.save()`(如上代码图),因为要生成用户的token之前,必须要拿到user,所以这个函数也需要被重载。原函数中只是调用`.save()`,并没有返回。实际上`serializer.save()`中的`serializer`就是`UserSerializer(serializers.ModelSerializer)`中model的对象。重载它,把它返回,才能得到user对象。 ```python class UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet): """ 创建用户 """ serializer_class = UserSerializer queryset = User.objects.all() def create(self, request, *args, **kwargs): serializer = self.get_serializer(data=request.data) serializer.is_valid(raise_exception=True) user = self.perform_create(serializer) # 添加自己的逻辑,生成token并返回 headers = self.get_success_headers(serializer.data) return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers) def perform_create(self, serializer): return serializer.save() ``` 如何使用`rest_framework_simplejwt`库创建token,访问 https://github.com/davesque/django-rest-framework-simplejwt#creating-tokens-manually 可以看到使用方法。手动为用户创建令牌。 原示例如下: ```python from rest_framework_simplejwt.tokens import RefreshToken def get_tokens_for_user(user): refresh = RefreshToken.for_user(user) return { 'refresh': str(refresh), 'access': str(refresh.access_token), } ``` 上面的函数`get_tokens_for_user`将返回给定用户的新`refresh`和`access tokens`的序列化表示。通常,`rest_framework_simplejwt.token`的任何子类的令牌。可以用这种方式创建令牌。 参考上面的方法,创建用户的token ```python from rest_framework_simplejwt.tokens import RefreshToken class UserViewSet(mixins.CreateModelMixin, viewsets.GenericViewSet): """ 创建用户 """ serializer_class = UserSerializer queryset = User.objects.all() def create(self, request, *args, **kwargs): serializer = self.get_serializer(data=request.data) serializer.is_valid(raise_exception=True) user = self.perform_create(serializer) # 添加自己的逻辑,生成token并返回 refresh = RefreshToken.for_user(user) tokens_for_user = { 'refresh': str(refresh), 'access': str(refresh.access_token), # 数据定制化 'username': user.username, # 由于前端也需要传入username,需要将其加上。cookie.setCookie('name', response.data.username, 7); } headers = self.get_success_headers(serializer.data) # return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers) # 在返回的时候就直接返回tokens_for_user return Response(tokens_for_user, status=status.HTTP_201_CREATED, headers=headers) def perform_create(self, serializer): return serializer.save() ``` #### 测试注册 ![BLOG_20190530_143924_81](/media/blog/images/2019/05/BLOG_20190530_143924_81.png "博客图集BLOG_20190530_143924_81.png") ![BLOG_20190530_143918_58](/media/blog/images/2019/05/BLOG_20190530_143918_58.png "博客图集BLOG_20190530_143918_58.png") ![BLOG_20190530_143911_26](/media/blog/images/2019/05/BLOG_20190530_143911_26.png "博客图集BLOG_20190530_143911_26.png") ![BLOG_20190530_143906_95](/media/blog/images/2019/05/BLOG_20190530_143906_95.png "博客图集BLOG_20190530_143906_95.png") ![BLOG_20190530_143901_63](/media/blog/images/2019/05/BLOG_20190530_143901_63.png "博客图集BLOG_20190530_143901_63.png") 当注册完成后,就成功跳转到首页,并显示当前登录用户 ![BLOG_20190530_143855_19](/media/blog/images/2019/05/BLOG_20190530_143855_19.png "博客图集BLOG_20190530_143855_19.png") #### Vue中logout功能逻辑 JWT的token并不是保存在服务器端的,这些数据保存在客户端,直接将cookie清除就可以了 在 src/views/head/shophead.vue 中 ```html <a @click="loginOut">退出</a> ``` 点击退出 ```JavaScript loginOut() { cookie.delCookie('token'); cookie.delCookie('name'); //重新触发store //更新store数据 this.$store.dispatch('setInfo'); //跳转到登录 this.$router.push({name: 'login'}) }, ``` 删除对应的cookie,然后跳转到登录页面。

很赞哦! (0)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行882天
  • 系统信息:Linux
  • 后台程序:Python: 3.6.6
  • 网站框架:Django: 2.2.12
  • 文章统计:251 篇
  • 文章评论:46 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 公众号:微信扫描二维码,关注我们
  • QQ群:QQ加群,下载网站的学习源码
返回
顶部
标题 换行 登录
网站