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/