Django+Vue項目學習第一篇：django后台搭建

傳送門：

Django+Vue項目學習第二篇：vue項目創建 

Django+Vue項目學習第三篇：使用axios發送請求，解決跨域問題，調通前后端 

Django+Vue項目學習第四篇：使用axios發送攜帶參數的get請求

Django+Vue項目學習第五篇：vue+django發送post請求，解決csrf認證問題

Django+Vue項目學習第六篇：vue+django發送post請求，設置不同content-type，前后端如何處理參數

最近在學習Django和Vue，經過一段時間的摸索終於把前后端調通了，初步達到了學習的目的：

1、使用Vue寫前端頁面；

2、使用Django處理后台邏輯，生成數據返給前端；

3、利用axios發送網絡請求，包含get請求、post請求、攜帶參數的請求；

4、Django如何接收不同類型請求頭對應的請求參數，例如表單數據、json數據；

5、解決Vue+Django的跨域問題；

6、解決Vue+Django發送post請求時的CSRF驗證問題；

我會用幾篇博客來完整地說一下項目的搭建過程，包含前端Vue工程以及后端Django工程，雖然實現的功能很簡單，但是卻能夠很好地學習到Django+Vue聯調項目的基礎知識

ps.文中的代碼可能有些low，不要在意，重點關注前后端是怎么調通的，這也是我學習它的初衷，等后面隨着代碼能力的提高，相信可以寫出更漂亮的代碼~

 

為了便於理解，本次仍然以我之前寫過的一個web數據構造平台為基礎，復刻它的功能，傳送門：django實現一個簡易數據生成器、用flask搭建一個測試數據生成器(v1.1)

 

ok，下面開始第一篇：利用Django搭建后端工程

1、查看python、django版本

windows下切換至cmd窗口

查看python版本
C:\Users\HanMK\Desktop>python --version
Python 3.7.2

查看django版本

C:\Users\HanMK\Desktop>python -m django --version
2.2.1

2、創建項目

cd 到一個你想放置代碼的目錄，然后運行以下命令

C:\Users\HanMK\Desktop>django-admin startproject mysite

將會在當前目錄下創建一個 mysite 目錄，結構如下

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        asgi.py

3、啟動服務

首先切換到外層的mysite目錄，即項目的根目錄  mysite/ 

然后執行  python manage.py runserver

C:\Users\HanMK\Desktop\mysite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
March 23, 2020 - 11:53:58
Django version 2.2.1, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

更換端口：

$ python manage.py runserver 8080

更改監聽所有服務器的公開IP

$ python manage.py runserver 0:8000

4、創建應用

在 Django 中，每一個 應用 都是一個 Python 包，並且遵循着相同的約定。

進入 manage.py 所在的目錄下，然后運行這行命令來創建一個 create_data 應用：

C:\Users\HanMK\Desktop\mysite>python manage.py startapp create_data

這將會創建一個 create_data 目錄，它的目錄結構大致如下：

create_data/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

注冊應用，打開settings.py，找到 INSTALLED_APPS，在里面添加 create_data

5、創建視圖

因為功能比較簡單，所以我的業務處理邏輯直接在視圖文件中編寫了

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
from django.views.decorators.http import require_http_methods
import faker, json
from django.middleware.csrf import get_token

# Create your views here.

fake = faker.Faker(locale='zh_CN')  # 初始化，指定生成中文格式數據def create_phone():
    """生成電話"""
    phones = [fake.phone_number() for _ in range(5)]  # 列表推導，把生成的數據組成一個列表

    return " ".join(phones)


def phone(request):

    data = create_phone()
    return HttpResponse(data)

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")  # 如果"Content-type"="application/x-www-form-urlencoded"
    # num = json.loads(request.body).get("num") # 如果"Content-type"="application/json"
    print(num)
    if num == "" or num is None:
        data1 = create_id(5)
    else:
        data1 = create_id(num)
    return HttpResponse(data1)


def create_name(num):
    """生成姓名"""
    names = [fake.name() for i in range(int(num))] 
    return " ".join(names)


def name(request):
    num = request.GET.get("num")
    print(num)
    if num == "" or num is None:
        data = create_name(20)
    else:
        data = create_name(num)
    return HttpResponse(data)

注意：上述代碼中id()視圖方法和name()方法中，分別預留了一個參數num，是需要從前端請求中獲取的，這里我們先定義出來，后續寫前端頁面時，需要從頁面輸入num參數傳遞給后端

6、配置路由

創建好視圖方法后，需要給視圖配置路由，這樣其他人才能通過url調用這個方法

關於django的路由配置，我以前寫過一篇關於如何理解它的文章，有興趣可以看看，傳送門：django：理解urls路由

在 create_data 目錄里新建一個 urls.py 文件，你的應用目錄現在看起來應該是這樣：

create_data/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    urls.py
    views.py

在 create_data/urls.py 中，輸入如下代碼：

# 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'),
    path('name', views.name,name='name'),
]

下一步是要在根 URLconf 文件中指定我們創建的 create_data.urls 模塊。

在 mysite/urls.py 文件的 urlpatterns 列表里插入一個 include()， 如下：

"""mysite URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('polls-admin/', admin.site.urls),
    path('polls/', include('polls.urls')),
    path('create_data/', include('create_data.urls')), # 指定create_data.urls模塊

]

OK，這樣就配置好了，可以試一下看看配置的視圖是否生效，在瀏覽器輸入：http://localhost:8000/create_data/phone，可以得到如下結果

 因為瀏覽器訪問一個接口時，默認都是發get請求，如果你的視圖允許用get訪問，則可以得到結果

如果想限制請求方法，可以通過如下方法實現

from django.views.decorators.http import require_http_methods

@require_http_methods(['POST'])
def phone(request):
    data = create_phone()
    return HttpResponse(data)

這個時候再訪問，則提示 “Method Not Allowed”

---

 django后端部分基本上寫好了，接下來寫前端