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

1、前端部分

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

  methods: {
    login(){
      console.log('点了我登录')
      this.$dbApi.Login(this.account,this.password).then((response)=>{
        console.log(response)
        console.log('发送成功')
        if (response.data===1){
          confirm("登录成功")
        }
        else confirm("登录失败")
      }).catch((err)=>{
            console.log('发送失败')
            confirm("发送失败")
      })
      console.log('结束')
    }
  }

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

import axios from 'axios'

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

// 用户登录
export const Login = (account, password) => {
    let formData = new FormData()
    formData.append("account",account)
    formData.append('password',password)
    return axios.post(`${Host}` + 'polls/Login/', formData)
}

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

2、后端部分

1、后端要接受前端发来的信息，首先要在创建好的项目中创建一个App，命令为：

django-admin startapp polls

2、其次在创建好的Django项目下的setting.py中：①注册上述创建好的App：polls、②开放接受网络请求、③跨域问题、④数据库连接。代码如下：

# 开放接收所有网络请求
ALLOWED_HOSTS = ["*"]


# Application definition

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

    # 注册app：polls
    'polls',
]

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开头的都是配置跨域
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


# 与postgresql数据库连接
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'practice2',
        'USER': 'postgres',
        'PASSWORD': '******',
        'HOST': '127.0.0.1',
        'POST': '5432',
    }
}

3、在postgresql数据库中先创建一个表，随后在Django项目中的polls文件夹里的models.py导入数据库中的表，使用命令：

python manage.py inspectdb > polls/models.py

注意：使用上述命令之后，编码方式会自动变成UTF-16，要自己手动在pycharm下方修改成UTF-8，如若不修改就会报错。 

4、在polls下创建两个python文件，分别命名为：urls.py\serializer.py

5、在项目目录下的mytest文件夹下的urls.py映射到polls文件夹下的urls.py，实现代码如下：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('polls/', include('polls.urls')),
]

6、在polls文件夹下的serializer.py中写入如下命令：

from rest_framework import serializers
from polls.models import User

class UserSerializer(serializers.ModelSerializer):
    
    class Meta:
        model = User
        fields = "__all__"

7、在polls文件夹下的urls.py中写入如下命令：

from django.conf.urls import url
from polls import views
from rest_framework import routers

router = routers.DefaultRouter()
router.register(r'user', views.UserViewSet)

urlpatterns = [
    url('Login', views.UserViewSet.Login),
]

8、在polls文件夹下的views.py中输入如下命令：

from django.http import HttpResponse
from resr_framework import views
from polls.models import User
from polls.serializer import UserSerializer
from django.views.decorators.csrf import csrf_exempt

class UserViewSet(views.ModelViewSet):
    @csrf_exempt
    def Login(request):
        username = request.POST.get('account')
        password = requesr.POST.get('password')    
        q = User.objects.filter(username=username, password=password)
        if len(q) > 0:
            return HttpResponse(1)
        else:
            return HttpResponse(0)

 9、最终完成前后端的连接。