register The front-end uses axios in vue to pass values and sends the obtained account and password to the back-end in the form of a form. 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" }) // route jump }).catch((res) => { console.log("error submit!!"); return false; }) } To use $axios for cross-domain authentication, you must first set up a proxy and then add X-CSRFToken to the request header. vue.config.js acting proxy: { "/api":{ target:"http://127.0.0.1:8000/", changeOrigin: true // Whether to use proxy} }, //Set proxy, 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) { //Add X-CSRFToken header information uniformly before post request 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); } ); Log insubmitForm(formName) { this.$refs[formName].validate(valid => { //vue front-end validation rules 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 background view function from django.shortcuts import render from django.views import View from django.http import HttpResponse, JsonResponse from django.contrib.auth.models import User # Django's encapsulated authentication function 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) # Verify password obj = auth.authenticate(request,username=user,password=pwd) if obj: return JsonResponse({'code':'ok','message':'Account and password verification successful'}) except: return JsonResponse({'code':'no','message':'Verification failed'}) 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':'Registration failed'}) return JsonResponse({'code':'ok','message':'Registration successful'}) This is the end of this article about the sample code for implementing registration and login with Django + Vue. For more relevant Django + Vue registration and login content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Linux system prohibits remote login command of root account
>>: Detailed explanation of the use of find_in_set() function in MySQL
Preface This article mainly introduces a problem ...
Subquery Classification Classification by returne...
When checking the slow query, I found that the ti...
1. After entering the container cat /etc/hosts It...
<br />Original: http://uicom.net/blog/?p=762...
Table of contents Preface Fix infinite loop in fo...
login.html part: <!DOCTYPE html> <html l...
There are many XHTML tags: div, ul, li, dl, dt, d...
I encountered a problem when modifying the defaul...
In Linux operations, we often replace and count s...
introduction: There are a lot of information and ...
Table of contents Environment Preparation start 1...
Table of contents 1. Core 1. Get the Dom node 2. ...
Table of contents 1. Create a table 1.1 Create te...
This tutorial shares the installation tutorial of...