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

更新时间：2022年06月10日 10:51:11 作者：代码的女朋友

最近项目中采用了前后端分离的技术,感觉有必要给大家总结下,所以下面这篇文章主要给大家介绍了关于python+html实现前后端数据交互界面显示的相关资料,需要的朋友可以参考下

前言

最近刚刚开始学习如何将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

回车可进入数据输入页面

我们输入x=10, y=20

点击进行计算按钮，页面跳转，显示计算结果

好啦，一个简单的django项目就完成啦

如果想要进行复杂的计算操作，可以在calculate.py编写更加复杂的函数

源码资源链接：django学习，前后端不分离

总结

到此这篇关于python+html实现前后端数据交互界面显示的文章就介绍到这了,更多相关python+html前后端数据交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决pyttsx3无法封装的问题
今天小编就为大家分享一篇解决pyttsx3无法封装的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-12-12
Python 中的 typing 模块常见用法
Python的typing模块提供类型提示功能,增强代码可读性和类型安全性,通过定义变量、参数、返回值的类型,可以帮助IDE和静态分析工具提高代码质量,支持List、Dict、Tuple等类型定义,以及Optional、Union、Any等高级用法,还可以使用mypy等工具进行类型检查
2024-09-09
pycharm 关掉syntax检查操作
这篇文章主要介绍了pycharm 关掉syntax检查操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-06-06
使用python-Jenkins批量创建及修改jobs操作
这篇文章主要介绍了使用python-Jenkins批量创建及修改jobs操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-05-05
Python获取系统所有进程PID及进程名称的方法示例
这篇文章主要介绍了Python获取系统所有进程PID及进程名称的方法,涉及Python使用psutil对系统进程进行操作的相关实现技巧,需要的朋友可以参考下
2018-05-05
Python OpenCV读取中文路径图像的方法
这篇文章主要介绍了Python OpenCV读取中文路径图像的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
Python中Pytest测试框架的fixture使用详解
这篇文章主要介绍了Python中Pytest测试框架的fixture使用详解,Pytest的fixture的目的是提供一个测试的基线，在此基线基础上，可以更可靠的进行重复测试,需要的朋友可以参考下
2023-08-08
Python之 requests的使用（一）
requests是一个很实用的Python HTTP客户端库，爬虫和测试服务器响应数据时经常会用到，requests是Python语言的第三方的库，专门用于发送HTTP请求，使用起来比urllib简洁很多，这篇文章主要介绍requests的基础用法
2023-04-04
Python 多线程超详细到位总结
线程在程序中是独立的、并发的执行流。与分隔的进程相比，进程中线程之间的隔离程度要小，它们共享内存、文件句柄和其他进程应有的状态。线程的划分尺度小于进程，使多线程程序的并发性高。进程在执行过程中拥有独立内存单元，而多个线程共享内存，从而提升程序运行效率
2021-11-11
python单向链表实例详解
这篇文章主要为大家详细介绍了python单向链表实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05