前两节我们已经搭建好了静态网页,也从终端接收到数据并储存到了数据库中,本节介绍最后的功能:从数据库到网页进行数据展示。
一、后端Python回应前端请求
因为需要先定义访问路径浏览器才可以访问,所以这里先完成后端部分。
此处的Python需要用到Flask库,所以还是惯例使用pip安装:
pip3 install Flask
之后还需要安装flask_cors库来支持跨域访问:
pip3 install flask_cors
完成之后,将下面Python文件部署到服务器上试运行。
# -*- coding: utf-8 -*-
from flask import Flask
from flask_cors import *
app = Flask(__name__)
CORS(app, resources=r'/*') # r'/*' 是通配符,让本服务器所有的URL 都允许跨域请求
@app.route('/hello')
def hello_world():
return 'Hello World!'
if __name__ == '__main__':
app.run(
host='0.0.0.0', # 任何ip都可以访问
port=5000, # 端口
debug=True)
运行之后会显示如下信息:
(警告内容:不能正式部署在服务器上,可能会出现问题)这里就先不管那么多了,直接使用。
注意:上述程序中使用到的端口号需要在安全组和防火墙放通,否则会出现404.
接下来打开浏览器,输入服务器的IP地址后接自定义路径(“@app.route('/hello')”中的引号部分,注意还需要加上端口号),如果出现如图页面表示成功:
至此后端部分已经开通完毕,可以接收到来自浏览器的请求并返回给定的数据了。下一步使用XMLHttpRequest来发送请求,并将结果数据到网页上。
二、前端发送请求并显示数据
在第一节网页的基础上,增加XMLHttpRequest的函数来实现发送请求并且接收数据:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello, nginx!</h1>
<p>下面将展示从终端发送的数据:</p>
<p id='demo'></p>
<script>
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://xx.xx.xxx.xx:5000/hello", true);
xmlhttp.send();
</script>
</body>
</html>
之后将网页覆盖到var/www/html文件夹下的html文件,在浏览器直接输入服务器外网IP访问,出现以下画面表示成功:
三、后端读取数据库数据
可以看出,之前的后端为了测试功能只返回了一个固定的字符串,按照标题的功能要求,需要从数据库中读取数据,所以还需要再修改一下后端的程序内容:
# -*- coding: utf-8 -*-
from flask import Flask
from flask_cors import *
import pymysql # 导入操作数据库的库
app = Flask(__name__)
CORS(app, resources=r'/*') # r'/*' 是通配符,让本服务器所有的URL 都允许跨域请求
@app.route('/hello')
def hello_world():
# 连接数据库
database = pymysql.connect(host="xx.xx.xxx.xx",
user="myself",
password="xxxxxx",
database="My_Server")
cur = database.cursor() # 取得游标
sql = "SELECT * FROM data1"
cur.execute(sql)
row_1 = cur.fetchone()
return str(row_1[1])
if __name__ == '__main__':
app.run(
host='0.0.0.0', # 任何ip都可以访问
port=5000, # 端口
debug=True)
可以看到,这里只是在返回数据之前连接了数据库并取出了值。
注意:这里不能直接返回float类型的数值,可以返回的内容看下图:
将Python文件重新部署到服务器,运行,之后可以直接从浏览器访问外网IP,显示如下界面:
结语
整个项目到这里就基本结束了,各个基本功能也都实现了。从终端发送数据到服务器接收储存,再到浏览器请求数据并显示,可以说整个框架是搭建起来了。
今后如果有更复杂的项目,可以在此基础之上排列组合:更多的终端输入,更多的数据库表,更好看的网页展示......
希望各位能够有所收获,共同进步!