python+html实现前后端数据交互界面显示

本文介绍: 最近刚刚开始学习如何将python 后台与html 前端结合起来，现在写一篇blog 记录一下，我采用的是前后端不分离形式。话不多说，先来实现一个简单的计算功能吧，前端输入计算的数据，后端计算结果，返回结果至前端进行显示。1.python 开发工具我选用的是pycharm 专业版，因为社区版本无法创建 django 程序2.项目创建第一步：打开 py char m，创建一个 django 程序蓝圈圈起来的为自定义的名字，点击右下角的create 可以创建一个 django 项目如下图，圈起来的名字与上图相

最近刚刚开始学习如何将python后台与html 前端结合起来，现在写一篇blog 记录一下，我采用的是前后端不分离形式。

话不多说，先来实现一个简单的计算功能吧，前端输入计算的数据，后端计算结果，返回结果至前端进行显示。

1.python 开发工具

我选用的是py char m 专业版，因为社区版本无法创建 django程序

2.项目创建

第一步：打开 py char m，创建一个django程序

蓝圈圈起来的为自定义的名字，点击右下角的create 可以创建一个django 项目

如下图，圈起来的名字与上图相对应

第二步：编写后端代码

①在b log 文件夹下面的view s.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.p y中添加下面加粗部分那两行代码

from django.contrib import admin
from django.urls import path
from blog import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('jisuan/', views.calculate),
    path('getdata/', views.show)
]

③新建 calculate.p y 文件，内容为：

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

第三步：编写前端代码

①数据输入的页面 hello.html，内容为：

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <title&gt;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>