用 django form 從前端傳資料存進資料庫

需求描述：讓 user 於網頁前端輸入資料後，存進資料庫裡面。

一、基本設定

1. 新增 APP

python manage.py startapp testPassValue

2. 放進 settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'testPassValue',
]

3. 編輯 myproject/urls.py

from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [    
  url(r'^admin/', admin.site.urls),    
  url(r'^home/', include('testPassValue.urls', namespace="home")),
]

4. 編輯 views.py

from django.views.generic import TemplateView
class HomeView(TemplateView):  
  template_name = 'home/home.html'

5. 編輯 testPassValue/urls.py

from django.conf.urls import url
from testPassValue.views import HomeView
urlpatterns = [  
  url(r'^$', HomeView.as_view(), name="home")
]

6. 在 testPassValue 下新增資料夾跟檔案 templates/home/home.html

<div class='container'>  
  <h1>HOME</h1>  
  <form method="post">    
    <input type="text">    
    <button type="submit">SUBMIT</button>  
  </form>
</div>

7. 確認一下畫面有沒有出來 python manage.py runserver

二、新增 get 方法

1. 新增檔案 forms.py

from django import forms
class HomeForm(forms.Form):  
  post = forms.CharField()

2. 編輯 views.py，定義 get function，初始化 form，把 form 傳入 template 裡面：

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
# Create your views here.
from django.views.generic import TemplateView
from testPassValue.forms import HomeForm
class HomeView(TemplateView):  
  template_name = 'home/home.html' 
  def get(self, request):    
    form = HomeForm()    
    return render( request, self.template_name, {'form':form})

3. 編輯 template/home/home.html，把 form 載入為 <p> </p> 標籤：

<div class='container'>  
  <h1>HOME</h1>  
  <form method="post">    
  {% csrf_token %}    
  {{ form.as_p }}    
  <button type="submit">SUBMIT</button>  
  </form>
</div>

三、新增 post 方法

1. 編輯 views.py，定義 post function：

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
# Create your views here.
from django.views.generic import TemplateView
from testPassValue.forms import HomeForm
class HomeView(TemplateView):  
  template_name = 'home/home.html'  
  def get(self, request):    
    form = HomeForm()    
    return render( request, self.template_name, {'form':form})  
  def post(self, request):    
    form = HomeForm(request.POST)    
    if form.is_valid():      
      text = form.cleaned_data['post']      
      form = HomeForm()
    args = {'form': form, 'text': text}      
    return render(request, self.template_name, args)

2. 編輯 template/home/home.html，把 text 秀出來看看以便確認是否有 post 成功：

<div class='container'>  
  <h1>HOME</h1>  
  <form method="post">    
    {% csrf_token %}    
    {{ form.as_p }}    
    <button type="submit">SUBMIT</button>  
  </form>    
{{ text }}
</div>

目前還是 post 假的，因為沒有真的存進資料庫裡面，接下來才要進行這個步驟。

四、存進資料庫

1. 編輯後端的 models.py：

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.db import models
# Create your models here.
class Post(models.Model):  
  post = models.CharField(max_length=500)

2. 編輯前端的 forms.py

from django import forms
from testPassValue.models import Post
class HomeForm(forms.ModelForm):  
  post = forms.CharField()    
  class Meta:    
    model = Post    
    fields = ('post',)

3. 編輯 views.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render, redirect
# Create your views here.
from django.views.generic import TemplateView
from testPassValue.forms import HomeForm
class HomeView(TemplateView):  
  template_name = 'home/home.html'  
  def get(self, request):    
    form = HomeForm()    
    return render( request, self.template_name, {'form':form})  
  def post(self, request):    
    form = HomeForm(request.POST)    
    if form.is_valid():      
      form.save()   # Add   
      text = form.cleaned_data['post']      
      form = HomeForm()      
      return redirect('home:home')  # Add
    args = {'form': form, 'text': text}    
    return render(request, self.template_name, args)

4. 隨便輸入一些資料，到資料庫確認有進入資料庫裡面：

這樣就算完成囉。

參考資料