摘要：更新嘗試了一下實(shí)現(xiàn)前后端分離，新的文章如下前后端分離之初試更新可另外用實(shí)現(xiàn)前后端分離，這篇文章可能局限性太大，只是個(gè)人的入門實(shí)踐剛剛學(xué)習(xí)前端快一年，后臺(tái)方面了解甚少，于是決定踩踩坑，學(xué)習(xí)一下。

2018.9.6更新：嘗試了一下REST framework實(shí)現(xiàn)前后端分離，新的文章如下Django前后端分離之REST framework初試

2018.8.27更新：可另外用 restful API 實(shí)現(xiàn)前后端分離，這篇文章可能局限性太大，只是個(gè)人的入門實(shí)踐

剛剛學(xué)習(xí)前端快一年，后臺(tái)方面了解甚少，于是決定踩踩坑，學(xué)習(xí)一下。于是就選了django這個(gè)框架（剛剛好順便學(xué)了python）
不想使用框架的提供的模板功能，于是看看前后端分離 + MySQL數(shù)據(jù)庫如何實(shí)現(xiàn)
之間也踩了很多坑，從MySQL配置的版本問題，到本地測試的跨域問題等等
啊，廢話少說，看目錄

一、創(chuàng)建項(xiàng)目
二、配置MySQL
三、創(chuàng)建應(yīng)用
四、結(jié)語

過程比較詳細(xì)記錄了前后端分離的每一步，算是小白實(shí)踐吧哈哈

到想要?jiǎng)?chuàng)建項(xiàng)目的文件夾下運(yùn)行命令

$ django-admin startproject dj_experiment    //后面就是項(xiàng)目名字咯

創(chuàng)建完后生成目錄，具體什么意思請看官網(wǎng)文檔（https://docs.djangoproject.co...）

dj_experiment/
    manage.py
    dj_experiment/
        __init__.py
        settings.py
        urls.py
        wsgi.py

這里我們默認(rèn)安裝好MySQL了，并且為這個(gè)小實(shí)驗(yàn)創(chuàng)建一個(gè)數(shù)據(jù)庫叫做"dj_experiment_db"
Django的配置文件中將SQLite作為默認(rèn)數(shù)據(jù)庫。同時(shí)Django支持sqlite3，MySQL等數(shù)據(jù)庫，在settings.py中修改配置就好，而且因?yàn)橛胸S富的API，所以如果改動(dòng)數(shù)據(jù)庫，也不需要修改models.py中的代碼
以下分為幾個(gè)步驟：

pip install pymysql

python3不支持MySQLdb，所以用pymysql代替

在settings.py中找到DATABASE

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",    #數(shù)據(jù)庫引擎
        "NAME": "dj_experiment_db",  #數(shù)據(jù)庫名
        "USER": "root",   #賬戶名
        "PASSWORD": "password", #密碼
        "HOST": "localhost", #主機(jī)
        "PORT": "3306", #端口
    }

}

接著在_init_.py添加如下代碼

import pymysql
pymysql.install_as_MySQLdb()

然后設(shè)置TIME_ZONE為自己的時(shí)區(qū)

TIME_ZONE = "Asia/Shanghai"

最后執(zhí)行數(shù)據(jù)庫遷移命令

python manage.py makemigrations
python manage.py migrate

然后我們登錄數(shù)據(jù)庫，連接數(shù)據(jù)庫dj_experiment_db，輸入show tables；就可以看到django創(chuàng)建的框架應(yīng)用的表了

到dj_experiment目錄下運(yùn)行命令，這里我們創(chuàng)建一個(gè)注冊的應(yīng)用，然后在頁面里面循環(huán)漸進(jìn)實(shí)現(xiàn)做以下前后端分離，開發(fā)后臺(tái)接口的兩個(gè)小實(shí)驗(yàn)：
1.ajax與get的后端接口
2.ajax與post提交
兩個(gè)簡單的小實(shí)驗(yàn)，但過程中有些問題：本地測試的跨域問題，CSRF問題。
我們在實(shí)踐過程中再逐一解決

現(xiàn)在先創(chuàng)建應(yīng)用register（先在這個(gè)應(yīng)用實(shí)現(xiàn)get，再實(shí)現(xiàn)post）：

$ python manage.py startapp register

創(chuàng)建完后目錄如下：

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

在views.py下創(chuàng)建接口，我們先舉個(gè)簡單的例子——hello接口
代碼如下

from django.shortcuts import render
from django.http import JsonResponse

def hello(request):
    return JsonResponse({"result": 200, "msg": "連接成功"})

然后將一個(gè)URL映射給此接口
在register目錄中新建一個(gè)urls.py文件，輸入以下代碼

from django.urls import path
from . import views
urlpatterns = {
    path("helloApi", views.hello, name="hello")#第一個(gè)參數(shù)表示路徑
}

接著在dj_experiment/urls.py中指定我們創(chuàng)建的register.urls模塊

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path("register/", include("register.urls")),
    path("admin/", admin.site.urls),
]

最后打開django的開發(fā)服務(wù)器，測試一下接口

$ python manage.py runserver

瀏覽器訪問：http://localhost:8000/register/helloApi
可以看到如下顯示

因?yàn)闆]有進(jìn)行utf-8編碼，所以顯示的是Unicode編碼
這里推薦用火狐瀏覽器進(jìn)行接口測試，看起來更加詳細(xì)

ok，接口開發(fā)完畢了，我們怎么進(jìn)行前后端分離呢
在根目錄創(chuàng)建一個(gè)html文件夾，并在里面創(chuàng)建register.html,，如圖

