django+vue实现注册登录的示例代码

 更新时间:2021年05月10日 14:16:10   作者:champion-yang  
这篇文章主要介绍了django+vue实现注册登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

注册

前台利用vue中的axios进行传值,将获取到的账号密码以form表单的形式发送给后台。
form表单的作用就是采集数据,也就是在前台页面中获取用户输入的值。numberValidateForm:前台定义的表单
$axios使用时需要在main.js中全局注册,.then代表成功后进行的操作,.catch代表失败后进行的操作

submitForm(formName) {
      let data = new FormData()
      data.append('username',this.numberValidateForm.name)
      data.append('password',this.numberValidateForm.pass)
      this.$axios.post('/api/register/',data).then((res) => {
        this.$router.push({ name: "login" })  // 路由跳转
      }).catch((res) => {
         console.log("error submit!!");
         return false;
      })
  }

使用$axios进行跨域验证,首先得设置代理,然后在请求头中加入X-CSRFToken

vue.config.js

代理

proxy: {
        "/api":{
          target:"http://127.0.0.1:8000/",
          changeOrigin: true  // 是否代理
        }
    },//设置代理,

main.js

import Axios from 'axios'
Vue.prototype.$axios = Axios
let getCookie = function (cookie) {
    let reg = /csrftoken=([\w]+)[;]?/g
    return reg.exec(cookie)[1]
}
Axios.interceptors.request.use(
  function(config) {
    // 在post请求前统一添加X-CSRFToken的header信息
    let cookie = document.cookie;
    if(cookie && config.method == 'post'){
      config.headers['X-CSRFToken'] = getCookie(cookie);
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

登录

submitForm(formName) {
      this.$refs[formName].validate(valid => {  //vue前台的验证规则
        if (valid) {
          let data = new FormData()
          data.append('username',this.numberValidateForm.name)
          data.append('password',this.numberValidateForm.pass)
          this.$axios.post('/api/login/',data).then((res) => {
            if(res.data.code == "ok"){
              console.log(12345678)
              this.$router.push({name:"firstpage"})
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

view.py

django后台视图函数

from django.shortcuts import render
from django.views import View
from django.http import HttpResponse,JsonResponse
from django.contrib.auth.models import User  # django封装好的验证功能
from django.contrib import auth
class Login(View):
    def post(self,request):
        try:
            user = request.POST.get('username',None)
            pwd = request.POST.get('password',None)
            # 验证密码
            obj = auth.authenticate(request,username=user,password=pwd)
            if obj:
                return JsonResponse({'code':'ok','message':'账号密码验证成功'})
        except:
            return JsonResponse({'code':'no','message':'验证失败'})

class Register(View):
    def post(self, request):
        try:
            username = request.POST.get('username',None)
            password = request.POST.get('password',None)
            user = User.objects.create_user(username=username,password=password)
            user.save()
        except:
            return JsonResponse({'code':'no','message':'注册失败'})
        return JsonResponse({'code':'ok','message':'注册成功'})

到此这篇关于django+vue实现注册登录的示例代码的文章就介绍到这了,更多相关django+vue注册登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 使用Props属性实现父子组件的动态传值详解

    Vue 使用Props属性实现父子组件的动态传值详解

    今天小编就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue组件通信之Bus的具体使用

    Vue组件通信之Bus的具体使用

    本篇文章主要介绍了Vue组件通信之Bus的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue从后台渲染文章列表以及根据id跳转文章详情详解

    vue从后台渲染文章列表以及根据id跳转文章详情详解

    这篇文章主要给大家介绍了关于vue从后台渲染文章列表以及根据id跳转文章详情的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue项目配置使用flow类型检查的步骤

    vue项目配置使用flow类型检查的步骤

    这篇文章主要介绍了vue项目配置使用flow类型检查的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue实现多页签组件

    Vue实现多页签组件

    这篇文章主要介绍了Vue实现多页签组件的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 基于vue2.x的电商图片放大镜插件的使用

    基于vue2.x的电商图片放大镜插件的使用

    本篇文章主要介绍了基于vue2.x的电商图片放大镜插件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue添加axios,并且指定baseurl的方法

    vue添加axios,并且指定baseurl的方法

    今天小编就为大家分享一篇vue添加axios,并且指定baseurl的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中项目如何提交form格式数据的表单

    vue中项目如何提交form格式数据的表单

    这篇文章主要介绍了vue中项目如何提交form格式数据的表单,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)

    uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)

    这篇文章主要介绍了uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue大屏数据展示示例

    Vue大屏数据展示示例

    公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息,本文主要介绍了Vue大屏数据展示示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论