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
Recently, I need to query all the fields in a rel...
Table of contents Cycle comparison usage Summariz...
This article has compiled some so-called specific...
Share a real-time clock effect implemented with n...
Normal explanation % means any client can connect...
This article shares the installation tutorial of ...
1. Changes in MySQL's default storage engine ...
Under Ubuntu 18.04 1. sudo apt install python ins...
Logpoint-based replication 1. Create a dedicated ...
MySQL DDL statements What is DDL, DML. DDL is dat...
This article example shares the specific code of ...
A while ago, I wrote a blog post titled "Can...
Virtual machines are very convenient testing soft...
Due to the default bridge network, the IP address...
<body> <div id="root"> <...