利用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 相关文章推荐
Python打印scrapy蜘蛛抓取树结构的方法
Apr 08 Python
Python 实现随机数详解及实例代码
Apr 15 Python
OpenCV+python手势识别框架和实例讲解
Aug 03 Python
Python+pyplot绘制带文本标注的柱状图方法
Jul 08 Python
Django forms表单 select下拉框的传值实例
Jul 19 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
Jul 23 Python
django-初始配置(纯手写)详解
Jul 30 Python
python实现输入任意一个大写字母生成金字塔的示例
Oct 27 Python
Python建造者模式案例运行原理解析
Jun 29 Python
了解一下python内建模块collections
Sep 07 Python
用python画城市轮播地图
May 28 Python
python 标准库原理与用法详解之os.path篇
Oct 24 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
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php创建多级目录代码
2008/06/05 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Seajs源码详解分析
2019/04/02 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
pytorch进行上采样的种类实例
2020/02/18 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
人事主管岗位职责范本
2013/12/04 职场文书
集中整治工作方案
2014/05/01 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年学校党建工作总结
2015/05/19 职场文书