django前後端結合_Django與Vue之前後端關聯

前後端關聯

1.建立一個Login.vue頁面

1.1寫頁面components/Login.vue

在scr/components 下建立 Login.vue 頁面

測試axios-{{title}}

import {login} form '@/http/apis';

export default {

data(){

return {

title:'測試axios'

},

mounted(){

},

method(){

},

}

1.2src/router/index.js中配置vue路由

import Login from '@/components/Login'

export default new Router({

routes:[

{path:'/login',name:'Login',component:Login},

]

})

2.在Login.vue頁面中使用axios發送請求

2.1scr/http/apis.js中配置後端接口調用請求

// 接口資訊，生成請求方法

// 引入 get方法，post方法

import {get,post} from './index'

// 使用者登入

export const login = (params,headers) => post('/user/login/',params,headers)

2.2在Login.vue頁面中導入子產品并測試與django聯通

測試axios-{{title}}

登入

import {login} from '@/http/apis';

export default {

//vue頁面中雙向資料綁定

data(){

return {

title:"測試axios"

}

},

//vue生命周期中挂在的函數

mounted(){

},

methods: {

requtLogin(){

//擷取小節内容

let data = {name:'zhangsan',pwd:'123456'}

login(data).then((resp) => {

//resp: django後端傳回的資料

console.log(resp);

}).catch((err) => {

console.log(err);

});

},

}

}

2.跨域

1.跨域原理

1.1首先浏覽器安全政策限制js ajax跨域通路伺服器

1.2如果伺服器傳回的頭部資訊中有目前域：

//允許 http://localhost:8080 這個網站打開的頁面中的js通路我

Access—Contorl-Allow-Origin: http://localhost:8080

//允許攜帶cookie通路我

Access-Control-Allow-Credentials: true

2.django cors設定：

1.安裝包

pip install django-cors-headers

2.注冊應用

INSTALLED_APPS =[

# 添加 django-cors-headers 使用其可以進行 cors跨域

'corsheaders'

]

3. 添加中間件

MIDDLEWARE = [

# 放在中間件第一個

'corsheaders.middleware.CrosMiddleware',

]

4.設定

# CORS 跨域請求白名單設定

CORS_ORIGIN_WHITELIST = (

'HTTP://127.0.0.1:8080',

'HTTP://localhost:8080'

)

CORS_ALLOW_CREDENTIALS = True # 允許攜帶cookie

3.登入接口測試

3.1user/users.py中配置路由

urlpattrens = [

path('login/',views.login)

]

3.2user/views.py中寫一個login視圖函數

from django.http import JsonResponse

import json

def login(request):

body_dict = json.loads(request.body)

print(body_dict,"----------------")

name = body_dict.get("name")

pwd = body_dict.get("pwd")

if not all([name,pwd]):

resp = {

"code":1001,

"msg":"資訊不全"

}

return JsonResponse(resp)

if name == "djys" and pwd == "123123":

resp = {

"code":0,

"msg":"登陸成功",

"data":{

"id":1,

"name":"東京映社社長",

"age":20

}

}

return JsonResponse(resp)

return JsonResponse({

"code":1002,

"msg":"驗證失敗"

})

标簽：vue,name,resp,Django,Vue,關聯,import,login,Login

來源： https://www.cnblogs.com/xiangnuan/p/13747877.html