django實現一個簡易數據生成器

前一段時間使用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知識后，實現前后端分離開發~