Vue前端与Django后端实现前后端分离连接

1、前端部分

前端要触发一个事件，使得前端将信息发送给后端。例如一个登录事件，用户输入账号密码，点击登录按钮，即可将前端输入的信息发送给后端。该按钮绑定了一个事件，该事件放在methods配置项里边。例如登录事件函数名为login，完整的事件函数代码为：

  methods: {
    login(){
      console.log('点了我登录')
      this.$dbApi.Login().then((response)=>{
        console.log(response)
      }).catch((err)=>{})
      console.log('结束')
    }
  }

其中dbApi为自己编写的一个js文件，dbApi中有引入的axios、后端地址以及一个箭头函数，该箭头函数有一个返回值为axios.post(`${后端地址}`+'login/')，将箭头函数赋给Login，以便好调用，并且要暴露箭头函数以供其他地方使用。其完整代码为：

import axios from 'axios'

let Host="http://127.0.0.1:8090/"   //后端地址

// 用户登录
export const Login = () => {
    return axios.post(`${Host}` + 'login/')
}

如果前端信息成功发送给后端，且后端给前端一个返回值放在response里边，即走了.then((response)=>{})这一步；如果前端信息发送失败了，那么就会走.catch(()=>{})这一步。

2、后端部分

后端要接受前端发来的信息，首先要打开接受的权限，即在创建好的Django项目下的setting.py中将

ALLOWED_HOSTS = []

修改为：

ALLOWED_HOSTS = ["*"]

其次在项目下新建一个python文件：login.py

在login.py中写入如下代码，该代码表示后端接受到前端的信息之后，给前端返回一个c值，该c值：

from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def Login(request):
    a = 1
    b = 2
    c = a + b
    return HttpResponse(c)

然后在项目目录下找到urls.py，将login.py引入到里边，代码如下：

from django.contrib import admin
from django.urls import path
from django.urls import include, path
from mytest.login import Login

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', Login)
]

最后将项目文件下的settings.py做一些配置，如解决跨域问题等。代码如下：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOW_METHODS = (
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'OPTIONS'
)

CORS_ORIGIN_ALLOW_ALL=True

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'userid',
    'token',
    'projectid'
)
CORS_ALLOW_CREDENTIALS = True

最终完成前后前框架的分离连接。