Cómo usar Python como backend para escribir páginas web-flask framework
¿Qué es el matraz?
Flask es un marco de aplicación web ligero escrito en Python . Su caja de herramientas WSGI usa Werkzeug y su motor de plantillas usa Jinja2. Flask utiliza la autorización BSD. Los siguientes programas se ejecutan en su propio servidor ( usando ssh para conectarse en código vs )
Instalar el módulo de matraz
Primero instale usando pip:
pip install flask
Cree una carpeta de plantillas (utilizada para almacenar html y otros archivos) y app.py en la carpeta del proyecto, como se muestra en la figura:
Hola Mundo
Podemos crear un nuevo archivo index.html en el archivo de plantillas, su contenido es el siguiente:
<html>
<h1>Hello Word!</h1>
</html>
En el archivo app.py creado en el paso anterior, escriba:
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)
Después de haber escrito el archivo app.py, presionamos F5Ejecutar, y el terminal sale: Accedemos al
puerto 8080 del servidor, es decir, ¡Hello World aparece frente a nosotros!
Un paso más allá: enlace de datos
En el paso anterior, simplemente construimos una página web estática, y su visualización solo depende de la interfaz y es fija. ¿Cómo pasamos el valor del back-end y lo mostramos en el front-end? Esto requiere el uso de enlace de datos .
El enlace de datos , como su nombre lo indica, es lograr un efecto "dinámico". Cuando se actualizan los datos de fondo, la página de inicio se actualiza automáticamente; los datos de la página de inicio se actualizan actualizado, y los datos de fondo también se actualizan automáticamente. En el marco del matraz, el backend carga primero la página web, coloca los datos entrantes en una ubicación adecuada y luego usa el motor jinjia2 para renderizar y finalmente devuelve la página renderizada.
Datos entrantes de back-end
Primero pasamos el nombre y la edad de los datos que deben vincularse en la función render_template:
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)
En el front-end index.html, obtenemos los datos entrantes:
<html>
<h1>我是{
{name}},今年{
{age}}岁</h1>
</html>
Presionamos F5ejecutar nuevamente , y accedemos al puerto 8080 del servidor, la página muestra:
Obtenga datos de la interfaz
Entonces, ¿cómo pasan los datos enviados por el front-end al back-end?
Aquí, uso ajax para lograr una transmisión asincrónica de datos. Resumimos los pasos principales como:
1. Introduzca jQuery en la página de inicio.
2. Cree dos cuadros de entrada, un botón para la entrada de datos y el envío de eventos.
3. Escriba eventos en js y use ajax para el envío de datos
4. Escriba las funciones de manejo de eventos correspondientes en la aplicación back-end.py
El contenido del front-end index.html es el siguiente:
<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>
Cuando completamos el envío de datos ajax, escribimos la función de procesamiento correspondiente submit () en el back-end app.py.
El contenido de app.py es el siguiente:
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)
Después de escribir, visitamos el puerto 8080 del servidor para realizar pruebas y los resultados son los siguientes:
Conectividad de la base de datos
La base de datos es una parte indispensable de una página web. En el ejemplo anterior, los datos se obtuvieron del front-end o se ingresaron al azar. ¿Cómo obtener datos de la base de datos?
Primero, presentamos la biblioteca pymysql y escribimos la clase Database, que está escrita en 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()
Podemos crear un nuevo archivo data.html en el archivo de plantillas para crear una nueva página. El contenido del archivo es el siguiente:
<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>
Activando el botón de evento para mostrar (); A continuación, escribimos en app.py la función de renderizado data.html page () y los controladores de eventos Show () .
Recuerde, estas dos funciones deben agregarse para crear los objetos de la aplicación y entre la definición operativa del puerto . !
Dado que queremos usar la clase de base de datos escrita para conectarnos a la base de datos, debemos introducirla en la parte superior de app.py :
from database import Database
La función data () y la función show () son las siguientes:
#通过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"
F5Pulsamos para ejecutar el archivo app.py y visitamos http://121.41.111.94/data
. Los resultados se muestran en la figura: Una
frase más, el contenido del tipo de tabla de datos es el siguiente:
pantalla
En este punto, ¡el proceso básico de construir una página web simple usando el marco del matraz ha terminado!
Creo que debe tener una pregunta en mente . Cada vez que ejecuta el programa Python F5, siempre debe presionar Ejecutar. Si apaga VS Code, el proceso se terminará y la página del servidor no se mostrará, como se muestra en la figura:
Entonces necesitamos estar en la pantalla de uso del servidor para crear un fondo, y poner el programa app.py para que se ejecute en segundo plano para lograr el propósito de operación continua.
Crear backend
Como mi servidor es Centos, uso la pantalla de instalación de yum para descargar la pantalla.
Una vez completada la descarga, ingrese el comando de pantalla en cualquier lugar del servidor para crear el fondo. El fondo se muestra en la figura: la
pantalla 0 se mostrará arriba.
Ingresamos el archivo donde se encuentra el proyecto. Intente ingresar el comando: aplicación python .py como se muestra en la figura:
Si visitamos 121.41.111.94 nuevamente, ¡encontraremos que el sitio web ha sido lanzado! Incluso si cerramos la línea de comandos, el programa continúa ejecutándose en segundo plano.
Ver borrar fondo
Si necesitamos ver la operación en segundo plano, ingrese el comando en el servidor: pantalla -x
Si necesita detener la operación en segundo plano, primero ingrese un cierto fondo a través de la pantalla -x [número pid] . Después de ingresar Ctrl+, la Coperación se puede detener.
Si elimina el fondo, primero ingrese un fondo a través de la pantalla -x [número pid] , e ingrese salir después de ingresar
fin
Debido a las necesidades del proyecto en el próximo semestre de penúltimo año, aprendí temporalmente el marco del matraz. Esta es la primera vez que escribo un blog de CSDN. Si hay algún problema, corrígeme ~