DjangoVue前后分离_后端跨域传递参数（搭建博客第二步）

get请求

安装django-cors-headers

根据django版本安装合适的cors-headers插件

$ pip install django-cors-headers==2.1.0

添加corsheaders应用

添加corsheaders

为了Vue可以跨域像Django发起get的请求，在配置的setting.py添加corsheaders

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

添加CorsMiddleware

添加中间件

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

指定ip访问、允许cookie

在setting.py配置

CORS_ORIGIN_WHITELIST = (
    'http://ip:端口',
',#凡是出现在白名单中的域名，都可以访问后端接口 添加协议
)
CORS_ORIGIN_ALLOW_ALL=True#允许所有的ip访问
CORS_ALLOW_CREDENTIALS = True#允许cookie

post请求

注释中间件csrf

注释掉这个组件之后，打印控制台会失效

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

cookie组件使用

安装cookies

vue使用

$ npm install vue-cookies --save

或者

$ vue add vue-cookies

在main.js引入

import cookies from 'vue-cookies'
Vue.use(cookies)
Vue.prototype.$cookies = cookies

其方法使用规则
可以在浏览器打印cookie出来查看

config、set、 get、remove、isKey、keys

this.$cookies.方法名(参数)

注意不同作用域this指向，错误指向导致undefined
也可以粗暴使用document.cookie

request简单测试

vue引入axios

在vue项目添加axios

$ npm install axios

或者（前提已经安装vue-cli）

$ vue add axios

登录测试

vue发起post请求

post匹配django的登录url，并且将用户名和密码传递过去

//axios提交数据 post
            axios.post('http://ip:端口/user/login/',{
              name:that.ruleForm.name,
              password:that.ruleForm.pass
            }).then(res=>{
              // alter('提交中');
              console.log(res.data)
              if(res.data.code==1){
                console.log('return home!')
                that.$router.push({path:'/home'})
              }
              else if(res.data.code==0){
                // alter("失败！")
                console.log("失败")
              }
              // that.$cookies.set('')
            }).catch(res=>{
              console.log(res)
            })
     

django返回json

view视图的登录函数返回json格式以data发送

def Login(request):#登录
    if request.method=='POST':
        data = json.loads(request.body.decode('utf-8'))
        name=data['name']
        password=data['password']
        try:
            user=Users.objects.get(username=name,password=password)
            #获取该用户的model obj
        except Exception as e:
            data={'code':0,'msg':str(e)}
            return JsonResponse(data)
        data={'code':1,'user':user.username}
        return JsonResponse(data)
    data={'code':0}
    return JsonResponse(data)

若在vue中得到django传过来的code参数为1执行
登录！

登录成功！

控制台

注册测试

vue发起post的提交请求

vue向django发起post请求并传递参数，注册成功就设置cookie

axios
            .post(that.baseurl + "user/register/",
            {
              // 传递的名字和密码
                name: that.ruleForm.name,
                password: that.ruleForm.pass,
            }
            )
            .then(function (res) {
              console.log("成功post", res);
              console.log(res.data.code)
              if(res.data.code===0)
              {
                console.log('重名')
                console.log(that.$cookies.get('user_session'))//取出cookies的user_session
                console.log(that.$cookies)//存在
                document.cookie= `user=${that.ruleForm.name}`
                that.register_error=true
              }
              else{
                that.register_success=true;
                console.log('时间节点');
              }
              
            })
            .catch(function (res) {
              //获取res中的name
              alert("后端的问题！");
              console.log("失败post", res);
            });

django后端的注册函数

try-catch注册然后返回json

def Register(request):
    if request.method=='POST':
        # 获取axios通过post传递过来的参数json格式
        data = json.loads(request.body.decode('utf-8'))
        name=data['name']
        password=data['password']
        try:
            add_user = Users.objects.create(username=name,password=password)#ok json格式不能直接传递adduser
            print(add_user)
            data = {'code': 1, 'name': name, 'password': password}
            return JsonResponse(data)
        except Exception as e:
            #错误已经缩小为 用户名已经被使用
            data={'code':0,'msg':str(e)}
            return JsonResponse(data)
    data={'code':0}
    print(data)
    return False

注册成功！

可以在django的admin后台看见

end

完成！