利用python实现后端写网页（flask框架）

2024-10-01 23:34:31

如何用python做后端写网页-flask框架什么是Flask安装flask模块Hello World更深一步：数据绑定后端传入数据从前端获取数据数据库连接screen创建后台查看删除后台结束

什么是Flask

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask使用 BSD 授权。以下程序均在自己服务器上运行（在vs code利用ssh进行连接）

安装flask模块

首先使用pip进行安装：

pip install flask

在所在项目文件夹下创建templates文件夹（用于存放html等文件）和app.py，如图：

Hello World

我们可以在templates文件中新建index.html文件，其内容如下：

<html>
 <h1>Hello Word!</h1>
</html>

在上一步建立的app.py文件中，写入：

from flask import Flask, render_template, request, jsonify
#创建Flask对象app并初始化
app = Flask(__name__)

#通过python装饰器的方法定义路由地址
@app.route("/")
#定义方法 用jinjia2引擎来渲染页面，并返回一个index.html页面
def root():
 return render_template("index.html")
#定义app在8080端口运行
app.run(port=8080)

我们写好app.py文件后，我们按F5 运行，即终端输出：

我们访问服务器的8080端口，即Hello World出现在眼前！

更深一步：数据绑定

上一步我们简单地搭建好一个静态网页，它的显示只取决于前端，是固定不变的。我们如何做到从后端传递数值并在前端显示呢？这就需要使用数据绑定.

数据绑定,顾名思义，是为了实现一种“动态”的效果，后台的数据更新了，前端页面也自动更新；前端页面上的数据更新了，后台的数据也自动更新。在flask框架中，后端先将网页进行加载，并把传入的数据放在合适的位置后使用jinjia2引擎渲染，最后将渲染好的页面返回。

后端传入数据

我们首先在render_template函数中传递需要绑定的数据name,age:

from flask import Flask, render_template, request, jsonify
#创建Flask对象app并初始化
app = Flask(__name__)

#通过python装饰器的方法定义路由地址
@app.route("/")
#定义方法 用jinjia2引擎来渲染页面，并返回一个index.html页面
def root():
 return render_template("index.html",name="zxy",age=21)
#定义app在8080端口运行
app.run(port=8080)

在前端index.html中,我们获取传入的数据：

<html>
 <h1>我是{{name}},今年{{age}}岁</h1>
</html>

我们再按F5运行，并访问服务器的8080端口，页面显示：

从前端获取数据

那么，前端提交的数据如何传到后端呢？

在这里，我使用ajax实现数据的异步传输。我们将主要步骤概括为：

1.在前端页面中引入jQuery

2.创建两个输入框，一个按钮用于输入数据和事件提交。

3.在js中编写事件，使用ajax进行数据提交

4.在后端app.py中编写对应的事件处理函数

前端index.html内容如下：

<html>
 <!--引入jQuery包用于使用ajax-->
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <h1>请输入你的姓名和年龄</h1>
 <!--创建两个input输入框，定义id分别为name,age-->
 <input type="text" id="name" name="name" placeholder="姓名">
 <br>
 <input type="text" id="age" name="age" placeholder="年龄">
 <br>
 <!--创建button按钮，点击则激发submit()事件-->
 <button onclick="submit();">提交</button>
 <script>
 /*在这里编写submit()事件*/
 function submit() {
 $.ajax({
 url: "submit", /*数据提交到submit处*/
 type: "POST", /*采用POST方法提交*/
 data: { "name": $("#name").val(),"age":$("#age").val()}, /*提交的数据（json格式），从输入框中获取*/
 /*result为后端函数返回的json*/
 success: function (result) {
  if (result.message == "success!") {
  alert(result.message+"你的名字是"+result.name+",你的年龄是"+result.age)
  }
  else {
  alert(result.message)
  }
 }
 });
 }
 </script>
</html>

当我们完成ajax数据提交后，则在后端app.py处编写对应的处理函数submit()。

app.py中的内容如下：

from flask import Flask, render_template, request, jsonify
#创建Flask对象app并初始化
app = Flask(__name__)

#通过python装饰器的方法定义路由地址
@app.route("/")
#定义方法 用jinjia2引擎来渲染页面，并返回一个index.html页面
def root():
 return render_template("index.html")

#app的路由地址"/submit"即为ajax中定义的url地址，采用POST、GET方法均可提交
@app.route("/submit",methods=["GET", "POST"])
#从这里定义具体的函数 返回值均为json格式
def submit():
 #由于POST、GET获取数据的方式不同，需要使用if语句进行判断
 if request.method == "POST":
 name = request.form.get("name")
 age = request.form.get("age")
 if request.method == "GET":
 name = request.args.get("name")
 age = request.args.get("age")
 #如果获取的数据为空
 if len(name) == 0 or len(age) ==0:
 return {'message':"error!"}
 else:
 return {'message':"success!",'name':name,'age':age}

#定义app在8080端口运行
app.run(port=8080)

编写完成后，我们访问服务器8080端口进行测试，结果如下：

数据库连接

数据库是一个网页不可或缺的部分。前面的例子中，数据都是从前端获取或者随机输入的。如何从数据库中获取数据呢？

