前一段時間使用flask搭建了一個簡單的資料生成器：用flask搭建一個測試資料生成器(v1.1)

但是最近公司推django，所以又翻出之前做過的django筆記，週末利用django框架+jquery復刻一下這個功能

關於django的使用這裡不做贅述了，直接寫一下需要的程式碼以及遇到的問題（重點是前後端聯調）

基本使用：前端點選按鈕，直接呼叫方法生成資料

1.首先建立一個app，名為create_data

在它的內部建立一些必要檔案，整體目錄結構如下，已經把模板html檔案和一些靜態檔案放到了對應的目錄下

2.在views.py檔案中編寫檢視方法

這裡我編寫2個，一個用來生成電話號碼，一個用來生成身份id

(1)先寫一個方法，用來指向主頁面

def main(request):
    return render(request, 'create_data/base.html')

當訪問這個方法時，會定向到base.html

給它配置路由，我配置路由的方式和之前寫過的一篇文章一樣，先配置根路由，再配置每個app的路由(django：理解urls路由)

根路由配置 mysite/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [

    path('create_data/
 
', include('create_data.urls')),

]

app路由配置 mysite/create_data/urls.py
# coding: utf-8
# author: hmk

from django.urls import path

from . import views

urlpatterns = [
    path('', views.main, name='main'),
]

當在瀏覽器輸入 http://127.0.0.1:8000/create_data/，就會顯示展示base.html的內容

(2)編寫生成電話號碼的方法

from django.shortcuts import
 
 render
from django.http import HttpResponse, HttpResponseRedirect
from django.views.decorators.http import require_http_methods
import faker

# Create your views here.

fake = faker.Faker(locale='zh_CN')  # 初始化，指定生成中文格式資料

def main(request):
    return render(request, 'create_data/base.html')

def create_phone():
    """生成電話"""
    phones = [fake.phone_number() for _ in range(5)]  

    return " ".join(phones)


def phone(request):
  
    data = create_phone()
    return HttpResponse(data)

如上，我們最終呼叫的其實是phone()方法，所以接下來給它配置路由

因為根路由已經配置好，後續訪問每個具體方法時，只需要在http://127.0.0.1:8000/create_data/後面新增不同路徑即可，所以這裡只配置app路由

# coding: utf-8
# author: hmk

from django.urls import path

from . import views

urlpatterns = [
    path('', views.main, name='main'),
    path('phone', views.phone, name='phone'),
]

(3)修改base.html

這裡同樣使用jquery來呼叫後臺定義好的檢視方法

<script type="text/javascript">
        $(document).ready(function(){
          $("#b01").click(function(){
          htmlobj=$.ajax({url:"http://127.0.0.1:8000/create_data/phone",async:false});  //當瀏覽器呼叫這個url時，就會觸發phone()方法
          $("#result").html(htmlobj.responseText);
          });
        });
</script>

前端傳遞一個引數給後端，分別試驗傳送get、post請求

post請求如下

1.定義一個生成身份id的方法

它需要接收前端傳來的一個引數：num，控制生成資料的數量

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.views.decorators.http import require_http_methods
import faker

def create_id(num):
    """生成身份證"""
    identity_ids = [fake.ssn() for i in range(int(num))]

    return " ".join(identity_ids)

@require_http_methods(['GET', 'POST'])
def id(request):

    num = request.POST.get("num")
    if num == "":
        num = 5
    data1 = create_id(num)
    return HttpResponse(data1)

(1)匯入require_http_methods，通過給檢視方法新增裝飾器@require_http_methods(['GET', 'POST'])來控制請求方法（允許哪種請求方法可以訪問，這裡是允許get和post方法）

(2)num = request.POST.get("num")，因為我打算在前端頁面點選生成id時，是觸發post請求，所以後端這裡使用request.POST.get來獲取前端傳來的引數值(這裡預定義一個前端引數num)

2.配置檢視方法id()的路由

# coding: utf-8
# author: hmk

from django.urls import path

from . import views

urlpatterns = [
    path('', views.main, name='main'),
    path('phone', views.phone, name='phone'),
    path('id', views.id,name='id'),
]

3.修改base.html

開始我的script程式碼如下

$(document).ready(function(){
          $("#b02").click(function(){
              var num = $('input[id=id_num]').val();
              htmlobj = $.ajax(
                {
                    type: 'post',
                    url: 'http://127.0.0.1:8000/create_data/id',
                    cache: false,
                    data: {"num": num},
                    async:false
                }
            );
          $("#result").html(htmlobj.responseText);
          });
        });

然後點選生成資料時，頁面報錯：403 Forbidden

響應內如如下

網上衝浪一番後發現是django的CSRF認證導致的(get請求是沒有這個問題的)

解決方法：

在base.html頂部新增

{% csrf_token %}

然後在傳送post請求時，需要額外攜帶一個引數

$(document).ready(function(){
          $("#b02").click(function(){
              var num = $('input[id=id_num]').val();
              htmlobj = $.ajax(
                {
                    type: 'post',
                    url: 'http://127.0.0.1:8000/create_data/id',
                    cache: false,
                    data: {"num": num, 'csrfmiddlewaretoken':'{{ csrf_token }}'},  //在data中新增一個引數 csrfmiddlewaretoken

async:false } ); $("#result").html(htmlobj.responseText); }); });

這樣就正常了

如果要傳送get請求的話，設定就比較簡單了

後端程式碼如下

def create_id(num):
    """生成身份證"""
    identity_ids = [fake.ssn() for i in range(int(num))]

    return " ".join(identity_ids)

@require_http_methods(['GET', 'POST'])
def id(request):

    num = request.GET.get("num") # 如果要使用get請求，則需要用request.GET來獲取前端的引數
    if num == "":
        num = 5
    data1 = create_id(num)
    return HttpResponse(data1)

前端js程式碼修改

$(document).ready(function(){
          $("#b02").click(function(){
              var num = $('input[id=id_num]').val();
              htmlobj = $.ajax(
                {
                    type: 'get',
                    url: 'http://127.0.0.1:8000/create_data/id',
                    cache: false,
                    data: {"num": num},
                    async:false
                }
            );
          $("#result").html(htmlobj.responseText);
          });
        });

ok，這樣就實現了一個django+jquery搭建的資料構造器

下一步是做一個數據構造平臺，通過抓取業務系統介面，實現頁面點選一鍵生成所需要的測試資料，目前已經實現了基礎功能，等後面學一些vue知識後，實現前後端分離開發~