首先 angular4 和django 1.11.1交互 有跨域問題 所以先關閉cors 和csrf驗證
一.解決跨域問題 cors
1)安裝corsheaders
|
1
|
pip install django-cors-headers
|
2）配置 settings.py
D:\Python27\Lib\site-packages\django\bin\app\app\settings.py
搜索 INSTALLED_APPS 添加 corsheaders
'corsheaders',
3)搜索 MIDDLEWARE 添加 （順序不能亂）
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
|
1
2
3
4
5
6
7
8
9
10
11
|
MIDDLEWARE = [
'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',
'corsheaders.middleware.CorsMiddleware',
]
|
4）同時添加 MIDDLEWARE_CLASSES
PS: #注釋掉的是csrf 驗證
|
1
2
3
4
5
6
7
8
9
10
11
|
MIDDLEWARE_CLASSES = [
'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.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
|
5）后續其它參數
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
允許跨域的域名列表 現在表示所有都可以
CORS_ORIGIN_WHITELIST = (
'*'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
二.關閉csrf 驗證
找到settings.py 搜索 django.middleware.csrf.CsrfViewMiddleware 前面加# PyCharm快捷鍵 ctrl + /
這樣就關閉了所有的csrf驗證
參考路徑： D:\Python27\Lib\site-packages\django\bin\app\app\settings.py
前端方面
組件內代碼 D:\wamp\angular4\xxx\src\app\register\register.component.ts
1）導入HttpClient 和HttpErrorResponse
|
1
|
import {HttpClient, HttpErrorResponse} from '@angular/common/http'
|
2)提供http
|
1
|
constructor(private http: HttpClient) { }
|
3）完成模板提交函數onSubmit(value){}
①value就是模板里表單的值 regForm.vaue
②然后進行json序列化 JSON.stringify(value)
|
1
|
const data =JSON.stringify(value);
|
③發送給后端 django 這里就有跨域的問題 需要關閉django cors 和csrf 驗證
const data =JSON.stringify(value); 定義的json數據
let url = 'http://127.0.0.1:8000/formgetdata'; 發送的后台接口地址
this.http.post(url,data,{
responseType:'json'
}).subscribe()
④接收后台傳遞的json
只有JSON序列化的才能看到 JSON.stringify(data)
取得json的值的話 就是data.username
也就是說先看到JSON.stringify(data) 有什么字段 才能用data.字段值獲取到
.subscribe(
data => {
console.log('請求成功！'+ data )
let datalist = JSON.stringify(data);
console.log(data.username)
console.log(data.password)
console.log(data.message)
}
)
使用this.http.post(url,data,option) 發送post請求
頂部導入
import {HttpClient, HttpErrorResponse} from '@angular/common/http'
constructor(private http: HttpClient) { }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
onsubmit(value){
console.dir(value);
console.dir(JSON.stringify(value));
const data =JSON.stringify(value);
this.http.post('http://127.0.0.1:8000/formgetdata',data,{
responseType:'text'
}).subscribe(
data =>{
console.log('請求成功！')
},
(err : HttpErrorResponse) => {
if(err.error instanceof Error){
// 前端報錯
console.log("前端報錯-錯誤信息：",err.error.message)
}
else {
//后端錯誤
console.log(`后端報錯-響應碼： ${err.status}, body was: ${err.error}`);
}
}
);
}
|
整體結構
組件內模板寫法 D:\wamp\angular4\xxx\src\app\register\register.component.html
1)輸入input 雙向綁定 [(ngModel)]="名字" 名字就是name屬性值
2）表單值 收集提交 form 綁定ngSubmit
① 先定義表單名稱 #regForm ="ngForm"
② 收集表單信息 regForm.value
③ 傳遞給組件 (ngSubmit)="onsubmit(regForm.value)" 組件內定義onsubmit函數
后端 django
准備工作 頂部導入
import json
from django.shortcuts import render
from django.http import HttpResponse
1.配置路由 urls.py
參考路徑：D:\Python27\Lib\site-packages\django\bin\app\app\urls.py
找到 urlpatterns 配置 url(r'^formgetdata',view.formgetdata)
|
1
2
3
4
5
|
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$',view.hello),
url(r'^formgetdata',view.formgetdata)
]
|
2.配置視圖 view.py
D:\Python27\Lib\site-packages\django\bin\app\app\view.py
這里需要實現的就是兩個功能
1)接收angular4發送來的表單數據
查看數據是否接收到： request.body
接收表單數據：
datalist = request.body.decode('utf-8')
data = json.loads(datalist)
username = data['username']
password = data['password']
參考資料
https://stackoverflow.com/questions/29780060/trying-to-parse-request-body-from-post-in-django
2) 返回json數據給前端
res ={"username":username ,"password":password ,"message":"后台成功接收表單信息！后台請求成功"}
return HttpResponse(json.dumps(res),content_type="application/json")
上面兩點完整代碼截圖
實例代碼參考
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
# -*- coding: utf-8 -*-
#from django.http import HttpResponse
import json
from django.shortcuts import render
from django.http import HttpResponse
import simplejson
def hello(request):
context = {}
context['hello'] = 'Hello world! {{ hello }} 傳值'
return render(request,'hello.html',context)
def formgetdata(request):
if request.method == 'POST':
print request.body
dataunicode = request.body.decode('utf-8')
data = json.loads(dataunicode)
username =data['username']
password =data['password']
print data
print username
res={'username':username,"password":password,"message":"后台成功接收表單信息！后台請求成功"}
return HttpResponse(json.dumps(res),content_type="application/json")
else:
return HttpResponse('請求失敗')
|
提示
request.body 數據都在這里可以找到
轉載自：https://www.cnblogs.com/xxx91hx/p/7966787.html