首先我们引入pymysql库并编写Database类，该类写在database.py中：

import pymysql
class Database:
 #设置数据库的连接参数，由于我是在服务器中编写的，所以host是localhost
 host = "localhost"
 user = "root"
 password = "Zhangxy0212!!"
 #类的构造函数，参数db为欲连接的数据库。该构造函数实现了数据库的连接
 def __init__(self,db):
 connect = pymysql.connect(host=self.host,user=self.user,password=self.password,database=db)
 self.cursor = connect.cursor()
 #类的方法，参数command为sql语句
 def execute(self, command):
 try:
 #执行command中的sql语句
 self.cursor.execute(command)
 except Exception as e:
 return e
 else:
 #fetchall()返回语句的执行结果，并以元组的形式保存
 return self.cursor.fetchall()

我们可以在templates文件中新建一个data.html文件，用于创建一个新的页面，文件内容如下:

<html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<h1>请输入你的名字</h1>
<input type="text" id="name" name="name">
<button onclick="show();">提交</button>
<!--result用来显示提交结果-->
<p id="result"></p>
<script>
 function show() {
 $.ajax({
  url: "show",
  type: "POST",
  data: { "name": $("#name").val()},
  /*不要忘记 result为后端处理函数的返回值！*/
  success: function (result) {
  if (result.status == "success") {
   $("#result").text($("#name").val() + "是" + result.message)
  }
  else {
   $("#result").text("出错了")
  }
  }
 });
 }
</script>
</html>

按钮的触发事件为show();接下来我们在app.py中编写 渲染data.html页面的函数data()和事件处理函数show().

切记，这两个函数一定要加在 创建app对象 和 定义运行端口之间！！

由于我们要使用写好的Database类进行数据库的连接，因此需要在app.py顶部进行引入:

from database import Database

data()函数和show()函数如下：

#通过python装饰器的方法定义路由地址
@app.route("/data")
#定义方法 用jinjia2引擎来渲染页面，并返回一个index.html页面
def data():
 return render_template("data.html")

#app的路由地址"/show"即为ajax中定义的url地址，采用POST、GET方法均可提交
@app.route("/show",methods=["GET", "POST"])
def show():
 #首先获取前端传入的name数据
 if request.method == "POST":
 name = request.form.get("name")
 if request.method == "GET":
 name = request.args.get("name")
 #创建Database类的对象sql，test为需要访问的数据库名字 具体可见Database类的构造函数
 sql = Database("test")
 try:
 #执行sql语句 多说一句，f+字符串的形式，可以在字符串里面以{}的形式加入变量名 结果保存在result数组中
 result = sql.execute(f"SELECT type FROM type WHERE name='{name}'")
 except Exception as e:
 return {'status':"error", 'message': "code error"}
 else:
 if not len(result) == 0:
  #这个result，我觉得也可以把它当成数据表，查询的结果至多一个，result[0][0]返回数组中的第一行第一列
  return {'status':'success','message':result[0][0]}
 else:
  return "rbq"

我们按F5 运行app.py文件后，访问http://121.41.111.94/data

运行结果如图：

多提一句，数据表type中的内容如下：

screen

至此，使用flask框架搭建简单网页的基本流程结束啦！

我想你们心中一定有个疑问，每次运行python程序总是需要按F5运行，如果关掉 VS Code ，那么进程将会被杀掉，服务器页面就无法显示，如图：

那么我们就需要在服务器中使用screen创建一个后台，将app.py程序放在后台中运行，达到持续运行的目的。

创建后台

由于我的服务器是Centos，所以我使用 yum install screen的方式下载的screen。

下载完成后，在服务器的任意位置输入screen命令即可创建后台，后台如图：

即上面会显示screen 0.

我们进入工程所在的文件try 输入命令：python app.py 如图：

这样我们再访问一下121.41.111.94，会发现网站已经启动啦！我们即使关闭命令行，程序也继续在后台运行。

查看删除后台

如果我们需要查看后台的运行情况，在服务器中输入命令：screen -x

如果需要停止后台运行，则先通过 screen -x [pid号] 进入某一后台。进入之后 Ctrl+C即可停止运行。

如果删除后台，则先通过 screen -x [pid号] 进入某一后台，进入之后输入exit

结束

到此这篇关于利用python实现后端写网页（flask框架）的文章就介绍到这了,更多相关python后端写网页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Flask框架实现的前端RSA加密与后端Python解密功能详解

本文实例讲述了Flask框架实现的前端RSA加密与后端Python解密功能.分享给大家供大家参考,具体如下: 前言在使用 Flask 开发用户登录API的时候,我之前都是明文传输 username 和 password.这种传输方式有一定的安全隐患,password 可能会在传输过程中被窃听而造成用户密码的泄漏. 那么我认为解决该问题的方法是这样的:在前端页面对数据进行加密,然后再发送到后端进行处理. 这一篇文章是前端用 RSA 的 publicKey 进行加密,然后后端用 Python 进行
Python Flask前后端Ajax交互的方法示例

之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "
利用python实现后端写网页（flask框架）

如何用python做后端写网页-flask框架什么是Flask安装flask模块Hello World更深一步:数据绑定后端传入数据从前端获取数据数据库连接screen创建后台查看删除后台结束什么是Flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 .Flask使用 BSD 授权.以下程序均在自己服务器上运行(在vs code利用ssh进行连接) 安装flask模块首先使用pip进行
利用Python的装饰器解决Bottle框架中用户验证问题

首先来分析下需求,web程序后台需要认证,后台页面包含多个页面,最普通的方法就是为每个url添加认证,但是这样就需要每个每个绑定url的后台函数都需要添加类似或者相同的代码,但是这样做代码就过度冗余,而且不利于扩展. 接下来我们先不谈及装饰器,我们都知道Python是个很强大的语言,她可以将函数当做参数传递给函数,最简单的: def p(): print 'Hello,world' def funcfactor(func): print 'calling function named', fun
详解Python Flask框架的安装及应用

目录 1.安装 1.1 创建虚拟环境 1.2 进入虚拟环境 1.3 安装 flask 2.上手 2.1 最小 Demo 2.2 基本知识 3.解构官网指导 Demo 3.1 克隆与代码架构分析 3.2 入口文件 init.py 3.3 数据库设置 3.4 蓝图和视图 4.其他 5.跑起 DEMO 1.安装 1.1 创建虚拟环境 mkdir myproject cd myproject python3 -m venv venv 1.2 进入虚拟环境 . venv/bin/activate 1.3
如何利用Python实现自动打卡签到的实践

目录需求描述业务梳理程序实现总结需求描述我们需要登录考勤系统(网页端,非手机端)进行签到,如果不想每天都早早起来打卡签到,就可以通过写程序实现这一功能. 业务梳理通过长时间的早起打卡签到发现规律,我每天只是不停的点击,签到,都是规律性的操作,何尝不写一个程序加到Windows实现自动签到呢,这样我就不用每天都花时间上在打卡这件小事上.说干就干,我发现我每天的打卡行为可以归纳为"登录系统-->输入用户名.密码-->点击点击-->退出系统". 一天上网浏览社
Python Flask框架实现Proteus仿真Arduino与网页数据交互

目录实验原理开发环境 Flask虚拟环境 Python Flask源码用Proteus仿真Arduino 用com0com建立虚拟串口对运行程序实验原理模拟电脑通过串口与Arduino开发板通信,并通过网页实现简单交互开发环境 1.Windows10 2.Python3.10 3.Proteus8.6 4.com0com虚拟串口工具 Flask虚拟环境先安装virtualenv: pip install virtualenv 建立项目文件夹(比如demo_4) 在demo_04文
在Python的Flask框架下收发电子邮件的教程

简述在大多数此类教程中都会不遗余力的介绍如何使用数据库.今天我们对数据库暂且不表,而是来关注另一个在web应用中很重要的特性:如何推送邮件给用户. 在某个轻量级应用中我们可能会添加一个如下的邮件服务功能:当用户有了新的粉丝后,我们发送一封邮件通知用户.有很多方法可以实现这个特性,而我们希望提供出一种可复用的通用框架来处理. Flask-Mail介绍对于我们来说是幸运的,现在已经有很多外部插件来处理邮件,虽说不能百分百按照我们的想法去处理,但已经相当接近了. 在虚拟环境中安装 Flask
使用Python的Flask框架实现视频的流媒体传输

Flask 是一个 Python 实现的 Web 开发微框架.这篇文章是一个讲述如何用它实现传送视频数据流的详细教程. 我敢肯定,现在你已经知道我在O'Reilly Media上发布了有关Flask的一本书和一些视频资料.在这些上面,Flask框架介绍的覆盖面是相当完整的,出于某种原因,也有一小部分的功能没有太多的提到,因此我认为在这里写一篇介绍它们的文章是一个好主意. 这篇文章是专门介绍流媒体的,这个有趣的功能让Flask应用拥有这样一种能力,以分割成小数据块的方式,高效地为大型请求提供数据,
Python Flask框架开发之运用SocketIO实现WebSSH方法详解

Flask 框架中如果想要实现WebSocket功能有许多种方式,运用SocketIO库来实现无疑是最简单的一种方式,Flask中封装了一个flask_socketio库该库可以直接通过pip仓库安装,如下内容将重点简述SocketIO库在Flask框架中是如何被应用的,最终实现WebSSH命令行终端功能,其可用于在Web浏览器内实现SSH命令行执行. 首先我们先来看一下SocketIO库是如何进行通信的,对于前端部分需要引入socket.io这个框架,然后就是利用该框架内提供的各类函数实现创建
使用Python的Flask框架来搭建第一个Web应用程序

1.初始化在这章,你将学到Flask应用程序的不同部分.同时,你将编写和运行你的第一个Flask web应用程序. 所有的Flask应用程序都必须创建一个应用程序实例 .使用web服务器网关接口协议将所有从客户端接收的请求传递给这个对象处理.这个应用程序实例就是Flask类的一个对象,通常使用下面的方式创建: from flask import Flask app = Flask(__name__) Flask类构造函数唯一需要的参数就是应用程序的主模块或包.对于大多数应用程序,Python