python+html實現前後端資料互動介面顯示的全過程

2022-06-10 14:02:30

前言

最近剛剛開始學習如何將python後臺與html前端結合起來，現在寫一篇blog記錄一下，我採用的是前後端不分離形式。

話不多說，先來實現一個簡單的計算功能吧，前端輸入計算的資料，後端計算結果，返回結果至前端進行顯示。

1.python開發工具

我選用的是pycharm專業版，因為社群版本無法建立django程式

2.專案建立

第一步：開啟pycharm，建立一個django程式

藍圈圈起來的為自定義的名字，點選右下角的create可以建立一個django專案

如下圖，圈起來的名字與上圖相對應

第二步：編寫後端程式碼

①在blog資料夾下面的views.py中編寫以下程式碼：

from django.shortcuts import render
from calculate import jisuan
# Create your views here.
 
def calculate(request):
    return render(request, 'hello.html')
 
def show(request):
    x = request.POST.get('x')
    y = request.POST.get('y')
    result = jisuan(x, y)
    return render(request, 'result.html', {'result': result})

②在csdn資料夾下面的urls.py中新增下面加粗部分那兩行程式碼

from django.shortcuts import render
from calculate import jisuan
# Create your views here.
 
def calculate(request):
    return render(request, 'hello.html')
 
def show(request):
    x = request.POST.get('x')
    y = request.POST.get('y')
    result = jisuan(x, y)
    return render(request, 'result.html', {'result': result})

③新建calculate.py檔案，內容為：

def jisuan(x, y):
    x = int(x)
    y = int(y)
    return (x+y)

第三步：編寫前端程式碼

①資料輸入的頁面hello.html，內容為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="/getdata/">
    {% csrf_token %}
    <input type="text" name="x" placeholder="請輸入x"/><br>
    <input type="text" name="y" placeholder="請輸入y"><br>
    <input type="submit" value="進行計算">
</form>
 
</body>
</html>

②結果返回的頁面result.html，內容為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color:blue">計算結果為{{ result }}</h1>
</body>
</html>

第四步：啟動後臺程式

在瀏覽器位址列輸入http://127.0.0.1:8000/jisuan

回車可進入資料輸入頁面