介绍 pip install 瓶 & lt; html>
,& lt; h2> Hello 词! & lt;/h2>
& lt;/html> 得到flask import 瓶,,render_template,,请求,jsonify
#创建瓶对象应用程序并初始化
app =,瓶(__name__)
#通过python装饰器的方法定义路由地址
@app.route (“/?
#定义方法,用jinjia2引擎来渲染页面,并返回一个index . html页面
def 根():
,return render_template (“index.html")
8080 #定义应用在端口运行
app.run(端口=8080) 得到flask import 瓶,,render_template,,请求,jsonify
#创建瓶对象应用程序并初始化
app =,瓶(__name__)
#通过python装饰器的方法定义路由地址
@app.route (“/?
#定义方法,用jinjia2引擎来渲染页面,并返回一个index . html页面
def 根():
,return render_template (“index.html", name=皕xy",年龄=21)
8080 #定义应用在端口运行
app.run(端口=8080) & lt; html>
,& lt; h2>我是{{名称}},今年{{年龄}}岁& lt;/h2>
& lt;/html> & lt; html>
,& lt; !——引入jQuery包用于使用ajax——比;
,& lt; script 类型=拔谋?javascript", src=癶ttp://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"祝辞& lt;/script>
,& lt; h2>请输入你的姓名和年龄& lt;/h2>
,& lt; !——创建两个输入输入框,定义id分别为名字,年龄,在
,& lt; input 类型=皌ext", id=皀ame", name=皀ame",占位符=靶彰氨?
,& lt; br>
,& lt; input 类型=皌ext", id=癮ge", name=癮ge",占位符=澳炅洹氨?
,& lt; br>
,& lt; !——创建按钮按钮,点击则激发提交()事件——比;
,& lt; button onclick=皊ubmit();“祝辞提交& lt;/button>
,& lt; script>
,/*在这里编写提交()事件*/,function 提交(),{
,. ajax({美元
,url:“submit",,/*数据提交到提交处*/类型:大敌;“POST",,/*采用发布方法提交*/,数据:{,“name":美元(“# name") .val (),“age":美元(“# age") .val()},,/*提交的数据(json格式),从输入框中获取*/,/*结果为后端函数返回的json */,成功:function (结果),{
if 才能;(result.message ==,“成功!“),{
警报才能(result.message +“你的名字是“+ result.name +“,你的年龄是“+ result.age)
,,}
else {才能
警报(result.message)才能
,,}
,}
,});
,}
,& lt;/script>
& lt;/html>
如何在后端使用python写网页?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
安装瓶模块
首先使用脉冲进行安装:
在所在项目文件夹下创建模板文件夹(用于存放html等文件)和应用程序。py,如图:
Hello World
我们可以在模板文件中新建索引。html文件,其内容如下:
在上一步建立的应用。py文件中,写入:
我们写好app.py文件后,我们按F5 运行,即终端输出:
我们访问服务器的8080端口,即Hello World出现在眼前!
更深一步:数据绑定
上一步我们简单地搭建好一个静态网页,它的显示只取决于前端,是固定不变的。我们如何做到从后端传递数值并在前端显示呢?这就需要使用<>强数据绑定强。
<>强数据绑定强,顾名思义,是为了实现一种“动态”的效果,后台的数据更新了,前端页面也自动更新;前端页面上的数据更新了,后台的数据也自动更新。在瓶框架中,后端先将网页进行加载,并把传入的数据放在合适的位置后使用jinjia2引擎渲染,最后将渲染好的页面返回。
后端传入数据
我们首先在render_template函数中传递需要绑定的数据的名字,年龄:
在前端index . html中,我们获取传入的数据:
我们再按F5 运行,并访问服务器的8080端口,页面显示:
从前端获取数据
<强>那么,前端提交的数据如何传到后端呢?
在这里,我使用ajax实现数据的异步传输。我们将主要步骤概括为:
1。在前端页面中引入jQuery <强>
2。创建两个输入框,一个按钮用于输入数据和事件提交。
3。在js中编写事件,使用ajax进行数据提交
4。在后端app.py中编写对应的事件处理函数
前端指数。html内容如下:
