angular 4 和django 1.11.1 前后端交互 總結

首先 angular4 和django 1.11.1交互 有跨域問題 所以先關閉cors 和csrf驗證

一.解決跨域問題 cors

github django-cors-headers

 

1)安裝corsheaders

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',

 

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 驗證

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

import {HttpClient, HttpErrorResponse} from '@angular/common/http'

2)提供http 

constructor(private  http: HttpClient) { }

3）完成模板提交函數onSubmit(value){}

①value就是模板里表單的值 regForm.vaue 

②然后進行json序列化 JSON.stringify(value)

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) { }

 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)

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")

 

 上面兩點完整代碼截圖

 

實例代碼參考

# -*- 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 數據都在這里可以找到

 

接上面的內容，把前端接受到的數據寫入到數據庫里

接收數據寫入數據庫

1.首先確定 urls.py 是否路由匹配上

D:\Python27\Lib\site-packages\django\bin\app\app\urls.py

 url(r'^formgetdata',view.formgetdata),
    url(r'^user', view.user),

　比如

　

2.定義view.py

D:\Python27\Lib\site-packages\django\bin\app\app\urls.py

這里為了方便調用models.py文件創建的數據庫表，引入models模塊在頭部

這樣 

import models

查詢表數據 就是這樣

data =models.Member.objects.values()
return HttpResponse(data)

這里的Member就是創建的數據庫表

3.創建models.py文件，創建數據庫表和定義字段

以下是models.py實例 創建表中的字段

 

python manage.py makemigrations

python manage.py migrate --database=mysql    #mysql為定義的數據庫

上面的數據庫定義 在settings.py 中 查找   DATABASES 然后想下面定義一組mysql數據庫

D:\Python27\Lib\site-packages\django\bin\app\app\settings.py

 

 

實例代碼參考 這里default設置成mysql了，在使用中為了避免麻煩

DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    # },

    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'HOST': '192.168.1.103',
        'POST': '3306',
        'NAME': 'xxx',  # 數據庫名稱
        'USER': 'root',
        'PASSWORD': '數據庫密碼',
        'OPTIONS': {
            'init_command': "SET sql_mode ='STRICT_TRANS_TABLES' "
        }
    },
    'mysql': {
    'ENGINE': 'django.db.backends.mysql',
    'HOST': '192.168.1.103',
    'POST': '3306',
    'NAME': 'xxx',  # 數據庫名稱
    'USER': 'root',
    'PASSWORD': '數據庫密碼',
    'OPTIONS': {
        'init_command': "SET sql_mode ='STRICT_TRANS_TABLES' "
    }
}


}