Django前後端分離

一、安裝node.js

windows安裝并配置node.js、npm

前端使用ajax向背景發送請求

$(function () {
            $("#btn").click(function () {
                var data = {
                        'username': $('#username').val(),
                        'password': $('#password').val(),
                        'address': $('#address').val()
                    };
                $.ajax({
                    url: 'http://127.0.0.1:8000/user/userinfos/',
                    type: 'POST',
                    cache: false,
                    data: data,
                    success: function (res) {
                        window.location.href = 'http://127.0.0.1:8000/success/'
                    },
                    error: function () {
                        alert("error")
                    }
                })
            });

        })
           

背景處理送出資料的視圖函數

def post(self, request):
        print("SSSSSSSSSSSSSSSSSSSSSSSSSS")
        print(request.body)
        data_byte = request.body
        # byte轉str
        data_str = data_byte.decode()
        print(data_str)
        # str轉dict
        data_dict = json.loads(data_str)
        print(data_dict)
        username = data_dict.get('username')
        password = data_dict.get('password')
        address = data_dict.get('address')
        print(username, password, address)
        return HttpResponse("添加成功")
           

送出成功後跳轉頁面

def success(request):
    return HttpResponse("<h1>success</h1>")
           

使用npm安裝live-server伺服器 npm install -g live-server

Django配置

一、安裝擴充

pip install django-cors-headers

二、installapp配置

INSTALLED_APPS = [

‘django.contrib.admin’,

‘django.contrib.auth’,

‘django.contrib.contenttypes’,

‘django.contrib.sessions’,

‘django.contrib.messages’,

‘django.contrib.staticfiles’,

‘rest_framework’,

‘user.apps.UserConfig’,

’corsheaders’

]

三、添加中間件

MIDDLEWARE = [

注意：一定要添加到第一行

’corsheaders.middleware.CorsMiddleware’,

‘django.middleware.security.SecurityMiddleware’,

‘django.contrib.sessions.middleware.SessionMiddleware’,

‘django.middleware.common.CommonMiddleware’,

‘django.middleware.csrf.CsrfViewMiddleware’,

‘django.contrib.auth.middleware.AuthenticationMiddleware’,

‘django.contrib.messages.middleware.MessageMiddleware’,

‘django.middleware.clickjacking.XFrameOptionsMiddleware’,

]

四、添加白名單

CORS_ORIGIN_WHITELIST = [

‘http://127.0.0.1:8080’

]

#這一句是允許攜帶cookie

CORS_ALLOW_CREDENTIALS = True

測試

啟動背景伺服器

啟動前端伺服器，一定要先cd到前端頁面的檔案夾路徑下

可以發現前端端口是8080，而後端端口是8000

前端界面，選擇ajax測試頁面點選進去

前端位址http://127.0.0.1:8080/ajax.html

點選送出，後端位址http://127.0.0.1:8000/success/