我們先進(jìn)行g(shù)et后臺(tái)接口的訪問
先編寫一個(gè)ajax的封裝函數(shù)
ajaxResponse(xhr, 連接成功時(shí)執(zhí)行的函數(shù)，連接失敗時(shí)執(zhí)行的函數(shù))
便于我們調(diào)用，代碼如下

    function ajaxResponse(xhr,successFunction,falseFunction) {
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            console.log(xhr.status);
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                alert("成功");
                successFunction();
            } else {
                alert("失敗" + xhr.status);
                falseFunction();
            }
        }
    }
}

接下來編輯register.html如下：

然后我們來解決本地測試時(shí)的跨域問題
在register/views.py中編寫一個(gè)返回html的接口，代碼如下，注意import了render_to_response方法

from django.shortcuts import render, render_to_response
from django.http import JsonResponse

# Create your views here.
def registerPage(request):
    return render_to_response("register.html")

接著同理在register/urls.py中加入接口路徑，最后是這樣子的代碼

from django.urls import path
from . import views
urlpatterns = {
    path("helloApi", views.hello, name="hello"),
    path("registerPage", views.registerPage, name="registerPage")
}

最后瀏覽器訪問http://localhost:8000/register/registerPage
并且點(diǎn)擊方塊，接受msg成功 （疑問：放在服務(wù)器端的話是否需要這樣？）

現(xiàn)在我們將創(chuàng)建真正的應(yīng)用，與MySQL進(jìn)行交互
django通過模型與數(shù)據(jù)庫進(jìn)行交互

我們叫這個(gè)模型為UserInfo，字段有username和password，所以代碼如下（__str__方法是為了方便命令行顯示與管理頁面顯示）

from django.db import models

# Create your models here.
class UserInfo(models.Model):
    username = models.CharField(max_length=16)
    password = models.CharField(max_length=20)
    def __str__(self):
        return self.username

創(chuàng)建模型后，django可以為應(yīng)用創(chuàng)建數(shù)據(jù)庫schema和與username，password對象進(jìn)行交互的python數(shù)據(jù)庫API?，F(xiàn)在我們要做的是激活模型

首先在settings.py的INSTALLED_APPS中添加設(shè)置

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "register.apps.RegisterConfig",#這里
]

接著運(yùn)行命令，檢測模型文件的修改，并把修改的部分儲(chǔ)存為一次遷移（注意這里還沒有修改）

$ python manage.py makemigrations register

然后可以運(yùn)行命令看看等會(huì)的遷移命令會(huì)執(zhí)行哪些SQL語句（這一步可干可不干）

$ python manage.py sqlmigrate register 0001

最后就執(zhí)行遷移命令

$ python manage.py migrate

顯示如下（WARNINGS是對MySQL Strict Mode 的提示）：

之后可以在MySQL下看見django創(chuàng)建的表

（這里可以用命令行嘗試django提供的api或者配置并打開管理員頁面，可以去官網(wǎng)看看怎么做https://docs.djangoproject.co...）

django自帶CSRF防護(hù)機(jī)制，所以我們這里加個(gè)@csrf_exempt屏蔽裝飾器

#新的引入文件
from django.views.decorators.csrf import csrf_exempt
import json
from .models import UserInfo

@csrf_exempt #屏蔽裝飾器器
def registerApi(request):
    if request.method == "POST":
        req = json.loads(request.body) #取得數(shù)據(jù)
        userID = req["userID"]
        pwd = req["pwd"]
        searchArray = UserInfo.objects.get_or_create(username=userID) #嘗試創(chuàng)建用戶
        print(searchArray)
        if searchArray[1] == True:
            return JsonResponse({"result": 200, "msg":"注冊成功"})
        else:
            return JsonResponse({"result": 200, "msg":"已有重復(fù)用戶名"})

同樣urls中記得改配置：

urlpatterns = [
    path("helloApi", views.hello, name="hello"),
    path("registerPage", views.registerPage, name="registerPage"),
    path("registerApi", views.registerApi, name="registerApi")
]

接著編寫html頁面

賬號(hào)：

密碼：

注冊

還有js

    let subBt = document.getElementById("submit");
    subBt.onclick = function () {
        let userID = document.getElementById("userID").value;
        let pwd = document.getElementById("pwd").value;
        let xhrRegister = new XMLHttpRequest();
        ajaxResponse(xhrRegister,
        function () {
            let respones = JSON.parse(xhrRegister.responseText);
            alert(respones.msg);
        },function () {
            });
        let user = {
            userID:userID,
            pwd:pwd
        };
        xhrRegister.open("post", "http://127.0.0.1:8000/register/registerApi");
        xhrRegister.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        xhrRegister.send(JSON.stringify(user));
};

注冊成功

還有注冊失敗

簡單的實(shí)踐目前就到此為止啦，做這次實(shí)踐的主要目的是了解后臺(tái)的框架，之中還有很多沒有去學(xué)習(xí)，比如如何在服務(wù)器上部署Django，Token驗(yàn)證，數(shù)據(jù)庫操作等等
有什么問題或者哪里不對大家提出來討論下吧

參考資料：
MySQL驅(qū)動(dòng)：https://blog.csdn.net/liuweiy...
django數(shù)據(jù)庫：https://code.ziqiangxuetang.c...
配置MySQL：https://www.cnblogs.com/wcwni...
屏蔽裝飾器：https://blog.csdn.net/lw_zhao...
django加載靜態(tài)網(wǎng)頁：https://blog.csdn.net/github_...