快捷導(dǎo)航

python+html實(shí)現(xiàn)前后端數(shù)據(jù)交互界面顯示的全過(guò)程

更新時(shí)間：2022年06月10日 10:51:11 作者：代碼的女朋友

最近項(xiàng)目中采用了前后端分離的技術(shù),感覺(jué)有必要給大家總結(jié)下,所以下面這篇文章主要給大家介紹了關(guān)于python+html實(shí)現(xiàn)前后端數(shù)據(jù)交互界面顯示的相關(guān)資料,需要的朋友可以參考下

前言

最近剛剛開(kāi)始學(xué)習(xí)如何將python后臺(tái)與html前端結(jié)合起來(lái)，現(xiàn)在寫(xiě)一篇blog記錄一下，我采用的是前后端不分離形式。

話不多說(shuō)，先來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的計(jì)算功能吧，前端輸入計(jì)算的數(shù)據(jù)，后端計(jì)算結(jié)果，返回結(jié)果至前端進(jìn)行顯示。

1.python開(kāi)發(fā)工具

我選用的是pycharm專業(yè)版，因?yàn)樯鐓^(qū)版本無(wú)法創(chuàng)建django程序

2.項(xiàng)目創(chuàng)建

第一步：打開(kāi)pycharm，創(chuàng)建一個(gè)django程序

藍(lán)圈圈起來(lái)的為自定義的名字，點(diǎn)擊右下角的create可以創(chuàng)建一個(gè)django項(xiàng)目

如下圖，圈起來(lái)的名字與上圖相對(duì)應(yīng)

第二步：編寫(xiě)后端代碼

①在blog文件夾下面的views.py中編寫(xiě)以下代碼：

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文件，內(nèi)容為：

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

第三步：編寫(xiě)前端代碼

①數(shù)據(jù)輸入的頁(yè)面hello.html，內(nèi)容為：

<!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="請(qǐng)輸入x"/><br>
    <input type="text" name="y" placeholder="請(qǐng)輸入y"><br>
    <input type="submit" value="進(jìn)行計(jì)算">
</form>
 
</body>
</html>

②結(jié)果返回的頁(yè)面result.html，內(nèi)容為：

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

第四步：?jiǎn)?dòng)后臺(tái)程序

在瀏覽器地址欄輸入http://127.0.0.1:8000/jisuan

回車可進(jìn)入數(shù)據(jù)輸入頁(yè)面

我們輸入x=10, y=20

點(diǎn)擊進(jìn)行計(jì)算按鈕，頁(yè)面跳轉(zhuǎn)，顯示計(jì)算結(jié)果

好啦，一個(gè)簡(jiǎn)單的django項(xiàng)目就完成啦

如果想要進(jìn)行復(fù)雜的計(jì)算操作，可以在calculate.py編寫(xiě)更加復(fù)雜的函數(shù)

源碼資源鏈接：django學(xué)習(xí)，前后端不分離

總結(jié)

到此這篇關(guān)于python+html實(shí)現(xiàn)前后端數(shù)據(jù)交互界面顯示的文章就介紹到這了,更多相關(guān)python+html前后端數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: