首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

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

Posted in Python onFebruary 28, 2021

如何用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，如图：

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

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 运行，即终端输出：

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

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

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

更深一步：数据绑定

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

数据绑定,顾名思义，是为了实现一种“动态”的效果，后台的数据更新了，前端页面也自动更新；前端页面上的数据更新了，后台的数据也自动更新。在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端口，页面显示：

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

从前端获取数据

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

在这里，我使用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端口进行测试，结果如下：

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

数据库连接

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

首先我们引入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

运行结果如图：

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

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

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

screen

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

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

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

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

创建后台

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

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

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

即上面会显示screen 0.

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

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

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

查看删除后台

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

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

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

结束

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

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

- Author -

来日方长 。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python实现在windows下操作word的方法
Apr 28 Python
Python用sndhdr模块识别音频格式详解
Jan 11 Python
python 实现将字典dict、列表list中的中文正常显示方法
Jul 06 Python
pandas 快速处理 date_time 日期格式方法
Nov 12 Python
python 普通克里金（Kriging）法的实现
Dec 19 Python
Python 一行代码能实现丧心病狂的功能
Jan 18 Python
Python爬虫实现模拟点击动态页面
Mar 05 Python
Python格式化输出--%s,%d,%f的代码解析
Apr 29 Python
Python3.7下安装pyqt5的方法步骤(图文)
May 12 Python
django使用graphql的实例
Sep 02 Python
python利用线程实现多任务
Sep 18 Python
使用Django框架创建项目
Jun 10 Python
python pyg2plot的原理知识点总结
Feb 28 #Python
python在协程中增加任务实例操作
Feb 28 #Python
python 制作本地应用搜索工具
Feb 27 #Python
如何用Python进行时间序列分解和预测
Mar 01 #Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
Feb 27 #Python
python FTP编程基础入门
Feb 27 #Python
python SOCKET编程基础入门
Feb 27 #Python
Windows server 2012(17) destoon(1) lamp(1) Centos(8) 组策略(1) Rewrite(4) 日志格式分析(1) lnmp(1)  AD域(1) 伪静态(1)
You might like
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
微信小程序用户位置权限的获取方法（拒绝后提醒）
2018/11/15 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
OpenCV实现人脸识别
2017/04/07 Python
python实现神经网络感知器算法
2017/12/20 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python创建子类的方法分析
2019/11/28 Python
python实现智能语音天气预报
2019/12/02 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python 追踪except信息方式
2020/04/25 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python基于内置函数type创建新类型
2020/10/22 Python
请解释一下webService？ 如何用.net实现webService
2014/06/09 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
学习委员自我鉴定
2014/01/13 职场文书
高二物理教学反思
2014/02/08 职场文书
环保倡议书怎么写
2014/05/16 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014年服务员工作总结
2014/11/18 职场文书
网络营销计划书
2015/01/17 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书