django+vue實(shí)現(xiàn)注冊(cè)登錄的示例代碼

更新時(shí)間：2021年05月10日 14:16:10 作者：champion-yang

這篇文章主要介紹了django+vue實(shí)現(xiàn)注冊(cè)登錄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

注冊(cè)

前臺(tái)利用vue中的axios進(jìn)行傳值，將獲取到的賬號(hào)密碼以form表單的形式發(fā)送給后臺(tái)。
form表單的作用就是采集數(shù)據(jù)，也就是在前臺(tái)頁面中獲取用戶輸入的值。numberValidateForm：前臺(tái)定義的表單
$axios使用時(shí)需要在main.js中全局注冊(cè)，.then代表成功后進(jìn)行的操作，.catch代表失敗后進(jìn)行的操作

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" })  // 路由跳轉(zhuǎn)
      }).catch((res) => {
         console.log("error submit!!");
         return false;
      })
  }

使用$axios進(jìn)行跨域驗(yàn)證，首先得設(shè)置代理，然后在請(qǐng)求頭中加入X-CSRFToken

vue.config.js

代理

proxy: {
        "/api":{
          target:"http://127.0.0.1:8000/",
          changeOrigin: true  // 是否代理
        }
    },//設(shè)置代理,

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請(qǐng)求前統(tǒng)一添加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前臺(tái)的驗(yàn)證規(guī)則
        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后臺(tái)視圖函數(shù)

from django.shortcuts import render
from django.views import View
from django.http import HttpResponse,JsonResponse
from django.contrib.auth.models import User  # django封裝好的驗(yàn)證功能
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)
            # 驗(yàn)證密碼
            obj = auth.authenticate(request,username=user,password=pwd)
            if obj:
                return JsonResponse({'code':'ok','message':'賬號(hào)密碼驗(yàn)證成功'})
        except:
            return JsonResponse({'code':'no','message':'驗(yàn)證失敗'})

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':'注冊(cè)失敗'})
        return JsonResponse({'code':'ok','message':'注冊(cè)成功'})

到此這篇關(guān)于django+vue實(shí)現(xiàn)注冊(cè)登錄的示例代碼的文章就介紹到這了,更多相關(guān)django+vue注冊(cè)登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: